HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<input>
フォーム入力要素。様々な形式のユーザー入力を受け付けるためのHTML要素です。
info
概要
<input> 要素は、Webフォーム内でユーザーからのデータ入力を受け付けるために使用されます。
この要素は空要素（内容を持たない）であり、**`type` 属性を指定することで、テキストボックス、チェックボックス、ラジオボタン、ボタン、ファイル選択など、様々な入力形式に変化**します。
Webアプリケーションのインタラクションにおいて非常に重要な要素です。
play_circle
デモ (静的表示)
HTML (Source)
<!-- テキスト入力 -->
<input type="text" placeholder="お名前">
<br><br>
<!-- チェックボックス -->
<input type="checkbox" id="agree">
<label for="agree">同意する</label>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| type | 入力の種類を指定します。**最も重要な属性**で、未指定の場合は text となります。例: text, password, checkbox, radio, submit, date など多数
|
| name | フォーム送信時に、この入力値を識別するための名前（キー）を指定します。 |
| value | 入力フィールドの初期値、または送信される値を指定します。 |
| placeholder | 入力欄が空のときに表示される、入力のヒントとなる短いテキスト。 |
| required | このフィールドがフォーム送信前に必須であることを示します。（ブール値属性） |
| maxlength / minlength | 入力可能な文字数の最大値/最小値を指定します。 |
| disabled | 要素を無効化し、ユーザーの操作やフォーム送信から除外します。（ブール値属性） |
code
実用例
1. 基本的なテキスト入力と送信ボタン
<form action="/submit" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required>
<input type="submit" value="登録">
</form>
2. ラジオボタンとチェックボックス
<!-- ラジオボタン (name属性が同じグループ内で一つだけ選択可能) -->
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<!-- チェックボックス (複数選択可能) -->
<input type="checkbox" name="hobby" value="reading"> 読書
3. 日付とメールアドレスの入力
<!-- 日付ピッカー -->
<input type="date" name="birth_date">
<!-- メールアドレス (自動検証機能あり) -->
<input type="email" name="email" placeholder="example@mail.com">
lightbulb
知っておくべき重要事項
note_alt
必須属性: type, name
実用的なフォーム入力要素として機能させるためには、**`type` 属性**で入力形式を定義し、**`name` 属性**でサーバーに送信されるデータ名を指定することが不可欠です。
実用的なフォーム入力要素として機能させるためには、**`type` 属性**で入力形式を定義し、**`name` 属性**でサーバーに送信されるデータ名を指定することが不可欠です。
accessibility_new
アクセシビリティ (`<label>` との関連)
`<input>` 要素には、必ず対応する `<label>` 要素を関連付けましょう。これは、スクリーンリーダーの利用者に何の入力欄であるかを伝えるため、また、チェックボックスやラジオボタンのクリック領域を広げるためにも重要です。**`<label for="id"` と `<input id="id"` を一致**させます。
`<input>` 要素には、必ず対応する `<label>` 要素を関連付けましょう。これは、スクリーンリーダーの利用者に何の入力欄であるかを伝えるため、また、チェックボックスやラジオボタンのクリック領域を広げるためにも重要です。**`<label for="id"` と `<input id="id"` を一致**させます。