表示 |
タグ |
|
アラート
|
<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>
いろいろ指定してみました |
|