さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】フォームでのinput要素のtype属性追加

Pocket
LINEで送る

フォームコントロールの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」が用意されたキーボード

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容