<input type=”tel”>｜電話番号の入力欄を作成する

<input>タグのtype属性に「tel」を指定すると、電話番号の入力欄を作成できます。

type=”tel”では、type=”url”やtype=”email”の場合とは異なり、特に入力形式が強制されておらず、見た目や機能などは、通常のテキスト入力欄とほとんど変わりません。
 
 

使用例

表示例

size属性

入力欄の幅を、表示される文字数（整数）で指定します。

maxlength属性

入力欄に入力できる最大文字数を指定します。

minlength属性

入力欄に入力できる最小文字数を指定します。

value属性

入力欄にあらかじめ表示されるテキストを指定します。
 
 

autocomplete属性

入力欄でオートコンプリート機能を有効にするかどうかを指定します。

• on
  オートコンプリート機能を有効にする（デフォルト）
• off
  オートコンプリート機能を無効にする

 
 
autocomplete属性がない場合は、デフォルトの「autocomplete=”on”」（有効）として扱われますが、form要素に「autocomplete=”off”」（無効）が指定されているときは、input要素のオートコンプリート機能も無効になります。
 
 

dirname属性

入力値の表記方向を示す情報を、サーバーに送信するための名前を指定します。
例えば、ユーザーが右から左へテキストを入力した場合、右から左の方向を示す情報が、dirname属性に指定された名前とともにサーバーへ送信されます。
 
 

list属性

入力候補リストの表示を指定します。
ユーザーは表示された候補から選択するだけでなく、任意の値を入力することもできます。

入力候補リストはdatalist要素で作成し、datalist要素に指定したID名をlist属性の値に指定します。

pattern属性

入力欄に入力されたデータのチェックに使うパターン（書式）を、JavaScriptと同じ正規表現で指定します。
pattern属性がある場合、入力されたデータが指定されたパターンと完全に一致しない限り、送信できないようになります。

なお、pattern属性を使用する場合は、title属性で入力パターンの説明を入れておくことが推奨されています。
この説明は、データが指定されたパターンに一致しなかった場合に表示されるエラーメッセージや、コントロールにマウスカーソルを合わせたときに表示されるツールチップとして利用されます。
 
 

placeholder属性

ユーザーに対して、入力欄に何を入力したらいいのか、簡単なヒントとして表示させるテキストを指定します。
この属性に対応したブラウザでは、placeholder属性に指定した値が、ヒントとしてあらかじめ入力欄に表示されます。

readonly属性

読み取り専用にして、ユーザーが入力値を編集できないようにします。
こちらは、以下のいずれかの形式で指定します。

• readonly
• readonly=”readonly”
• readonly=””

required属性

そのコントロールへの入力が必須であることを指定します。
こちらは、以下のいずれかの形式で指定します。

• required
• required=”required”
• required=””

 
 
required属性がある場合、コントロールにデータが入力されない限り、送信できないようになります。
 
 

autofocus属性

ページが表示されたら、そのコントロールへ自動的にフォーカスが当たるよう指定します。
autofocus属性は、1つの文書に1つだけ指定することができます。
こちらは、以下のいずれかの形式で指定します。

• autofocus
• autofocus=”autofocus”
• autofocus=””

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

• disabled
• disabled=”disabled”
• disabled=””

form属性

コントロールを指定のform要素と結び付けます。
結びつけたいform要素のid属性の値をこの属性の値に指定することで、コントロールがform要素の中になくても、そのフォームの部品として機能するようになります。

name属性

コントロールを識別するための名前を指定します。
フォームのデータが送信されるときには、この名前とデータがセットになって送られ、サーバー側でコントロールを特定するために使われます。

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

  HTML5 タグ図鑑へ