よく使われる入力項目とコントローラー名一覧（全30種）

はじめに

業務で基本設計書を作成する中で、「画面仕様書」の項目にコントロール名（UI部品の種類）を記載する場面がよくあります。
しかし、改めてどんな種類があるのか体系的に整理したことがなかったため、今回よく使うUI部品を一覧形式でまとめてみました。

入力項目とコントローラー名一覧

No	項目名（UI部品	種類・用途	HTMLタグ / コントローラー名	備考・特徴	イメージ
1	テキストボックス	文字入力	<input type="text">	名前・メールなど単一行文字入力に使用
2	パスワードボックス	パスワード入力	<input type="password">	入力文字が伏字になる
3	テキストエリア	複数行文字入力	<textarea>	コメントや備考欄など
4	ラジオボタン	単一選択	<input type="radio">	選択肢の中から1つだけ選ぶ
5	チェックボックス	複数選択	<input type="checkbox">	複数のON/OFF、同意など
6	ドロップダウンリスト	単一選択（選択肢表示）	<select>	ドロップボックス・セレクトとも呼ばれる
7	リストボックス	複数選択可能な選択肢	<select multiple>	Ctrlで複数選択可能
8	カレンダー入力	日付入力	<input type="date">	ブラウザ依存のUI
9	時刻入力	時刻入力	<input type="time">	時刻選択用のUI
10	日時入力	日付＋時刻	<input type="datetime-local">	スケジュール登録などに便利
11	数値入力	数値入力	<input type="number">	数字専用入力欄
12	メールアドレス入力	メール形式チェック付き	<input type="email">	メールアドレス形式でバリデーションされる
13	電話番号入力	電話番号入力	<input type="tel">	モバイル対応でキーボードが変化
14	URL入力	URL形式チェック付き	<input type="url">	リンク情報の入力に
15	ファイル選択	ファイルアップロード	<input type="file">	添付ファイル・画像投稿など
16	隠し項目（hidden）	表示しない値の送信	<input type="hidden">	フォーム内で内部データを送信したいとき
17	ボタン	任意動作のトリガー	<button> or <input type="button">	JavaScriptと連動して使うことが多い
18	送信ボタン	フォーム送信	<input type="submit">	フォームを送信する標準的なボタン
19	リセットボタン	フォームの初期化	<input type="reset">	入力内容をリセット
20	ラベル（項目名表示）	テキストラベル	<label for="id">	入力欄と紐づけて使う
21	スライダー	数値選択バー	<input type="range">	数値を感覚的に選べる（音量など）
22	トグルスイッチ	ON/OFFスイッチ	<input type="checkbox">＋CSS	チェックボックスのスタイリング版
23	カラーピッカー	色選択	<input type="color">	UIで色を選べる
24	検索ボックス	検索入力	<input type="search">	プレースホルダー付き検索入力に向いてる
25	オートコンプリート	候補表示付き入力	JavaScript / <datalist>	入力候補表示に使える
26	ツールチップ	補足説明のポップアップ	title属性	ホバー時に説明表示
27	スピナー（数値調整）	数値の増減	<input type="number">＋上下ボタン	UIで±できる
28	セクションタイトル	見出し・区切り	<h1>〜<h6>	UI設計上のラベル的用途
29	プレースホルダー	入力例・ヒント	placeholder属性	入力の補助テキスト
30	説明文（インフォテキスト）	補足説明文	<small> or <p class="note">	入力欄の下などに表示