<input>
タグには多くの属性を使用できます。
主な<input>
タグの属性
placeholder
:
- ユーザーが入力を始める前にフィールドに表示されるテキストを指定する。
- 例:
<input type="text" placeholder="ここに入力してね^^">
required
:
- フォームが送信される前に入力フィールドが必ず入力されていることを要求します。
- 例:
<input type="text" required>
disabled
:
- 入力フィールドを無効化します。ユーザーはこのフィールドに入力できません。
- 例:
<input type="text" disabled>
readonly
:
- 入力フィールドを読み取り専用にします。ユーザーはこのフィールドの値を編集できませんが、コピーは可能です。
- 例:
<input type="text" readonly>
maxlength
:
- 入力できる文字の最大数を指定します。
- 例:
<input type="text" maxlength="10">
size
:
- 入力フィールドの表示幅を文字単位で指定します(CSSの
width
とは異なります)。 - 例:
<input type="text" size="50">
min
と max
:
type="number"
やtype="date"
などで使用可能。入力値の最小値と最大値を指定します。- 例:
<input type="number" min="1" max="5">
step
:
type="number"
やtype="date"
で、入力値の増分を指定します。- 例:
<input type="number" step="2">
pattern
:
- 入力値が一致する必要がある正規表現パターンを指定します。この属性は、カスタムの検証が必要な場合に便利です。
- 例:
<input type="text" pattern="[A-Za-z]{3}">
autocomplete
:
- ブラウザが自動補完機能を使用するかどうかを指定します。
- 例:
<input type="text" autocomplete="off">