会員登録やユーザーの情報を入力するようなサイトでは
フォームの使用は避けて通れない道ですよね。

フォームの中でもよく使うinputのtype属性は、html5から使える値が一気に増えて、
さらに使いやすいフォームを作成することができるようになりました。

今回はhtml5から追加されたtype属性の値を紹介しつつ、
ユーザーフレンドリーなフォームを作って紹介致します。

1、作るフォームの内容

今回作るフォームは架空のイベント申し込みフォームです。
項目は以下の通りです。

名前

電話番号

メールアドレス

ご参加希望日

ご参加希望時間

ご参加人数

2、名前を入力するフォーム

まずはinputの手始めとして、名前の入力フォームを作成します。

【HTML】

【結果】

3、電話番号を入力するフォーム

電話番号を入力するフォームはtypeの値をtelとします。
telを使用するとPCから見たときは普通のフォームと変わりないですが、
スマホから見て、入力フォームをタップすると初めから数字入力のキーボードが出現するようになります。

【HTML】

【結果】

4、メールアドレスを入力するフォーム

メールアドレスを入力するフォームはtypeの値をemailとします。
この値を使用すると、入力されたアドレスに@が入っていなかった場合や全角文字になっている場合、
submitボタンを押したときにエラーを表示してくれます。

こちらも便利なのでぜひご使用いただきたい値です。

【HTML】

【結果】

5、日付を入力するフォーム

日付を入力するフォームはtypeの値をdateとします。
この値を指定することで、手入力しなくても日付の選択が可能となり、
ブラウザによってはカレンダーから日付を選べるようになります。

しかし、dateはfirefoxに対応しておらず、firefoxから見ると、値がtextに変更されるので、
実装する際はお気をつけください。(2017.9現在)

【HTML】

【結果】

6、時間を入力するフォーム

日付を入力するフォームはtypeの値をtimeとします。
値を指定することで、手入力しなくても時間の選択が可能となります。

分数を10分刻みにしたい場合はstepという属性を入力します。
stepの初期値は60秒なので、10分刻みにしたいときは、600を指定します。

また、timeもdateと同様、firefoxに対応していませんので、ご注意ください。(2017.9現在)

【HTML】

【結果】

7、数字を入力するフォーム

数字を入力するフォームはtypeの値をnumberとします。
数量を選択したり、人数を選択したりしてもらう際に役立つ値です。
数量の最小値を指定したいときはmin属性、最大値を指定したいときはmax属性をつけます。
今回は1〜5までの指定を入れます。

【HTML】

【結果】

8、完成したフォーム

html5で追加されたtype属性の値の中で、よく使うものを紹介しました。
ここまで紹介したものをまとめると、以下のようなフォームが完成します。
（サンプルなので、送信ボタンをクリックしても情報は送信されません）

【HTML】

【結果】

9、まとめ

フォームの属性と値をマスターすることで、
ユーザーフレンドリーなフォームを作成することができます。

今回はhtml5で追加された属性に絞って紹介しましたが、
ふりがなを自動入力できたり、郵便番号を入力すると自動で住所を表示するjQueryのライブラリなどもあります。
色々な技術を組み合わせることで、より良いフォームが作れるようになると良いですね。