formのtype属性値のサンプル

formのtype属性値の各サンプル

基本

・全ブラウザで確認していないので意味の無い属性値を記述しているかもしれない。
・htmlだけでバリデーションが可能だそうだけど、各ブラウザでの対応を考えると・・・厳しい。

type="text"

<input type="text" class="form-control" style="width:50%;" />

オートコンプリート無効

<input type="text" class="form-control" autocomplete="off" style="width:50%;" />

type="number"

数字のみ(※最小値を指定)

<input type="number" class="form-control" min="0" style="width:10rem;" />

type="search"

値があるときはフィールド内にクリアするボタンが表示される

<input type="search" class="form-control" style="width:50%;" />

type=tel、url、email、

半角英数入力にしてくれる

TEL: URL: EMAIL:
TEL:<input type="tel" class="form-control" style="width:50%;" />
URL:<input type="url" class="form-control" style="width:50%;" />
EMAIL:<input type="email" class="form-control" style="width:50%;" />