HTML5の新しいinputタイプと便利な属性

2011.08.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

HTML5 Formsとは

HTML5では従来のinputタイプに加え、新たなinputタイプの追加やrequired、placeholder、autocomplete、validateなどが可能になりました。

現在HTML5 Formsの実装はブラウザによって異なります。

サンプル

Type属性

  • 電話番号:
  • 検索:
  • URL:
  • メールアドレス:
  • 日時
  • 日付
  • 日時(ローカル)
  • スライダー
  • カラー:

<form method="post" action="#">
	<ul>
 		<li>電話番号:<input type="tel" name="tel" id="tel" required /></li>
 		<li>検索:<input type="search" name="search" id="search" required /></li>
 		<li>URL:<input type="url" name="url" id="url" required /></li>
 		<li>メールアドレス:<input type="email" name="email" id="email" required /></li>
 		<li>日時<input type="datetime" name="datetime" id="datetime" required /></li>
 		<li>日付<input type="date" name="date" id="date" required /></li>
 		<li>週<input type="week" name="week" id="month" required /></li>
 		<li>日時(ローカル)<input type="datetime-local" name="datetime-local" id="time" required /></li>
 		<li>スライダー<input type="range" name="number" id="number" /></li>
 		<li>カラー:<input type="color" name="color" id="color" /></li>
 	</ul>
 	<p><input type="submit" value="送信" /></p>
</form>

ページを開いたときにinput要素にフォーカスさせる「autofocus」

<form method="post" action="#">
	<p><input type="text" value="" autofocus /></p>
 	<p><input type="submit" value="送信" /></p>
</form>

必須入力可能にする「required」

<form method="post" action="#">
	<p><input type="text" value="" required /></p>
 	<p><input type="submit" value="送信" /></p>
</form>

入力をサポートするためのラベルを表示する「placeholder」

<form method="post" action="#">
	<p><input type="text" value="" placeholder="キーワード..." required /></p>
 	<p><input type="submit" value="送信" /></p>
</form>

任意のパターンで入力値のチェックが可能になる「pattern」

IPアドレスを入力してください。

<form method="post" action="#">
	<p>IPアドレスを入力してください。<br />
	<input type="text" value="" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" placeholder="000.000.000.000" required /></p>
 	<p><input type="submit" value="送信" /></p>
</form>

入力補完が可能になる「autocomplete」

<form method="post" action="#">
	<p>
	<input type="text" value="" autocomplete="on" list="autocompleteList" required />
	<datalist id="autocompleteList">
		<option value="apple">
		<option value="bug">
		<option value="cream">
		<option value="dream">
		<option value="egg">
		<option value="fly">
		<option value="good">
		<option value="happy">
	</datalist>
	</p>
 	<p><input type="submit" value="送信" /></p>
</form>

ブラウザによって対応状況が異なりますがしっかり利用できるようになれば便利ですね。少し古いですが対応状況はこちら。

この記事は「Forms」の転載です。