【HTML5】フォームでのinput要素のtype属性追加
フォームコントロールの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」が用意されたキーボード
コメントを残す