なんだかちょっと楽しい...。フォームの新しい入力属性と疑似クラス
こんにちは。mackyです。いやー、夏ですね。夏が終わったらもう年末ですね。私は毎年この時期から猛スピードで一年が終わります。早く走らないと。。詳しくはコチラをご覧ください。
さて、今日は、HTML5で新しく追加された入力属性にちょっと「なんか楽しいかも...」と感じたので、この気持ちが冷めないうちにまとめることにしました。
新しい入力属性
autofocus
オートフォーカス。
ページを開いたときにフォーカスされるようになる。ちなみに、emailはHTML5で追加されたtype属性の値で、メールアドレス専用のキーボードを表示させることが出来る。
<form>
<label>お名前: <input type="text" name="name" class="text" autofocus/></label>
</form>
autocomplete
オートコンプリート。
入力候補はdatalist要素を使用して自身で用意する。デフォルトで有効になっている。無効にしたいときはautocomplete="off"
<form>
<label>ブラウザ: <input type="text" list="browsers" name="browser"id="browser"/></label>
<datalist id="browsers">
<option value="Chrome"/>
<option value="Safari"/>
<option value="Firefox"/>
<option value="Opera"/>
<option value="IE"/>
</datalist>
</form>
multiple
値をカンマ区切りで複数入力可能にする。
<form>
<label>email: <input type="text" value="" name="email" multiple/></label>
<input type="submit" value="送信">
</form>
max•min
数値や日付の入力の際、最大値と最小値を設定できる。
<form>
<label>人数: <input type="number" name="ninzu" min="1" max="10"></label>
</form>
pattern
正規表現を使用し、入力値のパターンを設定することが出来る。
<form>
<input type="password" name="pass" pattern="[a-zA-Z0-9]+">
</form>
placeholder
入力欄にあらかじめテキストを表示出来る。入力時にフォーカスすると消える。メールフォーム等によくみられる。
<form>
<label>メールアドレス: <input type="email" name="mail" placeholder="×××@gmal.com"></label>
</form>
required
入力必須項目に設定する。
<form>
<label>電話番号:<input type="tel" name="tel" required /></label>
</form>
step
ステップ（っていうんですね＾＾；）数値や日付などをステップで指定できるようにする。
<form>
<label>作業時間: <input type="number" name="hours" min="1" max="10"></label>
<input type="number"name="time" step="0.5"> ※単位0.5
</form>
novalidate
form要素に novalidate を追加すると、フォームを送信する際、入力の検証を無効にすることができる。
novalidate属性を省略した場合は、妥当性のチェック機能が有効になる。
<form method="post" action="×××.cgi" novalidate></form>
合わせて使える疑似クラス
：valid
バリデーションが通った入力欄にスタイルを適用できる。
：invalid
バリデーションが通らなかった欄にスタイルを適用できる。
：required
required属性がしていされている入力にスタイルを適用する。
まとめ
表示できるブラウザを選ぶものもありますが、フォーム作成の際はちょっと試したくなりますよね。今回まとめた属性をフルにしようすることはあまりないと思いますが、機会があればいろいろためしてみてください。
