HTML の <input> 要素は、Web フォーム内でユーザーからのデータ入力を受け取るための基本的なコンポーネントです。
input 要素の型 (type 属性)
テキスト型およびセマンティック型
| 型 | 説明 |
|---|---|
text |
単一行のプレーンテキスト入力 |
password |
入力文字が伏字になるパスワード入力 |
email |
ブラウザによる自動形式検証付きメールアドレス入力 |
url |
絶対 URL の入力 |
tel |
電話番号入力 (モバイルで電話番号キーパッドを起動) |
search |
クリアボタン付き検索クエリ入力 |
数値および定量型
| 型 | 説明 |
|---|---|
number |
増減ステップ付き数値入力 (min, max, step) |
range |
おおよその値を選択するためのスライダー |
日付および日時型
| 型 | 説明 |
|---|---|
date |
カレンダー日付ピッカー (年・月・日) |
time |
時刻ピッカー (時・分) |
datetime-local |
タイムゾーンを含まないローカル日時 |
month |
年と月の選択 |
week |
年と ISO 週番号の選択 |
選択およびアクション型
| 型 | 説明 |
|---|---|
checkbox |
ブール値トグルまたは複数選択チェックボックス |
radio |
同一グループ内で排他的に単一選択するラジオボタン |
color |
カラーピッカーパレット |
file |
ファイル添付アップロード (accept, multiple) |
hidden |
画面に表示されずフォームと一緒に送信される隠しフィールド |
submit |
フォームの送信ボタン |
reset |
フォームを初期値に戻すリセットボタン |
button |
既定の動作を持たない汎用プッシュボタン |
主要なバリデーション属性
| 属性 | 動作と効果 |
|---|---|
required |
必須項目とし、空欄の場合にフォーム送信をブロック |
pattern="[A-Za-z0-9]+" |
入力値が一致すべき正規表現パターン |
min="1" max="100" |
数値または日付の最小値および最大値 |
step="0.5" |
数値入力の有効な増減ステップ間隔 |
minlength="5" maxlength="20" |
入力可能な最小・最大文字数 |
placeholder="..." |
入力時に消える薄いヒントテキスト |
readonly |
編集不可にするが値はフォーム送信に含める |
disabled |
フィールドを無効化し送信対象から除外 |
autofocus |
ページ読み込み時に自動でフォーカスを付与 |
フォームの総合実装例
<form action="/api/submit" method="POST">
<label for="user-email">メールアドレス:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">パスワード (8文字以上):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">年齢:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
利用規約に同意する
</label>
<input type="submit" value="登録する" />
</form>