電話番号用の入力フィールドを作るには?
input type="tel"タグの書式
input type="tel"タグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
input type="tel"タグの属性一覧
属性 | 内容 |
グローバル属性 | ※グローバル属性のページを参照してください。 |
value | 初期値を指定します。 |
指定可能なフォーム部品の共通属性 | name、disabled、form、autocomplete、autofocus、list、maxlength、pattern、readonly、required、size、placeholder ※フォーム部品の共通属性のページを参照してください。 |
input type="tel"タグの解説
<input>タグは、入力コントロールを表すための要素です。
<input>要素の「type」属性に「tel」を指定すると、電話番号を入力するための入力フィールドを作ることができます。
ただし、入力できる文字に特に制限はありません。
input type="tel"タグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<section>
<h1>入力フォーム</h1>
<form action="sample.cgi" method="post">
<p><label>お名前: <input name="n"></label></p>
<p><label>勤務先: <input name="o"></label></p>
<p><label>所属部署: <input name="p"></label></p>
<p><label>勤務先電話番号: <input type="tel" name="tel" autocomplete="off"></label></p>
<p><input type="submit" value="OK"><input type="reset" value="リセット"></p>
</form>
</section>
</body>
</html>
input type="tel"タグのサンプル画面1
input type="tel"タグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<form action="sample.cgi" method="post">
<fieldset>
<legend>車購入者情報</legend>
<p><label>お名前: <input name="n"></label></p>
<p><label for="age">年齢:</label>
<select id="age">
<option value="age20" selected="selected"> 20代 </option>
<option value="age30"> 30代 </option>
<option value="age40"> 40代 </option>
<option value="age50"> 50代以上 </option>
</select></p>
<p><label>電話番号: <input type="tel" placeholder="03-1234-5678" name="tel"></label></p>
<p><input type="submit" value="送信"><input type="reset" value="キャンセル"></p>
</fieldset>
</form>
</body>
</html>
input type="tel"タグのサンプル画面2
input type="tel"タグの関連項目