input要素の使い方

HTMLのinput要素は、ユーザーが文字・日付・数値などを入力したり、選択肢を選んだりするためのフォーム部品です。

先に結論

最小の例

<label for="user-name">名前</label>
<input id="user-name" name="name" type="text">

labelのforと、入力欄のidを同じ値にすると、ラベルと入力欄が関連付けられます。nameは、フォームを送信するときにデータの名前として使われます。

この例の送信ボタンを押すと、このページにGETで送信され、入力した名前がURLのクエリに入ります。実際のフォームでは、送信先やサーバー側の処理も用意します。

type属性で役割を選ぶ

type	用途	例
text	一般的な1行の文字	名前、検索語
email	メールアドレス	連絡先
password	画面上で文字を隠す入力	パスワード
checkbox	複数選択できる項目	利用規約への同意
radio	どれか1つを選ぶ項目	支払い方法
number	数値	数量
date	日付	予約日
file	ファイルの選択	画像のアップロード

typeを省略した場合や、ブラウザーが知らない値を指定した場合は、基本的に通常の文字入力として扱われます。意図を伝えるため、目的に合ったtypeを明示しましょう。

チェックボックスとラジオボタン

チェックボックスは項目ごとに独立して選択できます。ラジオボタンで選択肢を1つに絞るときは、同じグループのinputに同じnameを指定します。

<fieldset>
  <legend>連絡方法</legend>
  <label><input type="radio" name="contact" value="email"> メール</label>
  <label><input type="radio" name="contact" value="phone"> 電話</label>
</fieldset>

ラベルの文字までクリックできるようにするため、選択肢をlabelで包む書き方も使えます。

入力の条件を指定する

required、min、max、minlength、maxlength、patternなどで、ブラウザーが入力を確認する条件を指定できます。

<label for="age">年齢</label>
<input id="age" name="age" type="number" min="0" max="130" required>

これはユーザーの入力を助けるクライアント側の確認です。重要なデータを受け取る場合は、サーバー側でも同じ条件を確認します。

よくある間違い

• <input>...</input>のように終了タグを書く。inputは内容を持たない要素なので、終了タグはありません。
• placeholderだけで入力内容を説明する。入力を始めると消えるため、固定のlabelを用意します。
• パスワード入力をtype="text"にする。画面上で隠したい場合はpasswordを使います。
• 郵便番号や会員番号のような「計算しない数字」にnumberを使う。先頭の0を含む識別子は、文字列として扱うほうが自然です。
• ブラウザーの入力チェックだけを安全対策にする。送信後のサーバー側検証も必要です。

もう少し詳しく

inputは1つの要素ですが、typeごとに入力できる値、表示されるコントロール、使える属性、検証の仕組みが変わります。フォームの目的に合う型を選ぶと、入力ミスを減らし、キーボードや支援技術も使いやすくできます。

Atlasで確認する

各typeがどの状態を選び、どの属性やDOM APIに影響するかまで確認したい場合は、Yugien Atlasのinput要素を参照してください。入力欄との関連付けやaccessible nameまで確認したい場合は、Atlasのlabel要素も参照できます。