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はい⇒OK いいえ⇒キャンセル')){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;">

枠の色「red」を「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>☆1行目 </OPTION>
<OPTION>★2行目 </OPTION>
<OPTION>☆3行目 </OPTION>
<OPTION>★4行目</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>☆1行目
<OPTION>★2行目
<OPTION>☆3行目
<OPTION>★4行目
</SELECT>

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

size=数字は最初に表示される行数です
色をつける
<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>

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