FLINTERS Engineer's Blog

FLINTERSのエンジニアによる技術ブログ

HTML5 - フォーム要素

皆さんこんにちは。"@kouhei_mitsuya"です。
今日は最近流行りのHTML5について書こうと思います。HTML5で強化された要素はたくさんありますがその中でもこれまでjavascriptのライブラリを使用しなければ実現できなかった入力チェックや入力補助等の[フォーム]がHTMLでマークアップを行うだけで実現できるようになりました。

◆例えば下記のサンプルソースをOpera10以上で確認。

<form>
type="email":<input type="email" name="email" required><br>
<input type="submit" value="送信">
</form>

値を入れないで送信ボタンを押すと↓

f:id:k_chindamaikul:20150722160818g:plain
required属性を加えるだけで送信ボタンが押されたタイミングで何も値が入力されていないとアラートが出ます。


メールアドレス以外のテキストを入れると↓
f:id:k_chindamaikul:20150722160841g:plain
input type="email"を指定するだけでOpera10以上では入力されている値がメールアドレスとして間違っていないかチェックします。

◆入力補助もtypeを指定するだけでOK

<form>
type="date":<input type="date" name="date"><br>
type="datetime":<input type="datetime" name="datetime"><br>
type="datetime-local":<input type="datetime-local" name="datetime-local"><br>
type="month":<input type="month" name="month"><br>
type="week":<input type="week" name="week"><br>
type="range":<input type="range" name="range"><br>
</form>

f:id:k_chindamaikul:20150722160906g:plain

まだまだ対応ブラウザが少なかったりはありますが対応ブラウザが今よりもっと普及したら簡単にリッチなUIが実現できそうですね。HTML5にはまだまだ新機能があります。今後もこのブログでHTML5について紹介していこうと思います。