HTML <form>

ボタン等のフォーム部品を配置するのに使用します。

フォーム部品には、以下の種類があります。

<INPUT>
<SELECT>

フォーム部品は <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>

属性

accept-charset

フォーム送信に使用する文字エンコーディングを指定する。

<form accept-charset="utf-8">

action（必須属性）

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

action-xhr

AMP (Accelerated Mobile Pages) でフォームを使用するときに指定する。

AMPにおけるform要素の必須属性
method	必須属性
GET	action 又は action-xhr
POST	action-xhr

autocomplete

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

enctype

MIMEタイプを指定します。

enctype 属性
属性値	意味
application/x-www-form-urlencoded	エンコード（変換）された状態で送信します。（規定値）
multipart/form-data	添付ファイルとして送信します。フォームでファイルを送信する場合に指定します。
text/plain	プレーンテキストで送信します。フォームの内容をメールで送信する場合に指定します。

<form enctype="multipart/form-data">
  <label for="file">ファイル</label>
  <input type="file" id="file">
  <input type="submit">
</form>

method

サーバーにクエリ送信する形式を指定します。

method 属性値
値	意味
GET	送信するデータが URL 中に埋め込まれます。（規定値）
POST	送信するデータが URL とは別に送られます。

name

スクリプティングで使用するためのフォーム名

novalidate

フォーム送信時のフォームコントロールのバリデーションを回避する。属性名だけ指定すればよい。

<form novalidate>
  <label for="pw">Password</label>
  <input type="password" id="pw" minlength="8" maxlength="16">
</form>

ondblclick

要素がダブルクリックされたときに実行するJavaScriptを指定する。

onsubmit

Submitボタンを押したときに実行するスクリプトを記述します。

onreset

Resetボタンを押したときに実行するスクリプトを記述します。

target

リンク先のページを開くときに現在のウィンドウを使うか、新しいウィンドウを開くかを指定します。省略した場合は、現在のウィンドウを使います。

target 属性
属性値	意味
_blank	新しいウィンドウを開きます
_self	現在のウィンドウを使います
名前	指定した名前のフレームを使います
_top	フレーム分割している場合、フレームを解除して現在のウィンドウを使います

JavaScript

JavaScriptからは HTMLFormElement インタフェースを通じてform要素へアクセスできる。

参考文献

Web Hypertext Application Technology Working Group (2022) "Forms" HTML Living Standard

OpenJS Foundation (2022) amp-form

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

文字列をクリックしてもチェックされません文字列をクリックするとチェックされます

JavaScript

JavaScriptからは HTMLLabelElement インタフェースを通じてform要素へアクセスできる。

参考文献

Web Hypertext Application Technology Working Group (2022) "Forms" HTML Living Standard

<OPTGROUP>

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

書式

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

属性

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

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

例

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

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

JavaScript

JavaScriptからは HTMLOptGroupElement インタフェースを通じてform要素へアクセスできる。

参考文献

Web Hypertext Application Technology Working Group (2022) "The optgroup element" HTML Living Standard

<FIELDSET>

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

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

書式

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

例

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> タグを使う。

JavaScript

JavaScriptからは HTMLFieldSetElement インタフェースを通じてform要素へアクセスできる。

参考文献

Web Hypertext Application Technology Working Group (2022) "The fieldset element" HTML Living Standard