Tweet

Pocket

フォームコントロールのinput要素のtype属性に指定できる値が新たに追加されましたので、ご紹介します。

新たに追加されたtype属性は以下になります。

tel･･･電話番号を入力するための入力欄を作成
email･･･メールアドレスを入力するための入力欄を作成
url･･･URLを入力するための入力欄を作成
search･･･検索したい文字列を入力するための入力欄を作成

【使用例】

<from id="sampleFrom" name="sampleFrom" action="">
　　<p>電話番号：<input type="tel" name="tel"></p>
　　<p>メールアドレス：<input type="email" name="email"></p>
　　<p>URL：<input type="rul" name="rul"></p>
　　<p>検索：<input type="search" name="search"></p>
　　<p><input type="submit" value="送信"></p>
</from>

tel、searchについてはtextの場合と変わりませんが、email、urlの場合はメールアドレス、URLを正しい形式で入力しないで送信すると、Firefox4以降、Opera11以降ではアラートが表示されフォーム送信が行われません。

iPhone、iPadでは、type属性の値がtel、email、urlの場合には入力時にそれぞれの値の入力に適したキーボードがデフォルトで表示されます。それぞれのデフォルトキーボードは以下のようになります。

tel → 数字入力
email → 「@」が使えるキーボード
url → 「/」や「.com」が用意されたキーボード