HTML5のフォーム勉強。

最近ボチボチHTML5でやれる案件とかもあったりしますが、
フォームに関してはあまり触れたことがなかったのでお勉強。

inputタグのtype属性も色々機能が加わってるようです。

現時点では全てのWebブラウザーが新しいtype属性に対応しているわけではないが、Webブラウザーは認識できないtype属性を”text”と同等に扱うため、仮に対応していない場合でも大きな不都合は生じないので、積極的に使うべき。

なるほどですね。

required

未入力の場合にはエラーメッセージが表示される

<form action="" method="" >
<input type="text" name="text" required>
<button>送信</button>
</form>

入力ボックス内にガイドテキストを表示

 <form action="" method="" >
 <input type="text" name="text" placeholder="お名前(漢字)"　required>
<button>送信</button></form>

URLを入力するフィールドで用いる属性値。
書式の判定・http://”の書式の補完・スマホで適したキーボード表示

<form action="" method="" >
<input type="url" name="url" placeholder="URL" required>
<button>送信</button>
</form>

メールを入力するフィールドで用いる属性値。
書式の判定・スマホで適したキーボード表示

<form action="" method="" >
<input type="email" name="email" placeholder="メール" required>
<button>送信</button>
</form>

数字を入力するフィールドで用いる属性値
スピンボックスを表示・書式の判定・スマホで適したキーボード表示

<form action="" method="" >
<input type="number" name="number" placeholder="数字" required>
<button>送信</button>
</form>

正規表現を使ったチェック
>>HTML5 Pattern

<form action="" method="" >
<input type="text" name="text" pattern="^[0-9A-Za-z]+$" placeholder="半角英数字で入力"　required>
<button>送信</button>
</form>

スライダーを表示する属性値。
対応してるブラウザ　Chrome／Safari／Opera

<form action="" method="" >
<input type="range" name="range" min="0" max="3" step="1">
</form>

色の入力のために使う属性値
対応してるブラウザ　Opera

<form action="" method="" >
<input type="color" name="color" placeholder="色　※safariのみ">
<button>送信</button>
</form>

日付入力のために使う属性値
対応してるブラウザ　Opera
ChromeとFirefoxでは代わりにスピンコントローラが表示

<form action="" method="" >
<input type="date" name="date" required>
<button>送信</button>
</form>

入力ボックスとして検索ボックスを表示するための属性値
対応してるブラウザ　Chrome／Safari／Opera

<form action="" method="" >
<input type="search" name="search" placeholder="検索" required>
<button>送信</button>
</form>

まだまだ多くあるみたいですが、覚書程度に。