フォーム

トップ > 逆引きリファレンス > フォーム

フォームを作成するには

フォームを作成するには、<form> を用います。<form>~</form> の間に、<input type="text"> などのフォーム部品を配置します。

<form method="POST" action="test.cgi">
 名前: <input type="text" name="NAME"><br>
 住所: <input type="text" name="ADDR"><br>
 <input type="submit" value="送信">
</form>
名前:
住所:

フォーム部品(テキスト)を作成するには

テキスト部品を表示するには、<input type="text"> を用います。

名前:<input type="text" name="NAMAE">
名前:

フォーム部品(テキストエリア・テキストボックス)を作成するには

テキストエリア(テキストボックス)部品を表示するには、<textarea> を用います。cols に横の文字数、rows に縦の行数を指定します。

<textarea name="KANSOU" cols=30 rows=3>AAA</textarea>

フォーム部品(ラジオボタン)を作成するには

ラジオボタン部品を表示するには、<input type="radio"> を用います。ラジオボタンでは、グループの中のどれかひとつのみが選択可能となります。ラジオボタングループには name 属性に同じ名前を指定します。

<input type="radio" name="SEIBETSU" checked>男性
<input type="radio" name="SEIBETSU">女性
男性 女性

フォーム部品(チェックボックス)を作成するには

チェックボックス部品を表示するには、<input type="checkbox"> を用います。チェックボックスでは、グループの中の複数の項目を選択可能です。チェックボックスボタングループには name 属性に同じ名前を指定します。

<input type="checkbox" name="RIYUU">書店で
<input type="checkbox" name="RIYUU">友人に薦められて
書店で 友人に薦められて

フォーム部品(セレクト部品)を作成するには

セレクト部品には <select> を用います。

<select name="KOKUMEI">
 <option value="JAPAN">日本
 <option value="USA">米国
 <option value="ENGLAND">英国
</select>

フォーム部品(ボタン)を作成するには

ボタン部品には <input> の type="submit"、type="reset"、type="button" を用います。サブミット(submit)ボタンはフォームの入力データを <form> の action="..." で指定した送信先に送信します。リセット(reset)ボタンはフォームに入力したデータを破棄して、初期状態に戻します。

<form method="POST" action="sousin.cgi">
 名前:<input type="text" name="NAMAE"><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 type="text/javascript">
<!--
function check() {
  if (document.f1.NAME.value == "") {
    alert("名前が入力されていません。");
    document.f1.NAME.focus();
    return false;
  }
  if (document.f1.ADDR.value == "") {
    alert("住所が入力されていません。");
    document.f1.ADDR.focus();
    return false;
  }
  return true;
}
// -->
</script>
<form name="f1" onsubmit="return check()">
 <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">

ボタンのサイズを指定するには

ボタンのサイズを指定するには、スタイルシートの width を用います。

<button style="width:300px">OK</button>

ボタンに画像や色つき文字を表示するには

<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>

Copyright (C) 2003-2004 杜甫々
初版: 2003年10月12日、最終更新:2004年4月18日
http://www.tohoho-web.com/how2/form.htm