【HTML5】追加された属性

      2016/08/15

HTML5で追加された属性についてメモしました。

HTML5で追加された属性

input要素に新しいType属性が追加された

属性 説明
<inputtype="number"> 数値
<inputtype="search"> 検索
<inputtype="email"> メールアドレス
<inputtype="url"> URL
<inputtype="tel"> 電話番号
<inputtype="date"> 日付
<inputtype="datetime"> UTCによる日時
<inputtype="datetime-local"> UTCによらないローカル日時
<inputtype="month">
<inputtype="week">
<inputtype="time"> 時間
<inputtype="range"> レンジ
<inputtype="color">

input要素で指定できる他属性を含め、こちらのページに詳細を記載しています。

pattern属性によるバリデーションチェックが可能に

バリデーションとは、フォームの入力内容をチェックする事。
pattern属性に正規表現で入力可能な文字を設定しておくことにより、入力内容が条件に合っていないかチェックすることができる。

使用例:4文字の半角英字に入力を規制する
			<div>半角英字4文字を入力してください:<input type="text" pattern="[A-Za-z]{4}"></div>
			
実行結果:
半角英字4文字を入力してください:

Google Chrome(ver51)、FireFox(Ver47)、IE(Ver11) でそれぞれ試してみたが、FireFox以外はうまく動いていないように見える。

input_pattern_chrome

input_pattern_firefox

input_pattern_ie

require属性による入力必須項目のチェックが可能に

入力必須項目を指定する事ができる。
require属性を指定しておけば、項目が未入力であれば送信させないようにといったチェックも出来る。

contenteditable属性でコンテンツに編集許可を与えられる

contenteditable属性を指定すれば、要素内のテキストをブラウザ上で編集することができるようになる。

その他、追加された属性

role属性

アクセシビリティのための属性。
Webの構造やウィジェットの種類を記述する。
例えばナビゲーションなら、role="menu"
見出しなら、role="heading" など。

nav要素などと役割がかぶるので、セマンティックなマークアップができているのであればrole属性はなくても問題ない。

defer属性 と async属性

JavaScriptを読み込むタイミングを制御する。
外部スクリプトを読み込む際に使用が可能。

defer属性は、HTML文書の読み込みが完了した時点で、スクリプトが実行される。

async属性は、HTML文書の読み込み中、スクリプトが利用可能になった時点で実行される。

defer属性とasync属性 どちらも指定していなければ、スクリプトが読み込まれた時点で実行される。

 - HTML , , , , , , , ,