<input>タグのtype属性に「tel」を指定すると、電話番号の入力欄を作成できます。
type=”tel”では、type=”url”やtype=”email”の場合とは異なり、特に入力形式が強制されておらず、見た目や機能などは、通常のテキスト入力欄とほとんど変わりません。
使用例
1 2 3 4 5 |
<body> <form action="cgi-bin/formsample.cgi" method="post"> <p>電話番号:<input type="tel" name="tel"></p> </form> </body> |
表示例
スポンサーリンク
size属性
入力欄の幅を、表示される文字数(整数)で指定します。
1 |
<input type="tel" name="sample" size="20"> |
maxlength属性
入力欄に入力できる最大文字数を指定します。
1 |
<input type="tel" name="sample" maxlength="20"> |
スポンサーリンク
minlength属性
入力欄に入力できる最小文字数を指定します。
1 |
<input type="tel" name="sample" minlength="10"> |
value属性
入力欄にあらかじめ表示されるテキストを指定します。
スポンサーリンク
autocomplete属性
入力欄でオートコンプリート機能を有効にするかどうかを指定します。
以前に入力した内容をブラウザが覚えておき、次回同じフォームにアクセスしたときに、入力候補を予測して自動的に表示する機能。
指定できる値は、「on」「off」のどちらかです。
- on
オートコンプリート機能を有効にする(デフォルト) - off
オートコンプリート機能を無効にする
autocomplete属性がない場合は、デフォルトの「autocomplete=”on”」(有効)として扱われますが、form要素に「autocomplete=”off”」(無効)が指定されているときは、input要素のオートコンプリート機能も無効になります。
dirname属性
入力値の表記方向を示す情報を、サーバーに送信するための名前を指定します。
例えば、ユーザーが右から左へテキストを入力した場合、右から左の方向を示す情報が、dirname属性に指定された名前とともにサーバーへ送信されます。
スポンサーリンク
list属性
入力候補リストの表示を指定します。
ユーザーは表示された候補から選択するだけでなく、任意の値を入力することもできます。
入力候補リストはdatalist要素で作成し、datalist要素に指定したID名をlist属性の値に指定します。
1 2 3 4 5 6 7 |
<input type="tel" name="sample" list="data1"> <datalist id="data1"> <option value="リスト1"></option> <option value="リスト2"></option> <option value="リスト3"></option> </datalist> |
pattern属性
入力欄に入力されたデータのチェックに使うパターン(書式)を、JavaScriptと同じ正規表現で指定します。
pattern属性がある場合、入力されたデータが指定されたパターンと完全に一致しない限り、送信できないようになります。
なお、pattern属性を使用する場合は、title属性で入力パターンの説明を入れておくことが推奨されています。
この説明は、データが指定されたパターンに一致しなかった場合に表示されるエラーメッセージや、コントロールにマウスカーソルを合わせたときに表示されるツールチップとして利用されます。
スポンサーリンク
placeholder属性
ユーザーに対して、入力欄に何を入力したらいいのか、簡単なヒントとして表示させるテキストを指定します。
この属性に対応したブラウザでは、placeholder属性に指定した値が、ヒントとしてあらかじめ入力欄に表示されます。
1 |
<input type="tel" name="telNumber" placeholder="00-0000-0000"> |
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要素の中になくても、そのフォームの部品として機能するようになります。
1 2 3 4 5 |
<p>お名前:<input type="text" name="name" form="sample"></p> <form method="post" action="sample.cgi" id="sample"> <p><input type="submit" value="送信"></p> </form> |
スポンサーリンク
name属性
コントロールを識別するための名前を指定します。
フォームのデータが送信されるときには、この名前とデータがセットになって送られ、サーバー側でコントロールを特定するために使われます。
1 |
<input type="text" name="name" value="Ichiro"> |
