HTML5 input属性
HTMLマニュアルHTML5は、フォームにおいてより詳細な制御とバリデーションを提供するために、いくつかの新しいinput属性を導入しています。以下は、HTML5で利用可能な主要なinput属性の一部です。
placeholder
ユーザーが入力を開始する前に入力フィールドに表示されるヒントテキストを指定します。テキストは、ユーザーがフィールドに入力を開始すると消えます。
<input type="text" name="username" placeholder="ユーザー名">
required
入力フィールドが必須であることを指定します。フォームが送信される前に、このフィールドに入力が必要です。
<input type="text" name="email" required>pattern
入力フィールドに入力されるテキストの形式を正規表現で指定します。ブラウザは、このパターンに一致する入力のみを受け付けます。
<input type="text" name="zipcode" pattern="\d{5}-\d{4}|\d{5}" title="5桁または9桁の郵便番号">autofocus
ページが読み込まれたときに入力フィールドに自動的にフォーカスを設定します。
<input type="text" name="username" autofocus>minとmax
numberおよびrangeタイプの入力フィールドにおいて、受け付ける値の最小値および最大値を指定します。
<input type="number" name="age" min="18" max="120">step
numberおよびrangeタイプの入力フィールドにおいて、値の増分を指定します。
この例は1，3，5，7、9しか入力できません。
<input type="number" id="quantity" name="quantity" min="1" max="10" step="2">multiple
emailおよびfileタイプの入力フィールドにおいて、複数の値を受け付けることを指定します。
<input type="email" name="emailAddresses" multiple>readonly
入力フィールドを読み取り専用にします。これにより、ユーザーはフィールドの値を編集できなくなります。
<input type="text" name="readonlyField" readonly>disabled
入力フィールドを無効にします。無効なフィールドは、フォーム送信時に送信されません。
<input type="text" name="disabledField" disabled>size
textおよびpasswordタイプの入力フィールドの表示幅を文字単位で指定します。
<input type="text" name="username" size="30">maxlength
textおよびpasswordタイプの入力フィールドで入力できる最大文字数を指定します。
<input type="text" name="username" maxlength="20">
コメント