このページの本文へ

HTML5でこんなに変わったinput要素を徹底解説 (5/5)

2012年06月06日 11時00分更新

文●浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷

max,min


<input type="datetime" name="datetime" min="2012-04-25T00:00Z" max="2012-05-24T00:00Z" />
<input type="number" name="num" min="5" max="100" />

 max属性とmin属性は、フォームパーツに入力可能な最大値と最小値を指定します。値は、フォームパーツのタイプに合わせた形式で記述します。

 min属性は、次に紹介するstep属性と組み合わせることで、ステップベースを指定できます。

step


<input type="number" name="num" value="" step="5" />
<input type="time" name="time" value="" step="60" />

 step属性は、指定された値を「ステップ」(単位・刻み)として、フォームパーツへの入力を許可します。たとえば、タイプがnumberのinput要素に対してstep属性の値を5とすると、入力可能な値は0,5,10,15,20...のように、0からスタートして5刻みとなります。

 step属性はmin属性を組み合わせることで、入力可能な最小値である「ステップベース」を指定できます。


<input type="number" name="num" value="" min="5" step="5" />

 min属性の値を5にすると、ステップベースは5になります。そのため、入力可能な値は5,10,15,20...となり、0は含まなくなります。min属性を指定しない場合は、ステップベースにはそれぞれのデフォルト値が適用されます。

 ステップに入力可能な数を越えた値を送信しようとすると、対応しているブラウザーではエラーが表示されます。

placeholder


<input type="search" name="q" placeholder="検索ワード" />

 placeholder属性は、ユーザーの助けになるような短いヒントを指定します。短いヒントとは、単語・フレーズのサンプルや、予想される形式の簡単な説明のことです。仕様書には、長いヒントを指定したい場合にはtitle属性が適切であると書かれています。

 これまではJavaScriptを使って実装するケースが見られましたが、placeholder属性に対応しているブラウザーでは、placeholder属性の値がフォームパーツのデフォルトテキストとして表示され、テキスト入力を開始するとデフォルトテキストは消えます。

autofocus


<input type="search" name="q" autofocus="autofocus" />

 autofocus属性をフォームパーツに指定すると、ページが表示された瞬間にその要素にフォーカスします。autofocus属性は同一ページ内のフォームパーツに1つだけ指定できます。

ポイント

オートフォーカスの仕組みは、現在でも検索サイトなどで見かけますが、必ずしも便利とは言えない面があります。たとえば、普段、スペースキーでページスクロール操作をしているユーザーの場合など、ユーザーが期待した結果にならないことがあります。

form


<form action="./" method="post" id="exampleForm">
... 省略...
</form>
<input type="submit" form="exampleForm" />

 フォームパーツにform属性を指定し、その値をform要素のid属性値と同じにすると、両者を関連付けることができます。これにより、対応しているブラウザーでは、form要素の外にフォームパーツを記述しても、正常に動作させることができます。

 次回はinput要素以外の新しいフォーム関連要素について紹介します。


著者:浜 俊太朗 (はま・しゅんたろう)

著者写真

NHN Japanで働くマークアップエンジニア/ディレクター。
ブログ「hamashun.me」はコーディングに限定せずさまざまな話題を扱っている。主な著書に「一週間でマスターするXHTML & CSS for Windows」(毎日コミュニケーションズ刊)がある。趣味はカメラとネットゲームと椅子。

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く