HTML5 の新しい入力タイプ
HTML5 には、いくつかの新しいフォーム入力タイプがあります。これらの新機能により、入力制御と検証が向上します。
この章では、次の新しい入力タイプについて包括的に紹介します:
color
date
datetime
datetime-local
email
-
月
番号
範囲
検索
電話
時間
URL
週
注: すべての主要なブラウザが新しい入力タイプをサポートしているわけではありませんが、すでにすべての主要なブラウザで使用できます。サポートされていない場合でも、通常のテキストフィールドとして表示できます。
入力タイプ: カラー
カラータイプは、以下に示すように、主に色を選択するために入力フィールドで使用されます:
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックして表示します。オンライン インスタンス
入力タイプ: 日付
date タイプを使用すると、日付ピッカーから日付を選択できます。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日: <input type="date" name="bday"> <input type="submit"> </form> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
入力タイプ: datetime datetime タイプでは、日付 (UTC 時間) を選択できます。
インスタンス<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php">
生日: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
入力タイプ: datetime-local
datetime-local タイプでは、日付と時刻 (タイムゾーンなし)。
インスタンス<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php">
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
<input type="submit">
</form>
</body>
</html>
インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
電子メールタイプが使用されます電子メール アドレスを含める入力フィールド。
インスタンス<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php">
E-mail: <input type="email" name="usremail">
<input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持type="email" 。</p>
</body>
</html>
インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
iPhoneのSafariブラウザは電子メール入力タイプをサポートし、タッチスクリーンキーボードを変更しますそれに一致するようにします (@ および .com オプションを追加しました)。
入力タイプ: 月month タイプでは、月を選択できます。
インスタンス<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php">
生日 ( 月和年 ): <input type="month" name="bdaymonth">
<input type="submit">
</form>
</body>
</html>
インスタンスの実行 »「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
入力タイプ: 数値
数値タイプは、数値を含む必要がある入力フィールドに使用されます。
受け入れられる番号に制限を設定することもできます:
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
次の属性を使用して番号を指定しますタイプの制限:
max - 許可される最大値を指定します
min - 許可される最小値を指定します
step - 有効な数値間隔を指定します (step="3" の場合、有効な数値は -3 です) 、0、3、6 など)
value - デフォルト値を指定します
すべての修飾された属性を使用して例を試してください 試してください
入力タイプ: range
range タイプは、特定の範囲内の数値を入力するフィールド。
範囲タイプはスライダーとして表示されます。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p> </body> </html>
インスタンスの実行»
オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください
数値型の制限を指定するには、次の属性を使用してください:
max - を指定します。最大許容値
min - 最小許容値を指定します
step - 有効な数値間隔を指定します
value - デフォルト値を指定します
入力タイプ: search
検索タイプが使用されますサイト検索や Google 検索などの検索フィールド用。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
入力タイプ: tel
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 电话号码: <input type="tel" name="usrtel"><br> <input type="submit"> </form> </body> </html>
インスタンスを実行する »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
入力タイプ: 時間
時間タイプでは時間を選択できます。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择时间: <input type="time" name="usr_time"> <input type="submit"> </form> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
入力タイプ: URL URLタイプは、URLを含む必要がある入力フィールドに使用されます住所。
フォームを送信すると、URL フィールドの値が自動的に検証されます。
インスタンス<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php">
添加你的主页: <input type="url" name="homepage"><br>
<input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9及更早IE版本不支持 type="url" 。</p>
</body>
</html>
インスタンスの実行 »「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
ヒント: iPhone の Safari は URL 入力タイプをサポートし、タッチスクリーン キーボードが URL 入力タイプで動作するように変更します (.com オプションを追加)。
入力タイプ: 週
週タイプでは、週と年を選択できます。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择周: <input type="week" name="year_week"> <input type="submit"> </form> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
HTML5 <input> タグ
| 説明 | |
|---|---|
| <入力> | 説明入力入力 |
