目次
- はじめに：inputタグ、正直「text」しか使っていませんでした
- 結論：inputは「type選択」が8割
- inputタグとは？
- 実務でよく使うinput type一覧
- type="text"
- 用途
- type="email"
- 特徴
- よくあるミス
- type="password"
- 注意
- type="tel"
- 実務ポイント
- type="number"
- 特徴
- 実務での注意
- type="checkbox"
- requiredとの組み合わせ
- type="radio"
- 仕組み
- type="submit"
- type="button"
- type="hidden"
- 用途
- type="file"
- 実務で必須
- type="date"
- 注意点
- 意外と使うtype（中級向け）
- type="search"
- type="url"
- inputタグ共通で重要な属性
- 必須で意識すべき
- inputが動かない原因チェックリスト
- ✔ formで囲まれているか
- ✔ nameがあるか
- ✔ submitボタンがあるか
- ✔ JSでpreventDefaultしていないか
- ✔ disabledになっていないか
- DevToolsでの確認方法
- inputとtextareaの違い
- input
- textarea
- 実務でのtype選び基準
- よくある失敗パターン
- セキュリティ観点の重要ポイント
- まとめ：inputはフォーム品質を決める
はじめに：inputタグ、正直「text」しか使っていませんでした
フォームを作り始めた頃、私はほぼ type="text" しか使っていませんでした。
「とりあえず入力できればいいでしょ」と。
でもそれ、実はかなりもったいないです。
inputタグは type属性によって機能もUXも変わる超重要要素。
- スマホのキーボードが変わる
- 自動バリデーションが入る
- 入力ミスを減らせる
- アクセシビリティが向上する
この記事では、
HTML初心者がまず押さえるべき inputタグの種類と、
実務で本当に使うtypeを中心に完全解説します。
結論：inputは「type選択」が8割
inputタグは、
type属性を正しく選ぶだけでフォーム品質が一気に上がる要素です。
迷ったら、
まず「入力させたいデータの種類」を考えましょう。
inputタグとは？
<input type="text" name="username">inputは 単一行入力用のフォーム要素 です。
typeを変えることで、
- 入力方法
- バリデーション
- 表示UI
- スマホキーボード
が変化します。
実務でよく使うinput type一覧
まずは使用頻度の高いものから。
type="text"
最も基本。
<input type="text" name="name">用途
- 名前
- タイトル
- 任意文字列
迷ったらtext。ただし安易に使いすぎない。
type="email"
<input type="email" name="email">特徴
- メール形式チェック自動
- スマホで「@」付きキーボード表示
- requiredと相性が良い
よくあるミス
type="text"でメール入力させている
→ バリデーション損してます。
type="password"
<input type="password" name="password">入力が伏字になります。
注意
- valueに初期値を入れない
- autocomplete属性を適切に設定
type="tel"
<input type="tel" name="tel">実務ポイント
- 数字専用ではない（文字も入る）
- スマホで数字キーボード表示
電話番号入力では number より tel が無難。
type="number"
<input type="number" name="age">特徴
- 数字のみ入力可
- スピナー（▲▼）が出る
実務での注意
- 電話番号には使わない
- 先頭ゼロが消えることがある
ここ、初心者がよく間違えます。
type="checkbox"
<input type="checkbox" name="agree">複数選択可能。
requiredとの組み合わせ
<input type="checkbox" required>未チェックで送信不可。
type="radio"
<input type="radio" name="gender" value="male">同じnameでグループ化。
仕組み
同名の中で1つだけ選択可能。
type="submit"
<input type="submit" value="送信">フォーム送信用。
最近はbuttonタグを使うことも多いです。
type="button"
<input type="button" value="クリック">単体では何も起きません。
JavaScript前提。
type="hidden"
<input type="hidden" name="token" value="abc123">画面には表示されません。
用途
- CSRFトークン
- ID管理
- 状態保持
DevToolsで確認できます。
type="file"
<input type="file" name="image">実務で必須
<form enctype="multipart/form-data">これ忘れるとアップロード失敗。
type="date"
<input type="date" name="birthday">注意点
- ブラウザ依存UI
- 古いブラウザではtext扱い
意外と使うtype（中級向け）
type="search"
検索入力用。UIが微妙に違う。
type="url"
URL形式チェック付き。
inputタグ共通で重要な属性
<input
type="text"
name="name"
placeholder="お名前"
required>必須で意識すべき
- name（送信キー）
- required（必須）
- placeholder（補助）
- value（初期値）
- id + label連携
inputが動かない原因チェックリスト
✔ formで囲まれているか
✔ nameがあるか
✔ submitボタンがあるか
✔ JSでpreventDefaultしていないか
✔ disabledになっていないか
DevToolsでの確認方法
- 要素を検証
- typeを確認
- name属性を確認
- form構造を確認
トラブルは必ずDOMに出ます。
inputとtextareaの違い
input
1行入力専用
textarea
複数行入力用
長文にinputは使わない。
実務でのtype選び基準
| 入力内容 | 推奨type |
|---|---|
| 名前 | text |
| メール | |
| 電話 | tel |
| 数値 | number |
| 同意 | checkbox |
| 単一選択 | radio |
| ファイル | file |
| 日付 | date |
よくある失敗パターン
- 全部textで作る
- numberで電話番号入力
- nameを忘れる
- hiddenを信用しすぎる
- requiredを万能と思う
実務ではここが事故ポイント。
セキュリティ観点の重要ポイント
inputは「入り口」です。
必ず：
- サーバー側バリデーション実装
- hidden値を信用しない
- CSRF対策実施
HTMLだけでは守れません。
まとめ：inputはフォーム品質を決める
inputタグは、
- 正しいtype選択
- 適切な属性設定
- form構造理解
この3つで完成度が決まります。
まずは今回紹介した主要typeを
実際に手を動かして試してください。
理解は「触る」ことで一気に進みます。
フォーム設計が変わると、
サイト全体の完成度も確実に上がります。