ボタン等のフォーム部品を配置するのに使用します。
フォーム部品には、以下の種類があります。
フォーム部品は <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>
<form accept-charset="utf-8">
method | 必須属性 |
---|---|
GET | action 又は action-xhr |
POST | action-xhr |
on
(デフォルト)を指定した場合、フォーム内のinput要素でオートコンプリート(Webブラウザによる入力候補及び自動補完)が有効になる。
off
を指定した場合、フォーム内のinput要素でオートコンプリートが無効になる。ただし、Webブラウザによっては、この指定が無視されることがある。
属性値 | 意味 |
---|---|
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>
値 | 意味 |
---|---|
GET | 送信するデータが URL 中に埋め込まれます。(規定値) |
POST | 送信するデータが URL とは別に送られます。 |
<form novalidate>
<label for="pw">Password</label>
<input type="password" id="pw" minlength="8" maxlength="16">
</form>
属性値 | 意味 |
---|---|
_blank | 新しいウィンドウを開きます |
_self | 現在のウィンドウを使います |
名前 | 指定した名前のフレームを使います |
_top | フレーム分割している場合、フレームを解除して現在のウィンドウを使います |
JavaScriptからは HTMLFormElement インタフェースを通じてform要素へアクセスできる。
Web Hypertext Application Technology Working Group (2022) "Forms" HTML Living Standard
OpenJS Foundation (2022) amp-form
<label> はフォームの部品にラベルをつける HTML タグです。ラベルとは、フォームの部品に関連付けられた文字列のことです。例えば、チェックボックスにラベルを付けると、ラベルの文字列をクリックしてもチェックボックスをクリックしたことになります。
開始タグと終了タグは省略できません。開始タグと終了タグの間にはインライン要素(LABEL 要素を除く)が任意回数表れます。
HTMLタグ
<label>
の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
<form>
<input type="checkbox" id="cb1" value="1">
文字列をクリックしてもチェックされません<br>
<input type="checkbox" id="cb2" value="2">
<label for="cb2">文字列をクリックするとチェックされます</label>
</form>
文字列をクリックしてもチェックされません
JavaScriptからは HTMLLabelElement インタフェースを通じてform要素へアクセスできる。
Web Hypertext Application Technology Working Group (2022) "Forms" HTML Living Standard
開始タグ<OPTGROUP>と終了タグ</OPTGROUP>の間にある複数の <OPTION> をグループ化します。<SELECT>の選択肢をカテゴリ分けして表示させるときに使用します。 Internet Explorer 5 では未サポートのようです。
開始タグと終了タグは省略できません。開始タグと終了タグの間にはOPTION要素タイプが 1 回以上現れます。
label 属性は必須です。その他の属性は省略できます。
disabled
属性を指定したoptgroup
要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled
属性を指定したoptgroup
要素の値は、サブミット時にフォームデータを送信しない。
HTMLタグ
<optgroup>
の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
<form>
<select>
<optgroup label="美勇伝">
<option>石川梨華</option>
<option>三好絵梨香</option>
<option>岡田唯</option>
</optgroup>
<optgroup label="W">
<option>辻希美</option>
<option>加護亜依</option>
</optgroup>
</select>
</form>
JavaScriptからは HTMLOptGroupElement インタフェースを通じてform要素へアクセスできる。
Web Hypertext Application Technology Working Group (2022) "The optgroup element" HTML Living Standard
フォームの中の部品をグループ化します。グループ化した部品は枠線で囲まれます。 <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からは HTMLFieldSetElement インタフェースを通じてform要素へアクセスできる。
Web Hypertext Application Technology Working Group (2022) "The fieldset element" HTML Living Standard