目次
フォーム部品
HTMLで一般的によく利用されるフォーム部品の一覧です。
| 種類 | タグ / type | 用途 | 主な属性・ポイント |
|---|---|---|---|
| テキスト入力 | 1行の文字入力 | maxlength, placeholder, required | |
| パスワード | パスワード入力 | 入力内容が非表示 | |
| メール | メールアドレス入力 | 自動バリデーションあり | |
| 数値 | 数値入力 | min, max, step | |
| 電話番号 | 電話番号入力 | モバイルで最適キーボード | |
| URL | URL入力 | 形式チェックあり | |
| 検索 | 検索ボックス | 見た目が検索用 | |
| 日付 | 日付入力 | カレンダーUI | |
| 時刻 | 時刻入力 | 時刻選択UI | |
| 日時 | 日付＋時刻 | ローカル時間 | |
| 月 | 月選択 | YYYY-MM形式 | |
| 週 | 週選択 | 年＋週番号 | |
| カラー | 色選択 | カラーピッカー | |
| 範囲 | スライダー入力 | min, max | |
| チェックボックス | 複数選択 | checked | |
| ラジオボタン | 単一選択 | nameでグループ化 | |
| ファイル | ファイル選択 | accept, multiple | |
| 隠し項目 | 非表示データ送信 | ユーザー非表示 | |
| 送信ボタン | フォーム送信 | valueで表示名 | |
| リセット | 入力リセット | 初期値に戻す | |
| ボタン | 汎用ボタン | type=”button”など |
補助的なフォーム要素
| タグ | 用途 | ポイント |
|---|---|---|
| 複数行入力 | rows, cols | |
| プルダウン | ||
| 選択肢 | value指定 | |
| 選択肢グループ | 視認性向上 | |
| ラベル | forで紐付け | |
| グループ化 | 枠で囲む | |
| グループタイトル | fieldsetの見出し | |
| 入力候補 | と併用 | |
| 計算結果表示 | JSと連携 | |
| 進捗バー | value, max | |
| 範囲内の値 | ゲージ表示 |
[…] 左から順にChrome、Firefox、IEのフォーム部品です（覚え書き.com様のキャプチャです） […]