カテゴリー:
HTML5
閲覧数:523 配信日:2015-05-13 00:35
フォーム内要素比較一覧
比較一覧表
属性名 | 必須 | 備考 |
---|---|---|
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>