• このエントリーをはてなブックマークに追加

2015年09月07日(Mon)

HTML5で新しく加わった入力フォームで使用するinputのtype属性や補助属性のまとめ

HTML5で新しく加わった入力フォームで使用するinputのtype属性や補助属性のまとめ

HTML5では、フォームに関する新しい属性や指定できる属性値が多数追加されたようです。 今まで入力必須などの入力補助的なことは、JavaScriptやphpで対応していたのですがhtml5で導入されたinputのtype属性や入力補助する属性などがありとっても便利なのでまとめておこうとメモりました。

inputタグのtyep属性

名称 type demo
メール email
URL url
検索 search
電話 telephone
数値 number
日付 date
日時 datetime
ローカル日時 datetime-local
西暦と月 month
西暦と週 week
時間 time
レンジ range
color

入力ルールを指定する属性

入力必須
required属性を指定すると入力項目が入力必須であることをブラウザに知らせることができます。
詳細は分かりませんが、現状ではaria-required=’true’も付け加えた方が良いとの事です。

required

<input type="text" name="demo" required aria-required='true' />

オートフォーカス
autofocus属性を指定すると、ウェブページが表示された際に、指定した入力欄にカーソルが当たって自動的にフォーカスされます。

autofocus

<input type="text" name="demo" autofocus />

プレースホルダー
placeholder属性で指定した値が、入力欄に初期値として表示されます。

placeholder

<input type="text" name="demo" placeholder="検索ワードの入力" />

オートコンプリート
autocomplete属性を指定すると、ユーザーに対して入力候補を提示して、内容を自動補完することができます。

autocomplete

<input type="text" name="demo" autocomplete="on" list="text" />
<datalist id="text">
<option value="テキスト1">
<option value="テキスト2">
<option value="テキスト3">
</datalist>

正規表現による入力制限
pattern属性を指定すると、正規表現を使って入力値のパターンを指定することができます。

(例:半角英数)

pattern

<input type="text" name="demo" pattern="^[0-9A-Za-z]+$" />

最小値と最大値
min属性とmax属性を指定すると、数値型や日付型の入力欄で入力できる値の最小値と最大値を指定することができます。

(例:1以上4以下)

min & max

<input type="number" name="demo" min="1" max="4" />
ステップ値
step属性を指定すると、数値型や日付型の入力欄で刻むステップ値を指定することができます。

(例:0.5)

step

<input type="number" name="demo" step="0.5" />
ファイル形式
accept属性でファイル形式を指定することができます。

(例:JPEG形式)

accept

<input type="file" name="demo" accept=".jpg" />

【参考Webサイト】

コメント(0件)

HTML5で新しく加わった入力フォームで使用するinputのtype属性や補助属性のまとめに対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

コメントフォーム

【ソーシャルボタン】


TOP