HTML5 from関連

form要素ではHTML5で新たにautocomplete属性とnovalidate属性が追加され、accept属性が廃止されました。form要素の外にフォームを設置することも可能になりました。

• カテゴリ
• コンテンツ・モデル
• 属性
  • グローバル属性
  • accept-charset：文字エンコーディング
  • action：送信先のURL
  • autocomplete：オートコンプリートのon/off
  • enctype：MIMEタイプ
  • method：HTTPメソッドを指定
  • name：フォームの名前
  • novalidate：フォーム送信時のデータ検証を無効化
  • target：ターゲット

<form action="test.cgi" method="post" enctype="application/x-www-form-urlencoded"
accept-charset="UTF-8" name="testform" autocomplete="on" novalidate="novalidate">〜</form>

fieldset要素

• カテゴリ
  • フロー
  • セクショニングルート
  • パルパブル
• コンテンツモデル：フロー
• 属性
  • disabled：項目の無効化
  • form：id属性を指定することで他のform要素との関連付ける
  • name：fieldset要素に名前を指定

fieldset要素は複数の入力フォームをグループ化する場合に指定します。HTML5で変更されました。

fieldset要素にdisabled属性を指定するとfieldset要素無いのすべてのフォームが無効になります。

legend要素

• コンテンツモデル：フレージング
• 属性：グローバル

legend要素はfieldset要素によってグループ化されたフォームのキャプションを付けるために使用されます。

<form action="test.cgi" method="post">
  <p><input type="text" name="name" size="30"></p>
  <p><input type="text" name="mail" size="30"></p>

  <fieldset disabled="disabled">
    <legend>パスワード</legend>
    <p><input type="password" name="pass" size="30"></p>
  </fieldset>

  <fieldset>
    <legend>キャプション</legend>
    <input type="radio" name="radio" value="linux">Linux
    <input type="radio" name="radio" value="Mac">Mac
    <input type="radio" name="radio" value="Windows">Windows
  </fieldset>

  <p><input type="submit" value="送信"></p>
</form>

label要素

• カテゴリ
  • フロー
  • フレージング
  • インタラクティブ
  • フォーム関連
  • パルパブル
• コンテンツモデル：フレージング
• 属性
  • グローバル
  • form属性：label要素をフォームオーナーと関連付ける
  • for属性：idを指定して関連要素のヒモ付を行う

<form action="">
<label>Linux <input type="radio" name="radio" value="Linux"></label>
<label>Apache <input type="radio" name="radio" value="Apache"></label>
<label>MySQL <input type="radio" name="radio" value="MySQL"></label>
<label>PHP5 <input type="radio" name="radio" value="PHP5"></label>
</form>

以下は上記の表示結果です。labelを付けることでテキスト部分のクリックでも選択されるようになります。

Linux Apache MySQL PHP5