こんにちは。
残暑厳しい今日この頃ですが、みなさんいかがお過ごしでしょうか。
ようやくオリンピックと仕事で続いた夜更かしの疲れが無くなって来ました。
30歳超えると、なかなか回復しないですね。
そんな前置きはさておき、徐々にHTML5を使用してサイトを作成する機会も増えてきました。
HTML5ではたくさんの機能が追加されていますが、今のところ実制作の中ではフォーム周りが一番使う頻度が多いと感じています。
今回はそのフォーム部分で、今のところ実制作で使っている、inputのtype属性を列挙してみました。
(なお、IEは10から対応です。)
メールアドレスの入力欄を作成する
<label for="Email">Email</label> <input id="Email" name="Email" type="email">
■url
URLの入力欄を作成する
<label for="pageurl">ホームページアドレス</label> <input id="pageurl" name="pageurl" type="url">
■tel
電話番号の入力欄を作成する
<label for="telnum">お電話番号</label> <input id="telnum" name="telnum" type="tel">
■number
数値の入力欄を作成する
<label for="purchase">購入枚数※お一人様4枚まで</label> <input id="purchase" name="purchase" type="number">
【type属性以外の属性】
■required
入力部分を必須項目にする
<label for="address">住所※必須</label> <input id="address" name="address" type="text" reqired>
■placeholder
入力欄に初期表示する内容を指定する
<label for="name">お名前</label> <input id="name" type="text" name="name" placeholder="お名前を入力して下さい" />
という感じでしょうか。
すこし要素を加えるだけで、ユーザーフレンドリーなフォームになります。
なお、追加された要素はまだまだあり（正規表現とか）、今回挙げた使い方もほんの一例ではありますが、実制作の現場においては今回上げたものは各ブラウザの対応状況や、想定ユーザーを考えた上では最低限対応しておいてもいいのではないかと思います。
またフォームの追加要素について、現状どのブラウザで各要素が対応しているかは
以下のサイトがわかりやすかったです。
http://wufoo.com/html5/