スマートフォン 16
入力フォームの新しいタイプ

フォームに使用するinput要素。HTML5で新しいtypeが追加された。これを使うとデフォルトで入力キーを切り替えられる。うまく活用してユーザーに楽に入力してもらおう。

制作・文／馬鳥豪樹（WEB Drawer）

BROWSER iOS Andoroid

<type="email">

"email" はメールアドレスを入力するinputに指定するtype属性の値だ。

type 属性がtext のもの【01】と比べると、アルファベットの箇所は変わらない【02】。しかしキーボードの一番下の段を見てみると、メールアドレスを入力するときによく使用する「＠マーク」と「.（ドット）」が入っている

【01】

【02】一番下の段に「＠マーク」と「.（ドット）」が表示されている

<type="url">

"url"はURLを入力するinputに指定するtype属性の値だ。

こちらもtype属性がtextのものとアルファベットの箇所は変わらないが、キーボードの一番下の段にURLを入力するときによく使用する「ドット」、「スラッシュ」、「.com」が入っている【03】。

【03】一番下の段に「ドット」、「スラッシュ」、「.com」が表示されている。

<type="tel">

"tel"は電話番号を入力するinputに指定するtype属性の値だ。

番号の入力なので入力モードがテンキーに切り替わる。これで電話をかけるときの番号を打つ感覚で入力することができるようになる【04】。

【04】テンキー表示になり、電話のように＃と＊が追加されている。

<type="number">

"number"は数値を入力するinputに指定するtype属性の値だ。

入力モードが数字のキーに切り替わる。数字と記号を入力させたい箇所に使用すると便利だろう【05】。

【05】数字のキー表示になる。

<type="datetime">

"datetime"はUTC（協定世界時）を入力するinputに指定するtype属性の値だ。

これを指定すると、月日時をダイヤルで選べる入力モードに切り替わる。グローバル日時で入力する場合はこれを使用する【06】。

【06】年月日を簡単に選ぶことができる。

<type="datetime-local">

"datetime-local" は時間を入力するinputに指定するtype属性の値だ。

こちらはdatetimeとは違い現地時間の日時を入力する際に使用する。こちらも同じく月日時をダイヤルで選べる入力モードに切り替わる【07】。

【07】用途によって使い分けよう。

<type="date">

"date"は日付を入力するinputに指定するtype属性の値だ。

年月日をダイヤルで選べる入力モードに切り替わる。日付の入力が簡単にできるようになる【08】。

【08】わざわざ日付を入力しなくても簡単に選択できる。

<type="time">

"time"は時刻を入力するinputに指定するtype属性の値だ。

時間と分をダイヤルで選べる入力モードに切り替わる。時間を入力してもらいたときに使用すると便利になるだろう【09】。

【09】時間と分を選択することができる。

[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。