フォームを作成するには、<form> を用います。<form>～</form> の間に、<input type="text"> などのフォーム部品を配置します。
<form method="POST" action="test.cgi"> <div>名前： <input type="text" name="name"></div> <div>住所： <input type="text" name="addr"></div> <div><input type="submit" value="送信"></div> </form>
テキストエリア(テキストボックス)部品を表示するには、<textarea> を用います。cols に横の文字数、rows に縦の行数を指定します。
<textarea name="memo" cols=30 rows=3>AAA</textarea>
ラジオボタン部品を表示するには、<input type="radio"> を用います。ラジオボタンでは、グループの中のどれかひとつのみが選択可能となります。ラジオボタングループには name 属性に同じ名前を指定します。
<input type="radio" name="gender" checked>男性 <input type="radio" name="gender">女性
チェックボックス部品を表示するには、<input type="checkbox"> を用います。チェックボックスでは、グループの中の複数の項目を選択可能です。チェックボックスボタングループには name 属性に同じ名前を指定します。
<input type="checkbox" name="favorite">音楽 <input type="checkbox" name="favorite">スポーツ
セレクト部品には <select> を用います。
<select name="country"> <option value="Japan">日本 <option value="USA">米国 <option value="UK">英国 </select>
ボタン部品には <input> の type="submit"、type="reset"、type="button" を用います。サブミット(submit)ボタンはフォームの入力データを <form> の action="..." で指定した送信先に送信します。リセット(reset)ボタンはフォームに入力したデータを破棄して、初期状態に戻します。
<form method="POST" action="example.cgi"> 名前：<input type="text" name="name"><br> <input type="submit" value="送信"> <input type="reset" value="取消"> </form>
ボタン(button)は単体では特に意味の無いボタンを表示します。通常、JavaScript と組み合わせて使用します。
<input type="button" onclick="alert('Hello!!')" value="Click Me!">
テキストなどのフォーム部品にデフォルト値(初期値)を設定するには、value 属性を用います。type="text"、type="hidden" に対して有効です。type="file" に関してはセキュリティの関係でデフォルト値を設定することができません。
<input type="text" name="XXX" value="あいうえお">
テキストエリア部品の初期値を設定するには、<textarea> と </textarea> の間に初期値を書き込みます。
<textarea cols=50 rows=4 name="XXX">あいうえお</textarea>
チェックボックスやラジオボタンの初期値を設定するには、checkd 属性を用います。
<input type="checkbox" name="XXX">あああ <input type="checkbox" name="XXX" checked>あああ <input type="radio" name="YYY">あああ <input type="radio" name="YYY" checked>あああ
セレクト部品の初期値を設定するには、<option> タグに selected 属性を指定します。
<select name="XXX"> <option value="IE">Internet Explorer <option value="NS">Netscape <option value="OP" selected>Opera </select>
フォーム入力部品の入力文字数を制限するには、<input> タグの maxlength 属性を指定します。
<input type="text" maxlength=10>
<textarea> には maxlength 属性がサポートされていないため、下記のような JavaScript を利用します。ただしこの方法は、コピー＆貼り付けなど、キーボード以外からの入力に対しては機能しないので注意してください。
<textarea onkeypress="return (this.value.length < 10)"></textarea>
下記のようにして、フォームの未入力項目をチェックすることができます。
<script>
function check(form) {
if (form.name.value == "") {
alert("名前が入力されていません。");
form.name.focus();
return false;
}
if (form.addr.value == "") {
alert("住所が入力されていません。");
form.addr.focus();
return false;
}
return true;
}
</script>
<form name="f1" onsubmit="return check(this)">
<div>名前：<input type="text" name="name"></div>
<div>住所：<input type="text" name="addr"></div>
<input type="submit" value="送信">
</form>
スタイルシートを用いることにより、フォーム部品の色などを指定することができます。
<input type="text" style="color:#800000; background-color:#ffcccc">
<input type="button"> の代わりに <button> を用いることで、ボタンに表示する文字に HTML を使用することが可能になります。<img> で画像を表示することも可能です。
<button><span style="color;#800000;"><b>Click Me!!</b></span></button>
フォームを用いると、フォームの上下に余分な隙間が開いてしまいます。この隙間を無くすには、<form> にスタイルシートの margin を指定してやります。
<form style="margin-top:0em; margin-bottom:0em"> : </form>
テキストエリアの初期値として指定する文字列を改行させるには、次のように、単純に改行したい箇所で改行すれば可能です。
<textarea cols=40 rows=2 mame="t1">あいうえお かきくけこ</textarea>
JavaScript からテキストエリアに改行付きの文字を書き込むには、改行を示す特殊文字 \n を用いてください。
document.f1.t1.value = "あいうえお\nかきくけこ";
フォーム部品にフォーカスを当てるには focus() を用います。
<form name="f1" action="#"> <input type="text" name="t1"> <input type="text" name="t2"> <input type="button" onclick="document.f1.t1.focus()" value="T1"> <input type="button" onclick="document.f1.t2.focus()" value="T2"> </form>
ページを開いた時に、指定した部品にフォーカスをあてておくには、<body> タグに次のような属性を追記します。
<body onload="document.f1.t1.focus()">
フォームにフォーカスが移動したときに日本語入力機能(IME)をオンにしたり、オフにしたりするには、スタイルシートの ime-mode を用います。active はフォーカス移動時にオン、inactive はフォーカス移動時にオフ、disabled は IME の使用禁止を意味します。
<textarea style="ime-mode: active;"></textarea>