HTML5のフォーム関連～form要素とlabel要素～

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

フォーム関連

<form action="" method="post">
    <P>
        <label for="fravor">ラーメンの種類</label>
        <input id="fravor" type="text" name="ramenfravor">
    </P>
    <P>
        <label>トッピング<input type="text" name="ramentopping"></label>
    </P>
</form>

chromeで表示したとき

form要素

フォーム関連要素のコレクションを表す。

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ(ただし、form要素は子孫にできない)

コンテンツ属性
・グローバル属性
・accept-charset - form送信に使用する文字エンコード
・action - form送信に使用するURL
・autocomplete - formの自動入力のデフォルト設定(onかoffを指定)
・enctype - form送信に使用するエンコーディングタイプ
・method - form送信に使用するHTTPメソッド
・name - document.forms APIで使用するform名
・novalidate - form入力値の検証なしの設定(論理属性で指定)
・target - form送信後のブラウジングコンテキスト

タグの記載場所
・フローコンテンツが配置できる場所

label要素

フォームコントロールにラベル付けすることができる。
ラベル付けするには、for属性を使用するか、label要素の子孫としてフォームコントロールを配置する。

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・インタラクティブコンテンツ
・フォーム関連要素(button fieldset input label object output select textarea img)
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ
(ただし、label要素を子孫に持つことは不可能。
また、label要素で関連付けしていない関連付け可能なフォーム関連要素も子孫に持つことは不可能。)

コンテンツ属性
・グローバル属性
・for - フォームコントロールとlabelを関連付ける。(フォームコントロールにはid属性で指定)

タグの記載場所
・フレージングコンテンツが記載可能な場所。