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

Webデザイン

カテゴリー: 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>



週間人気ページランキング / 11-16 → 11-22
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 10
3 Design 0 8
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 6
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
5 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
7 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
7 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ Lab | 色変換(色) 3
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
7 色モデルイメージ図 | 色変換(色) 3
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
8 ICCプロファイル | カラーマネージメント(色) 2
8 パッケージ化されてない拡張機能 | Chrome 拡張機能 2
8 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 2
8 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
2024/11/23 1:01 更新
指定期間人気ページランキング / 2020-5-30 → 2024-11-22
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8417
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4504
3 血の色 / #b30000 / #360800 / #ff0000 | 色 3638
4 Design 0 3607
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2631
6 RGBの種類 / ビットカラー | RGB(色) 2588
7 「bgcolor」「background-color」「background」の違い | CSS 1885
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1771
9 コズミックブルーが何色か分からない | 色 1753
10 16進数カラーコード / 2進数 1640
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1615
12 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1589
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 1571
14 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1488
15 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1332
16 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1205
17 HSLとHSVの違い | 色変換(色) 1135
18 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 1040
19 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 1025
20 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 1006
2024/11/23 1:01 更新