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」（毎日コミュニケーションズ刊）がある。趣味はカメラとネットゲームと椅子。
