なぜ属性が必要なの？
フォームはユーザーから情報を集め、そのデータをサーバーサイド（PHPなど）に送信するための大事な仕組みです。
そのときに必要になるのが type / name / value といった「属性」です。
属性を適切に設定することで、
- 入力の種類を指定できる
- サーバーに送信される値をコントロールできる
- 入力ミスを防ぐことができる
- スマホで最適なキーボードが表示される
- オートコンプリート（自動入力）などの UX を改善
といった、多くのメリットがあります。
このページでは、実務でよく使う input の属性 をまとめて学んでいきます。
基本で必須になる属性
type属性（入力欄の種類）
入力欄の種類を決める属性。
例：text, email, number, checkbox, password など
<input type="email"> <input type="number">
type属性の種類一覧
| type | 説明 | スマホでの入力体験 |
|---|---|---|
| text | 一般的な文字入力 | 標準キーボード |
| メール入力 | @ が出やすいキーボード | |
| tel | 電話番号入力 | 数字キーボード |
| number | 数値 | スピナー付き |
| password | パスワード | 伏せ字表示 |
| checkbox | チェックボタン | ― |
| radio | ラジオボタン | ― |
| date | 日付入力 | カレンダー表示 |
| file | ファイル選択 | 写真選択も可能 |
name属性（サーバーで受け取る名前）
サーバーに送信される時の「変数名」。これがないと PHP では値を受け取れません。
<input type="text" name="username">
サーバー側 (PHP の $_POST['username']) で値を受け取るために必須。
value属性（初期値）
初期値や、サーバーに送信される値を指定。ボタンのラベルや初期表示に使うことが多い。
<input type="text" value="初期値">
ぜひ覚えておきたいフォーム向け属性
placeholder（入力例の表示）
入力欄の中に薄い文字でヒントを表示。UX向上のため必ず設定したい。
<input type="text" placeholder="例：山田太郎">
required（必須入力）
ブラウザの標準機能で「未入力のまま送信できない」ようにする。未入力のまま送信できなくなる。
<input type="text" name="username" required>
autocomplete（入力補完）
入力補完の ON/OFF や、入力内容の種類を指定。ユーザーの入力負担を大幅に減らせる重要属性。
<input type="email" autocomplete="email"> <input type="tel" autocomplete="tel"> <input type="name" autocomplete="name"> <input autocomplete="given-name"> <!-- 名 --> <input autocomplete="family-name"> <!-- 姓 --> <input autocomplete="street-address"> <input autocomplete="postal-code">
ユーザーの入力負担を大きく減らすので、現場ではよく使われます。
maxlength（最大文字数）
文字数を制限するときに使う。
<input type="text" maxlength="20">
min / max（最小値・最大値）
type="number" で特に使用。
<input type="number" min="1" max="10">
pattern（正規表現パターン）
特定のルールに合わないと送信できない。電話番号や郵便番号でよく使います。
<input type="text" pattern="\d{3}-\d{4}" placeholder="123-4567">
readonly（読み取り専用）
値は送信されるが、ユーザーが編集できない。
<input type="text" value="自動生成" readonly>
disabled（無効化：送信されない）
クリックしても編集不可、サーバーにも送信されない。
<input type="text" value="送信されません" disabled>
step（数値の刻み）
金額や数量入力で便利。
<input type="number" step="0.1">
■ 実務で強い “あまり知られていない便利属性”
inputmode（スマホのキーボード指定）
スマホからの入力性が大きく上がります。数字入力フォームに特に便利
<input type="text" inputmode="numeric" placeholder="数字キーボードを表示">
enterkeyhint（Enterキーの表示変更)
モバイルの UX 改善に超有効。“次へ”“送信”“検索”など UX 向上に効果的。
<input enterkeyhint="next">
capture（スマホでカメラ入力を指定）
スマホの file入力を「カメラ起動」にできる便利属性。最近の問診票アプリや書類アップロードでよく使われる。
<input type="file" accept="image/*" capture="camera">
spellcheck（スペルチェックのON/OFF）
掲示板・ブログやコメント欄に便利。
<input type="text" spellcheck="false">
datalist（サジェスト機能）
HTMLだけで簡易オートサジェストが作れる隠れ便利機能。
<input list="fruits"> <datalist id="fruits"> <option value="Apple"> <option value="Orange"> <option value="Banana"> </datalist>
