HTMLのフォームを作るうえで欠かせないのが「inputタグ」です。
その中でも重要なのが「type属性」で、入力欄の種類や機能を決定します。
この記事では、inputタグのtype属性を初心者向けにわかりやすく解説し、実際に使うことが多い種類を中心にまとめています。
inputタグとは？
inputタグは、ユーザーがデータを入力するためのフォーム部品です。
<input type="text">
このように、type属性を指定することで入力形式を変更できます。
input type属性の一覧
よく使われるtype属性を一覧で紹介します。
| type | 内容 |
|---|---|
| text | テキスト入力 |
| メールアドレス | |
| password | パスワード |
| number | 数値入力 |
| date | 日付入力 |
| tel | 電話番号 |
| url | URL |
| search | 検索ボックス |
| checkbox | チェックボックス |
| radio | ラジオボタン |
| file | ファイル選択 |
| submit | 送信ボタン |
| reset | リセット |
| button | 汎用ボタン |
text（テキスト入力）
最も基本的な入力欄です。
<input type="text" placeholder="名前を入力">
主な用途：
- 名前
- 住所
- 自由入力
email（メールアドレス）
メール形式の入力専用です。
<input type="email" placeholder="example@email.com">
特徴：
- メール形式でないとエラーになる
- スマホで「@」付きキーボードが表示される
password（パスワード）
入力内容が隠れる入力欄です。
<input type="password">
特徴：
- ●●●表示になる
- セキュリティ用途
number（数値入力）
数字のみ入力可能なフィールドです。
<input type="number" min="0" max="100">
特徴：
- 数値以外は入力不可
- min / maxで範囲指定可能
date（日付入力）
日付選択用の入力欄です。
<input type="date">
特徴：
- カレンダーUIが表示される
- ユーザーの入力負担が減る
tel（電話番号）
電話番号入力専用です。
<input type="tel">
特徴：
- スマホで数字キーボード表示
- バリデーションは緩め
url（URL入力）
URL専用の入力欄です。
<input type="url">
特徴：
- URL形式でないとエラー
- https:// の入力補助
search（検索ボックス）
検索用途の入力欄です。
<input type="search">
特徴：
- 見た目が検索用になる
- ブラウザによってクリアボタン表示
checkbox（チェックボックス）
複数選択が可能な入力です。
<input type="checkbox"> 利用規約に同意
特徴：
- 複数選択OK
- ON / OFFの状態管理
radio（ラジオボタン）
1つだけ選択する入力です。
<input type="radio" name="gender"> 男性
<input type="radio" name="gender"> 女性
特徴：
- 同じnameでグループ化
- 1つだけ選択可能
file（ファイル選択）
ファイルをアップロードするための入力です。
<input type="file">
特徴：
- 画像・PDFなど選択可能
- accept属性で制限可能
submit（送信ボタン）
フォームを送信するボタンです。
<input type="submit" value="送信">
reset（リセットボタン）
入力内容を初期化します。
<input type="reset" value="リセット">
button（汎用ボタン）
JavaScriptと組み合わせて使います。
<input type="button" value="クリック">
よく使うinputの組み合わせ例
<form>
<input type="text" placeholder="名前">
<input type="email" placeholder="メールアドレス">
<input type="password" placeholder="パスワード">
<input type="submit" value="送信">
</form>
まとめ
inputタグのtype属性を使い分けることで、ユーザーにとって使いやすいフォームを作ることができます。
重要ポイント：
- typeで入力形式が決まる
- emailやnumberは自動チェックあり
- スマホ表示にも影響する
まずは「text・email・password・number・date」をしっかり理解しておけば問題ありません。
おすすめ記事
⇒ HTML講座TOPはこちら
⇒ CSS講座TOPはこちら
この記事が役に立ったら、いいね！お願いします！
