| 目次 |
|---|
|
・input要素の新属性 ・placeholder属性 ・autofocus属性 ・autocomplete属性 ・multiple属性 ・required属性 ・pattern属性 ・範囲/間隔を指定する属性 ・input要素以外の入力要素 |
HTML5では、「type属性の拡張」以外にも新しい属性を追加することで多くの機能拡張を行っています。
新属性は、各入力タイプのinput要素に共通して使えます。
新属性を大まかに分類すると以下の通りです。
未入力状態の入力フィールドに表示されるヒント情報等を与えます。
「入力はこちら」や「日付入力」など。
この属性で設定された値は送信されません。
リスト1. placeholder属性の記述例
<input type="text" placeholder="入力はここ" />
WEBページが表示されたとき、自動的に該当要素にフォーカスが当たります。
HTML5以前では、スクリプトを使って指定しましたが、HTML5からはこの属性で対応します。
リスト2. autofocus属性の記述例
<input type="text" autofocus /> ←最初はここにフォーカス
オートコンプリートのオン（on）/オフ（off）、つまり、入力欄の自動補完を有効にするかどうかを指定する際に使用します。
初期値はautocomplete="on"です。 オートコンプリートを無効にする場合にはautocomplete="off"を指定します。
このブラウザの機能は、テキスト入力の手間を省いてくれる便利な機能です。
しかし、以前入力した値が誰にでも見られてしまうため、セキュリティ面でのリスクもあります。
HTML5からは、autocomplete属性を用いて簡単に制御することが出来ます。
複数の値を一度に入力、あるいは、選択して送信することができます。
送信される値はカンマ区切りとなります。
リスト3. multiple属性の記述例
複数ファイル: <input type="file" name="files[]" id="files" multiple />
入力値のバリデーション(妥当性チェック)のひとつです。
入力フィールドが入力必須であることをブラウザに伝えることが出来ます。
リスト4. required属性の記述例
<input name="samp_required" placeholder="必須!!" required /> <input type="submit" />
入力値のバリデーション(妥当性チェック)のひとつです。
入力値のパターンを正規表現で指定することが出来ます。
リスト5. pattern属性の記述例
<input name="samp_pattern" placeholder="郵便番号(ハイフンあり)" required
pattern="\d{3}-\d{4}"
size=30 /><br/>
<b>※郵便番号を「000-0000」の形で入力してください。
それ以外は受け付けません。</b><br/>
<input type="submit" />
入力値のバリデーション(妥当性チェック)のひとつです。
入力値の範囲/間隔を指定します。
min属性は、下限値を指定します。
max属性は、上限値を指定します。
step属性は、間隔を指定します。
これらの属性は、入力タイプが数値(nuber)、範囲(range)、日時(datetime,date,time,month,week,datetime-local)のみ対応します。
リスト6. 範囲/間隔を指定する属性の記述例
点数は <input type="number" min=5 max=100 step=5 /> 点
input要素以外の下記の入力要素に対しても追加された属性があります。