フォームに関するHTMLタグ

<form>

ボタン等のフォーム部品を配置するのに使用します。フォーム部品には、以下の種類があります。

フォーム部品は <FIELDSET> タグでグループ化することができます。

XML文書をXSLTスタイルシートでHTML文書に変換した場合、FORMからの送信データは UTF-8 でエンコーディングされます(エンコーディング方法を指定しても無視されます)。POST先(サーブレットやCGI)でエンコーディング方法を UTF-8 以外に指定すると文字化けしてしまいます。

フォームのデフォルトのボタンは、最初のサブミットボタンである。

ひとつのフォームに複数のサブミットボタンがある場合

<form action="http://itref.fc2web.com">
  <input type="submit" name="button1" value="value">
  <input type="submit" name="button2" value="value">
</form>

button1をクリックした場合、 button1=value というデータが送信される。button2をクリックした場合、 button2=value というデータが送信される。

<form action="http://itref.fc2web.com">
  <input type="submit" name="button" value="button1">
  <input type="submit" name="button" value="button2">
</form>

button1をクリックした場合、 button=button1 というデータが送信される。button2をクリックした場合、 button=button2 というデータが送信される。

書式

<form">
  <!-- form content -->
</form>

開始タグと終了タグは省略できません。

内容モデル

開始タグと終了タグの間にはブロック要素(ただし、FORM 要素を除く)または SCRIPT 要素が現れます。

formの中にformを入れることはできない。formの入れ子(ネスト)は禁じられている。

<!-- 間違ったHTML -->
<form action="foo.php">
  <input name="common" value="bar">
  <form action="bar.php">
    <input type="submit">
  </form>
  <input type="submit">
</form>

属性

action(必須属性)
サブミット(実行)されたときの動作を指定します。具体的には、実行する CGIやサーブレット、JSP などの URI を記述します。必須属性で省略できません。
autocomplete(HTML5)

on (デフォルト)を指定した場合、フォーム内のinput要素でオートコンプリート(Webブラウザによる入力候補及び自動補完)が有効になる。 off を指定した場合、フォーム内のinput要素でオートコンプリートが無効になる。ただし、Webブラウザによっては、この指定が無視されることがある。

method
サーバーにクエリ送信する形式を指定します。
method 属性値
意味
GET 送信するデータが URL 中に埋め込まれます。(規定値)
POST 送信するデータが URL とは別に送られます。
enctype
MIMEタイプを指定します。
enctype 属性
属性値 意味
application/x-www-form-urlencoded エンコード(変換)された状態で送信します。(規定値)
multipart/form-data 添付ファイルとして送信します。フォームでファイルを送信する場合に指定します。
text/plain プレーンテキストで送信します。フォームの内容をメールで送信する場合に指定します。
name
スクリプティングで使用するためのフォーム名
onsubmit
Submitボタンを押したときに実行するスクリプトを記述します。
onreset
Resetボタンを押したときに実行するスクリプトを記述します。
target
リンク先のページを開くときに現在のウィンドウを使うか、新しいウィンドウを開くかを指定します。省略した場合は、現在のウィンドウを使います。
target 属性
属性値 意味
_blank 新しいウィンドウを開きます
_self 現在のウィンドウを使います
名前 指定した名前のフレームを使います
_top フレーム分割している場合、フレームを解除して現在のウィンドウを使います

<LABEL>

<label> はフォームの部品にラベルをつける HTML タグです。ラベルとは、フォームの部品に関連付けられた文字列のことです。例えば、チェックボックスにラベルを付けると、ラベルの文字列をクリックしてもチェックボックスをクリックしたことになります。

書式

<label> 0個以上のインライン要素 </label>

開始タグと終了タグは省略できません。開始タグと終了タグの間にはインライン要素(LABEL 要素を除く)が任意回数表れます。

属性

accesskey
文字
for
関連付けるフォーム部品の ID を指定します。
onblur
スクリプト
onfocus
スクリプト

HTMLタグ <label> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
  <input type="checkbox" id="cb1" value="1">
    文字列をクリックしてもチェックされません<br>
  <input type="checkbox" id="cb2" value="2">
  <label for="cb2">文字列をクリックするとチェックされます</label>
</form>
文字列をクリックしてもチェックされません

<OPTGROUP>

開始タグ<OPTGROUP>と終了タグ</OPTGROUP>の間にある複数の <OPTION> をグループ化します。<SELECT>の選択肢をカテゴリ分けして表示させるときに使用します。 Internet Explorer 5 では未サポートのようです。

書式

<optgroup> ... </optgroup>

開始タグと終了タグは省略できません。開始タグと終了タグの間にはOPTION要素タイプが 1 回以上現れます。

属性

label 属性は必須です。その他の属性は省略できます。

disabled
disabled属性を指定したoptgroup要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したoptgroup要素の値は、サブミット時にフォームデータを送信しない。
label
グループのラベルを指定します。

HTMLタグ <optgroup> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
<select>
  <optgroup label="美勇伝">
    <option>石川梨華</option>
    <option>三好絵梨香</option>
    <option>岡田唯</option>
  </optgroup>
  <optgroup label="W">
    <option>辻希美</option>
    <option>加護亜依</option>
  </optgroup>
</select>
</form>

<FIELDSET>

フォームの中の部品をグループ化します。グループ化した部品は枠線で囲まれます。 <FORM> と </FORM> の間に記述します。

<LEGEND> タグでフィールドセットに見出しを付けることができます。

書式

<fieldset> ... </fieldset>

開始タグと終了タグは省略できません。

HTMLタグ <fieldset> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
  <fieldset>
    <input type="radio" name="account" value="sa" id="sa" checked>
    <label for="sa">普通預金</label>
    <input type="radio" name="account" value="ca" id="ca">
    <label for="ca">当座預金</label>
  </fieldset>
</form>

fieldset要素に見出しを付けるには、<legend> タグを使う。

HTMLタグ

HTMLタグには次のものがある。