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

Webデザイン

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



週間人気ページランキング / 3-22 → 3-28
順位 ページタイトル抜粋 アクセス数
1 Design 0 42
2 LOCK: File currently in use. / マニフェストを読み込めませんでした 10
3 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
4 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
4 16進数カラーコード / 2進数 6
4 navタグで定義している部分だけCSSが効かない【html5】 | HTML5(HTML) 6
5 HLS / HSL 4
5 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 4
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
6 画像大きさ | 他サイト調査(HTML) 2
6 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
6 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2
7 Google Chrome を閉じた際にバックグラウンド アプリの処理を続行する / ハードウェア アクセラレーションが使用可能な場合は使用する 1
7 Chromeで名前を付けて保存する際、ファイルを一つにする方法 1
7 ログイン 1
7 「font-size」効果を打ち消すスタイルシートは、「font-size:100%;」? 1
7 イラスト素材 | デザイン 1
7 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 1
7 36ビットカラー 1
7 RGBの種類 / ビットカラー | RGB(色) 1
2024/3/29 1:01 更新
指定期間人気ページランキング / 2020-5-30 → 2024-3-28
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8094
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4332
3 血の色 / #b30000 / #360800 / #ff0000 | 色 3448
4 Design 0 3346
5 RGBの種類 / ビットカラー | RGB(色) 2429
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2303
7 「bgcolor」「background-color」「background」の違い | CSS 1759
8 コズミックブルーが何色か分からない | 色 1696
9 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1694
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1526
11 「属性」「プロパティ」「アトリビュート」の違い | CSS 1518
12 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1456
13 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1391
14 16進数カラーコード / 2進数 1337
15 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1221
16 HSLとHSVの違い | 色変換(色) 1127
17 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 1006
18 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 960
19 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 955
20 GIFアニメーション | 画像 912
2024/3/29 1:01 更新