HTML5から追加されたinput要素の属性2つ

こんにちは。 突然ですが皆さん、HTML5は使っていますか？

勧告は2014年に行われており、ブラウザ側の対応はかなり進んでいますが
まだまだ開発側で対応が進んでいないHTML5。

本日は、HTML5の中でも便利な、input要素の属性を2つ程ご紹介します。

そもそもinput要素って？

ユーザからの入力を受け付ける、テキスト入力欄やラジオボタン、チェックボックス等です。
たとえば、通常のテキストフォームはこんな感じで書けます。

<input type="text">

見え方は、こんな感じですね。
※送信ボタンはダミーです。

inputの様々な属性

では、HTML5で追加されたinputの便利機能を幾つか紹介していきます。

required属性

さて、入力フォームといえば、「会員登録」や「アンケート」等が巷でよく見られるものです。
こういった入力フォームには、必ずと言っていいほど「必須項目」があります。
従来は、必須項目を作るためにJavaScriptなどを駆使していました。
それが、なんとHTML5ではキーワード一つでOKです。

<input type="text" required>

ブラウザによって若干挙動は違いますが、サーバ側で判定しているわけではないので、
サーバの負荷は当然減ります。 更に、無駄なコードを書く必要がなく、そのためバグも生まれにくいです。 便利ですね。

placeholder属性

こちらも、最近のオシャレなページなどでは良く見かけるやつです。

<input type="text" placeholder="名前">

こんな風に見えてきます。

フォーム自体がスッキリ見えますね。

まとめ

いかがでしたでしょうか。
HTML5を使うことで、サーバの負荷を減らしたり、
クライアントサイドスクリプトの開発工数を削減したり、
バグ発生の可能性を減らすことができるのではないでしょうか？

新規追加された属性や要素は他にもたくさんありますので、
ぜひ使ってみて下さい！