Toppagegalleryへ


ボタン・リストボックスなどの書き方

表示 タグ
アラート
 <INPUT type="button" value="ここを押す" onclick=alert('こんにちは')>
アラート
 <INPUT type="button" value="ここを押す" onclick=if(confirm('信号青は進め？')) {alert('正解');}else{alert('長生きしてね');}>
アラート
 <INPUT type="button" value="ここを押す" onclick=alert('こういうボタンって\n何度も押したりする人？');disabled='false';value="押せないよ">
長いアラート
 <input type="button" value='和田アキ子って女？'onClick=if(confirm('さぁ〜て、こたえは？\nはい⇒ＯＫ　いいえ⇒キャンセル')){alert('本当にそうですか？');alert('ファイナルアンサー？？');alert('シーーン・・・・');alert('せいかぁ〜い！');value='賞品は無しヨ';disabled='false'}else{alert('言いつけちゃおっと！');value='マジやばいかも';disabled='false'}>
いたずらボタン
 <INPUT type="button" value='押しちゃイヤん' onclick=alert('あら押しちゃいましたね…');alert('大変ですよ');alert('消えません');alert('消えません…');alert('消えません…');alert('消えません…');alert('消えません…');alert('消えません…');alert('消えますから\nゴメン！')>
ボタンの色
 <INPUT type="button" style="background-color:pink;color:white;border-color:red;" value="ここを押す" onclick=alert('ピンク色')>
平面ボタン
 <INPUT type="button" value="ここを押す" onClick=alert('平面に見えますか？') style="border-style:solid;border-width:2px;border-color:red;
background:pink;color:white;">

枠の色「ｒｅｄ」を「pink」にすると枠線が無くなります
カーソルで
色が変わるボタン
 <INPUT type="button" value="色が変わる" onClick=alert('ボタンの色が変わります') style=#border-style:solid;border-width:2px;border-color:red;
background:pink;color:white" onMouseOver=this.style.background='deeppink' onMouseOut=this.style.background='pink'>
スクロールするボタン
 <button style="width:120;border-style:solid;border-width:2px;border-color:red;
background:pink;color:white" onClick=alert('スクロールします')><marquee width=120 scrollamount=3>スクロールです・・古いネスケでは動作しません</marquee></button>
戻るボタン
 <INPUT type="button" value="戻る" onclick=history.go(-1)>

JavaScriptを有効にしていないブラウザでは機能しません
閉じるボタン
 <INPUT type="button" value="閉じる" onclick=self.close()>

実際に閉じてしまうので説明だけです
リンクボタン
 <INPUT type="button" value="リンク" onClick="location.href='リンク先のURL'">
プルダウン
 <SELECT>
<OPTION>見出し行 </OPTION>
<OPTION>☆１行目 </OPTION>
<OPTION>★２行目 </OPTION>
<OPTION>☆３行目 </OPTION>
<OPTION>★４行目</OPTION>
</SELECT>
プルダウン式リンク
 <SELECT onchange="location=this.options[this.selectedIndex].value">
<OPTION selected>見出し行</OPTION>
<OPTION value="http://www.yahoo.co.jp/">ヤフー</OPTION>
<OPTION value="http://www.google.co.jp/">グーグル</OPTION>
<OPTION value="a05.htm">サイト内のページへ</OPTION>
<OPTION value="#">リンク先</OPTION>
<OPTION value="#">リンク先</OPTION>
</SELECT>
色をつける
 <SELECT style="background-color:pink;color:red;">
<OPTION>見出し行
<OPTION>☆１行目
<OPTION>★２行目
<OPTION>☆３行目
<OPTION>★４行目
</SELECT>

style="background-color:背景色;color:文字色;" をつけます　
一行ごとに色分け
 <SELECT>
<OPTION style='background-color:pink;color:white'>
見出し行</OPTION>
<OPTION style='background-color:white;color:pink'>
１行目</OPTION>
<OPTION style='background-color:pink;color:white'>
２行目</OPTION>
<OPTION style='background-color:white;color:pink'>
３行目</OPTION>
<OPTION style='background-color:pink;color:white'>
４行目</OPTION>
</SELECT>
セレクトボックス
 <SELECT size=3>
<OPTION>あいうえお</OPTION>
<OPTION>かきくけこ</OPTION>
<OPTION>さしすせそ</OPTION>
<OPTION>たちつてと</OPTION>
<OPTION>なにぬねの</OPTION>
<OPTION>はひふへほ</OPTION>
</SELECT>

ｓｉｚｅ＝数字は最初に表示される行数です
色をつける
 <SELECT size=5 style='background-color:yellow;color:red'>
<OPTION>あいうえお</OPTION>
<OPTION>かきくけこ</OPTION>
<OPTION>さしすせそ</OPTION>
<OPTION>たちつてと</OPTION>
<OPTION>なにぬねの</OPTION>
<OPTION>はみふへほ</OPTION>
<OPTION>まみむめも</OPTION>
<OPTION>や　ゆ　よ</OPTION>
</SELECT>
テキストエリア
 <TEXTAREA rows="4" cols="15">あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの</TEXTAREA>

rowsは行数、colsはテキストの幅
テキストエリア装飾
 <TEXTAREA rows="4" cols="15" style='border-style:double;border-width:5px;border-color:red;
background:yellow;font-size:10pt;
color:blue;scrollbar-face-color:lightgreen;'>
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
</TEXTAREA>

いろいろ指定してみました