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

2015年09月07日（Mon）

HTML5

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="テキスト１">
<option value="テキスト２">
<option value="テキスト３">
</datalist>

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

pattern

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

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

min & max

<input type="number" name="demo" min="1" max="4" />

ステップ値
step属性を指定すると、数値型や日付型の入力欄で刻むステップ値を指定することができます。

step

<input type="number" name="demo" step="0.5" />

ファイル形式
accept属性でファイル形式を指定することができます。

accept

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

【参考Webサイト】

コメント（0件）

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

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