HTML5入力タイプ

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>

プログラムを実行して試してください

次の属性を使用して数値を指定しますタイプの制限:

max - 許可される最大値を指定します
min - 許可される最小値を指定します
step - 有効な数値間隔を指定します (step="3" の場合、有効な数値は - 3,0,3,6 など)
value - デフォルト値を指定します

インスタンス

すべての修飾されたプロパティを含む例

<!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>説明入力入力ツール
	注意

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転