HTML5 には、いくつかの新しいフォーム入力タイプがあります。これらの新機能により、入力制御と検証が向上します。
この章では、次の新しい入力タイプについて包括的に紹介します:
color
date
datetime
datetime-local
email
-
月
番号
範囲
検索
電話
時間
URL
週
注: すべての主要なブラウザが新しい入力タイプをサポートしているわけではありませんが、すでにすべての主要なブラウザで使用できます。サポートされていない場合でも、通常のテキストフィールドとして表示できます。
入力タイプ: color
color タイプは、以下に示すように、主に入力フィールドで色を選択するために使用されます:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action=" " method="post">
选择你喜欢的颜色: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
<?php
echo $_POST['favcolor'];
?>
</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="datetime" name="bdaytime">
<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>
プログラムを実行して試してください
入力タイプ: email
email type は、含める必要がある電子メールに使用されます。 アドレスの入力フィールド。
例
フォームを送信すると、電子メールフィールドの値が合法か有効かが自動的に検証されます:
<!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>
</body>
</html>
プログラムを実行して合法および違法な電子メールを入力してみてください
注意 : Internet Explorer 9 以降 IE の初期バージョンでは type="email" をサポートしていません
入力タイプ: month
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>
</body>
</html>
プログラムを実行して試してください
次の属性を使用して数値を指定しますタイプの制限:
インスタンス
すべての修飾されたプロパティを含む例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo_form.php" method="get">
<input type="number" name="points" min="0" max="10" step="3" value="6">
<input type="submit">
</form>
</body>
</html>
プログラムを実行して試してください
入力タイプ: 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>
</body>
</html>
プログラムを実行して試してください
次の属性を使用して制限を指定してください数値のタイプ:
max - 最大許容値を指定します
min - 最小許容値を指定します
step - 有効な数値間隔を指定します
value - デフォルト値を指定します
入力タイプ: search
search typeサイト検索や Google 検索などの検索フィールドに使用されます。
例
検索フィールドを定義します(サイト検索やGoogle検索と同様):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php">
Search Google: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>
</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 フィールドの値が自動的に検証されます。
例
入力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>
</body>
</html>
プログラムを実行して試してみましょう
入力タイプ:week 週タイプでは、週と年を選択できます。
例
週と年を定義します(タイムゾーンなし):
<form action="demo-form.php">
选择周: <input type="week" name="year_week">
<input type="submit">
</form>
プログラムを実行して試してください
HTML5 <input> タグ
| タグ | <input>説明入力入力ツール |
| 注意 | : すべての主要なブラウザがサポートしているわけではありません。新しい入力タイプですが、これらはすでにすべての主要なブラウザで使用できます。サポートされていない場合でも、通常のテキストフィールドとして表示できます。
次のセクション
