inputタグ -データを入力するためのフォーム要素を作成する｜HTML辞典
<input>タグとは？
<input> タグは、ユーザーがデータを入力するためのフォーム要素を作成するタグ です。type 属性を変更することで、テキスト入力、パスワード入力、チェックボックス、ラジオボタン、ファイル選択など、さまざまな入力フィールドを作成できます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、インタラクティブコンテンツ（Interactive Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<input> は単独タグ（空要素）のため、閉じタグ（</input>）は不要です。
基本的な記述方法
<input type="text" name="username" placeholder="ユーザー名を入力">使用できる主な属性
<input> タグには多くの属性がありますが、以下は代表的なものです。
| 属性名 | 説明 | 例 |
|---|---|---|
type | 入力フィールドの種類を指定 | <input type="email"> |
name | フィールドの名前を指定 | <input name="user_email"> |
value | デフォルトの値を設定 | <input value="初期値"> |
placeholder | 入力のヒントを表示 | <input placeholder="名前を入力"> |
required | 必須入力を指定 | <input required> |
readonly | 読み取り専用にする | <input readonly> |
disabled | 無効化する | <input disabled> |
maxlength | 最大文字数を設定 | <input maxlength="50"> |
pattern | 正規表現で入力を制限 | <input pattern="[0-9]{3}-[0-9]{4}"> |
autocomplete | 入力補完の有効・無効を設定 | <input autocomplete="off"> |
主な type の種類と使用例
type の値 | 説明 | 使用例 |
|---|---|---|
text | 一般的なテキスト入力 | <input type="text"> |
password | パスワード入力（入力内容が隠れる） | <input type="password"> |
email | メールアドレス入力（バリデーションあり） | <input type="email"> |
tel | 電話番号入力 | <input type="tel"> |
number | 数値入力 | <input type="number"> |
date | 日付入力 | <input type="date"> |
time | 時間入力 | <input type="time"> |
checkbox | チェックボックス | <input type="checkbox"> |
radio | ラジオボタン | <input type="radio"> |
file | ファイル選択 | <input type="file"> |
submit | 送信ボタン | <input type="submit"> |
reset | フォームをリセット | <input type="reset"> |
hidden | 非表示のデータ送信用 | <input type="hidden"> |
CSSを使ったデザイン変更
入力フィールドのデザインを調整する場合は、CSSを活用できます。
input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}適切な使用例
✅ テキスト入力フィールドの作成
<input type="text" name="username" placeholder="ユーザー名">✅ メールアドレスの入力フィールド
<input type="email" name="email" placeholder="メールアドレス">✅ チェックボックスの作成
<label>
<input type="checkbox" name="agree"> 利用規約に同意する
</label>✅ ラジオボタンの作成
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>✅ required を使って必須入力にする
<input type="text" name="name" required>✅ 数値入力に min と max を設定
<input type="number" name="age" min="18" max="99">✅ pattern を使って入力ルールを設定
<input type="text" name="zipcode" pattern="[0-9]{3}-[0-9]{4}" placeholder="000-0000">適切でない使用例（誤った使い方）
❌ type を指定しないとデフォルトで text になる
<!-- NG: type属性なし -->
<input name="username">✅ 正しい書き方（type を指定）
<input type="text" name="username">❌ name を指定しないとサーバーにデータが送信されない
<!-- NG: name属性なし -->
<input type="text" placeholder="名前を入力">✅ 正しい書き方（name を指定）
<input type="text" name="username" placeholder="名前を入力"><input>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<input> | ユーザー入力を受け付ける | type により様々な入力が可能 | テキスト、パスワード、チェックボックスなど |
<textarea> | 複数行のテキスト入力 | <input> と異なり改行可能 | コメント入力欄 |
<select> | 選択リストを作成 | <option> と組み合わせて使用 | プルダウンメニュー |
<button> | ボタンを作成 | type="submit" でフォーム送信可能 | クリック可能なボタン |
使用上の注意点
✅ type を適切に設定する
text,email,password,checkboxなど、用途に応じたtypeを指定する。
✅ name を必ず指定する
nameを指定しないと、フォーム送信時にデータがサーバーに送信されない。
✅ required を活用して必須入力を設定する
requiredを使うと、未入力のままフォーム送信できなくなる。
関連タグ
<form>– 入力データを送信するフォーム<textarea>– 複数行のテキスト入力<select>– 選択リスト<button>– ボタンの作成
まとめ
<input>タグは、HTML文書内で ユーザーがデータを入力するためのフォーム要素を作成するタグ です。type を適切に指定し、name を設定することで、フォームから正しくデータを送信できます。
