input要素
input要素は以前に紹介しました。
input要素にはいくつかの種類があり、type属性で決めるのでした。しかし以前紹介したのはそのうちほんの一部だけで、HTML4.01時代からあったものだけを基本として前回紹介しました。
HTML5になって、新しいタイプが追加されたので、今回それを紹介します。
入力ボックス系
以前紹介したものの中ではtype="text"とtype="password"が入力ボックス系でした。それぞれただのテキストとパスワードでした。しかし、他に次のようなものがあります。
"search","tel","url","email"があり意味は検索フィールド,電話番号,URL,メールアドレスです。
ユーザーが何かを検索する場合はtype="search"の入力ボックスを使うべきですし、電話番号ならtel,絶対URL（http://～やhttps://～で始まるURL）ならurl、メールアドレスならemailを使うべきです。対応したブラウザなら、変なデータが入力されれば送信する前に注意されることでしょう。
また、emailの場合は論理属性のmultiple属性を指定することができ、これが指定されれば複数のメールアドレスを入れるということになります。
さらに、入力ボックス系（type="text"やtype="password"含む）においてはpattern属性を指定できます。これはJavaScriptができないと使えないので難しいですが、JavaScriptの正規表現をこの属性に指定することで、値全体がその正規表現に適合するような値しか送信できなくなります。正規表現に興味があれば調べてみましょう。これにより、複雑な形の指定が可能です。サンプルを用意しました。
対応したブラウザなら、その通り入力しないと送信できないはずです。
ちなみに、pattern属性を指定するときは、これまた以前紹介したtitle属性を併用するのが望ましいです。title属性は要素の補足情報でしたが、この場合、どのような値を入力すべきかを説明しないといけません。さっきのサンプルでもtitle属性をそのように使っています。
間違った値を送信しようとしたときに注意が出ますが、その時にtitle属性に書かれたことが使われるかもしれません。現在（）、Google Chromeでそのような動作を確認できます。
ただ、これは何度もいっていますが、送信されたデータを受け取る側でちゃんとチェックしなおすべきです。なぜなら、対応していないブラウザでは予期しない値が送られてくるかもしれないし、仮に全てのブラウザが対応したとしてもかいくぐることは容易だからです。
数値系
input要素には、数値入力専用のコントロールがあります。type="number"とtype="range"です。どちらも数値ですが、。numberは正確な値、rangeは大まかな値という違いがあります。
min属性とmax属性で、数値の範囲を指定できます。min属性は最小値、max属性は最大値です。
また、step属性で数値の精度を表します。つまり、隣接する数値の差がその数値になるということです。
たとえばstepが1のとき、数値は0,1,2,3,4,…を指定でき（最小値が0の場合）、stepが10なら0,10,20,30,40,…が指定できます（最小値が0の場合）。stepに"any"を指定すると、自由な数値を設定できます。他には、value属性で最初の数値を指定できます。
numberとrangeの違いは次のようになります。
number: range:
numberのほうは正確な値が必要とされるのでちゃんと数字が表示され、rangeのほうは正確な値が必要とされないので、数値が表示されないスライダーとかのように大まかな表示になっていると思います。
ちなみに、rangeの場合required属性を指定できません。なぜかというと、rangeの場合絶対に何らかの値はセットされるからです。「値を入力しない」という選択肢はありません。
色
type="color"のとき、色選択コントロールになります。
色は、「#000000」のような形で表されます。#の後に、16進数表記の数字が6桁です。左から、R、G、Bの順に数値になっています。色の表記はCSSのときにまた詳しく解説するのでここではこの程度の説明にとどめておきます。詳しく知りたい人は調べてみましょう。
とにかく、このような表記で色を選択できます。
ちなみに、colorもrangeと同じくrequired属性がありません。
日時
日時を入力するためのコントロールもたくさんあります。
まず、type="date"の日付コントロールです。これは、年・月・日を入力できます。
value属性に指定すべき値は、「年-月-日」という書式で、これはtime要素の書式（日付部分のみ）と同じです。
実際のサンプルを試してみると、今のところ（）、Operaではカレンダーのようなコントロールで分かりやすく設定できました。Chromeではスピナーコントロールになりました。
また、step属性も指定できます。単位は日です。
step属性を10（10日）にしたサンプル：
さらに、年と月だけのコントロールもあります。type="month"です。書式は「年-月」という書式（例：2011-04）です。
これも同じくstep属性があり、単位は月です。
さらにさらに、週単位で選択するものもあります。type="weekです。
これは、「何年第何週」というような形で表します。例えば、の場合、「2011年第16週」で、これを「2011-W16」と表します。「W」が入ることに注意しましょう。また、一週間は月曜日で始まって日曜日で終わります。
step属性もあり、単位は週です。
そして、今度は時刻です。時・分・秒、そして小数点以下まで指定できます。type="time"です。
時間文字列の書式は、「時:分:秒.…」という形です（小数点以下は省略可能）。例えば午後10時なら、「22:00:00」となります。
step属性の単位は秒です。例えば一時間単位にしたければ3600としましょう。一時間単位にしたサンプル：
最後に登場するのが日時コントロールです。これはつまり、日付と時刻をまとめて表す値を入力するためのコントロールです。
その書式はtime要素と同じで、例えば日本標準時（UTC+09:00）で「2011年4月18日午後10時」なら、「2011-04-18T22:00+09:00」です。
実は日時コントロールには2種類あり、type="datetime"とtype="datetime-local"があります。後者はローカル時間で、タイムゾーン（+09:00とか）がありません。すなわち、「2011-04-18T22:00」となります。
状況に応じて適切なほうを選択しましょう。
step属性は時刻と同じく秒です。
ちなみに、デフォルト（value属性）は「日本標準時で2011年4月18日の22時」ですが、いざ編集してみると「UTCで2011年4月18日の13時」に変化すると思います。タイムゾーンありの場合UTCに直して編集することになっています。日本標準時のUTCとの時差は9時間なので、これは正しい動作です。直感的でないのが困るなら、datetime-localを使用しましょう。
datetime-localのサンプル：
ファイルアップロード
最後に紹介するのが、ファイルアップロードです。これは、自分のパソコンにあるファイルの中身を送るというものです。
通常1つだけですが、論理属性のmultiple属性が指定されていると複数送ることができます。
また、accept属性を指定することができ、これは送ることができるファイル形式をMIMEタイプで指定します。詳しくは解説しませんが、「text/html」とか「image/gif」とかいうものです。複数種類ある場合は,（カンマ）で区切ります。
また、「audio/*」（音声ファイルなんでも）、「video/*」（動画ファイルなんでも）、「image/*」（画像ファイルなんでも）という特別な値を指定することができます。