カテゴリー:
HTML5
閲覧数:564 配信日: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> |