

#
“type="tel"”
送信可能な値 | 改行を含まない任意の文字列、空文字列 |
妥当性のチェック | 書式の制約なし |
“type="tel"”を指定した“input”要素は電話番号の入力欄を表します。
フォームの送信時には“name”属性の値とともに入力された内容が送信されます。
電話番号の書式は多様であるため、“type="url"”や“type="email"”のように入力値の書式についての妥当性のチェックは行われません。入力値の書式を制約する場合は“pattern”属性で指定します。
一般的にモバイルブラウザでは入力時に数字入力用のソフトウェアキーボードが表示されます。また、ブラウザによるオートコンプリートで入力候補として表示される入力候補に影響する場合があります。
対応していないブラウザでは単純なテキスト入力欄(“type="text"”)として扱われます。
サンプルコード
<form method="post" action="sample-inputtag2.php" target="_blank">
<fieldset>
<p><label>電話番号:<input type="tel" name="sample01"></p>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>
電話番号の書式は多様であるため、“type="url"”や“type="email"”のように入力値の書式についての妥当性のチェックは行われません。入力値の書式を制約する場合は“pattern”属性で指定します。
<form method="post" action="sample-inputtag2.php" target="_blank">
<fieldset>
<p><label>電話番号:<input type="tel" pattern="\d{2,4}-\d{2,4}-\d{3,4}" title="ハイフン(“-”)を含んだ形式で入力してください" name="sample01"></p>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>
#
属性と値
属性 | 値 | ||
---|---|---|---|
属性 | 説明 | 値 | 説明 |
必須属性 | |||
type="" | 入力欄の種類 | tel | 電話番号の入力欄 |
任意属性 | |||
グローバル属性 | |||
autocomplete=""![]() |
ブラウザーによるオートコンプリートの可否 | on | オートコンプリートを行う |
off | オートコンプリートを行わない | ||
disabled="" | 入力欄を無効化 | disabled | 入力欄を無効化 |
form=""![]() |
関連付けるフォーム | ID名 | 関連づける“form”要素の“id”属性の値 |
list=""![]() |
入力値の候補と関連付ける | ID名 | 関連づける“datalist”要素の“id”属性の値 |
maxlength="" | 入力可能な最大の文字数 | 正の整数 | 入力可能な最大の文字数 |
minlength="" | 入力可能な最小の文字数 | 正の整数 | 入力可能な最小の文字数 |
name="" | 入力欄の名前 | 文字列 | 入力欄の名前 |
pattern=""![]() |
入力可能な値の書式 | 正規表現 | JavaScriptの正規表現で表した入力可能な値の書式 |
placeholder=""![]() |
入力欄のプレースホルダー | テキスト | 入力欄のプレースホルダー |
readonly="" | 入力値を編集できなくする | readonly | 入力値を編集できなくする |
required=""![]() |
入力を必須にする | required | 入力を必須にする |
size="" | 入力欄の横幅 | 正の整数 | 入力欄が表示できる文字数 |
value="" | フォームで送信する値の初期値 | テキスト | フォームで送信する値の初期値 |
#