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

2015年09月07日(Mon)

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

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

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

inputタグのtyep属性

名称typedemo
メールemail
URLurl
検索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