フォーム内要素比較一覧 ／ <label> 要素／ <fieldset> 及び <legend> 要素

フォーム内要素比較一覧

比較一覧表

属性名	必須	備考
action	×	省略すると、送信先はそのHTMLファイル自身になる
name	〇	-
id	×	-

<label> 要素

項目名（ラベル）
・フォーム部品と項目名（ラベル）を関連付ける際に使用する
・複数使用可

フォーム部品とラベルを関連付ける2つの方法
・方法a.<label>～</label>の中にフォーム部品を配置する
・方法b.<label>タグのfor属性の値とフォーム部品のid属性の値を一致させる

コード例

<form action="xx.php" method="post">

  <label>テキスト<input type="text" name="xx"></label>

  <label>ファイル<input type="file" name="xx"></label>

  <label>ファイル(複数)<input type="file" name="xx" multiple></label>

  <label>メール<input type="email" name="xx"></label>

  <label>URL<input type="url" name="xx"></label>

  <label><input type="url" name="tweet_url" placeholder="画像投稿したツイートURLを入力してください。入力必須です" required><label>

  <label>検索<input type="search" name="xx"></label>

  <label>電話<input type="tel" name="xx"></label>

  <label>数値<input type="number" name="xx"></label>

  <label>日付<input type="date" name="xx"></label>

  <label>日時<input type="datetime" name="xx"></label>

  <label>ローカル日時<input type="datetime-local" name="xx"></label>

  <label>月<input type="month" name="xx"></label>

  <label>週<input type="week" name="xx"></label>

  <label>時間<input type="time" name="xx"></label>

  <label>レンジ<input type="range" name="xx"></label>

  <label>色<input type="color" name="xx"></label>

  <label for="★★">select 要素</label>

  <select name="xx" id="★★">

    <option value="">--オプションを選択してください--</option>

    <option value="a">あ</option>

    <option value="b">い</option>

  </select>

  <label for="☆☆">select 要素</label>

  <select name="xx" id="☆☆">

    <option value="a">あ</option>

    <option value="" selected>--オプションを選択してください--</option>

    <option value="b">い</option>

  </select>

  <label for="●●">textarea 要素</label>

  <textarea id="●●" name="xx" rows="5" cols="33" placeholder="初期値"></textarea>

  <input type="submit" value="送信">

</form>

・HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い
・<input>: 入力欄 (フォーム入力) 要素

<fieldset> 及び <legend> 要素

<fieldset> 要素
フォーム入力項目をグループ化する際に使用
・グループ先頭には、<legend>～</legend>で入力項目グループにタイトルをつける
・フォーム入力項目をグループ化することで、Tabキーなどでグループ間を簡単に移動できるという利点がある

<legend> 要素
・<fieldset>タグでグループ化されたフォームの入力項目にタイトルを付けるために使用
・<fieldset>～<fieldset>内の先頭に1つだけ記述

コード例

<form>

  <fieldset>

    <legend>グループ名</legend>



    <label for="★★">項目名a</label>

    <input type="radio" id="★★" name="xx">



    <label for="☆☆">項目名b</label>

    <input type="radio" id="☆☆" name="xx">



    <button type="submit">送信</button>

  </fieldset>

</form>