English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 基本教程

HTML5 API

HTML5 メディア

HTML5 グラフィック

HTML5 Input タイプ

HTML5中で、多くの新しいフォームinput入力タイプが追加されました。これらの追加要素を使用することで、より良い入力制御と検証を実現できます。

HTML5 新しい Input タイプ

HTML5 多くの新しいフォーム入力タイプを持っています。これらの新機能は、より良い入力制御と検証を提供します。

この章では、これらの新しい入力タイプを全体的に紹介します：

  • 色

  • 日付

  • datetime

  • datetime-local

  • メール

  • 月

  • 数値

  • 範囲

  • 検索

  • 電話番号

  • 時間

  • URL

  • 週

注意:すべての主要ブラウザが新しいinputタイプをサポートしていないわけではありませんが、既にすべての主要ブラウザで使用できます。サポートされていない場合でも、通常のテキストフィールドとして表示できます。

Input タイプ: カラー

color タイプはinputフィールドで主に色を選択するために使用されます。

オンラインサンプル

ピッカーカラーから色を選んでください:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　お好みの色を選んでください: <input type="color" name="favcolor"><br>
　　<input　type="submit">
</form>
</body>
</html>
テストをしてみる‹/›

Input タイプ: date

date タイプは日付選択器から日付を選択することができます。

オンラインサンプル

時間コントローラーを定義します：

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　誕生日: <input type="date" name="bday">
　　<input　type="submit">
</form>
</body>
</html>
テストをしてみる‹/›

Input タイプ: datetime

datetime タイプはUTC時間の日に選択することができます。

オンラインサンプル

日付と時間コントローラー（ローカル時間）を定義します：

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　誕生日（日付と時間）: <input type="datetime" name="bdaytime">
　　<input　type="submit">
</form>
</body>
</html>
テストをしてみる‹/›

Input タイプ: datetime-local

datetime-local タイプは日付と時間（時区なし）を選択することができます。

オンラインサンプル

日付と時間（時区なし）を定義します：

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　誕生日（日付と時間）: <input type="datetime-local" name="bdaytime">
　　<input　type="submit">
</form>
</body>
</html>
テストをしてみる‹/›

Input タイプ: email

email タイプはeメールを含む入力フィールドに使用されます。-メールアドレスの入力フィールド。

オンラインサンプル

フォームを提出する際には、emailフィールドの値が合法か有効か自動的に確認されます：

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　E-mail: <input type="email" name="usremail">
　　<input　type="submit">
</form>
<p><b>注意:/b>インターネットエクスプローラー　9　　およびそれ以前のIEバージョンでは、type="email"はサポートされていません。</p>
</body>
</html>
テストをしてみる‹/›

ヒント: iPhoneのSafariブラウザはemail入力タイプをサポートし、タッチスクリーンキーボードを変更してそれに対応しています（@と.comオプションを追加）。

Input タイプ: month

month タイプは月を選択することができます。

オンラインサンプル

月と年（時区なし）を定義します：

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　誕生日（月と年）: <input type="month" name="bdaymonth">
　　<input　type="submit">
</form>
</body>
</html>
テストをしてみる‹/›

Input タイプ: number

number タイプは数値を含む入力フィールドに使用されます。

受け入れ可能な数字の範囲を設定することもできます：

オンラインサンプル

数値入力フィールド（範囲指定）を定義します：

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</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>
テストをしてみる‹/›

数字の範囲を指定するために以下の属性を使用します：

属性説明
disabled入力フィールドは無効です。
max許可される最大値を指定します
maxlength入力フィールドの最大文字長を指定します
min許可される最小値を指定します
pattern入力フィールドの検証に使用されるパターンを指定します
readonly入力フィールドの値を変更できないことを指定します
required入力フィールドの値が必須であることを指定します
size入力フィールドの表示可能な文字数を指定します
step入力フィールドの合法な数字間隔を指定します
value入力フィールドのデフォルト値を指定します

Inputタイプ: range

rangeタイプは、特定範囲の数字値を含むべき入力フィールドに使用されます。

rangeタイプはスライダーとして表示されます。

オンラインサンプル

非常に正確でない数値（スライダーコントロールに似たもの）を定義します:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php" method="get">
ポイント: <input type="range" name="points" min="1"　max="10">
<input　type="submit">
</form>
<p><b>注意:/b>インターネットエクスプローラー　9　及び以前のIEバージョンではtype="range"をサポートしていません。</p>
</body>
</html>
テストをしてみる‹/›

数字タイプの制限を指定するために以下の属性を使用してください：

  • max - 許可される最大値を指定します

  • min - 許可される最小値を指定します

  • step - 合法な数字間隔を指定します

  • value - デフォルト値を指定します

Inputタイプ: search

searchタイプは、サイト検索やGoogle検索などの検索フィールドに使用されます。

オンラインサンプル

検索フィールドの定義（サイト検索やGoogle検索など）:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　Google検索: <input type="search" name="googlesearch"><br>
　　<input　type="submit">
</form>
</body>
</html>
テストをしてみる‹/›

Inputタイプ: tel

オンラインサンプル

電話番号フィールドの入力定義:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　電話番号: <input type="tel" name="usrtel"><br>
　　<input　type="submit">
</form>
</body>
</html>
テストをしてみる‹/›

Inputタイプ: time

timeタイプは、時間を選択することができます。

オンラインサンプル

時区を持たない可変時間コントローラーの定義:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　時間を選択してください: <input type="time" name="usr_time">
　　<input　type="submit">
</form>
</body>
</html>
テストをしてみる‹/›

Inputタイプ: url

URLタイプは、URLアドレスを含むべき入力フィールドに使用されます。

フォームを提出する際には、自動的にURLドメインの値を確認します。

オンラインサンプル

入力URLフィールドの定義:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　ホームページを追加してください: <input type="url" name="homepage"><br>
　　<input　type="submit">
</form>
<p><b>注意:/b>インターネットエクスプローラー　9及び以前のIEバージョンではtype="url"をサポートしていません。</p>
</body>
</html>
テストをしてみる‹/›

ヒント: iPhoneのSafariブラウザはurl入力タイプをサポートし、タッチスクリーンキーボードを変更してそれに対応しています（.comオプションを追加）。

Input 类型: week

weekタイプは週と年を選択可能。

オンラインサンプル

週と年を定義(時区なし):

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　週を選択:　<input　type="week"　name="year_week">
　　<input　type="submit">
</form>
</body>
</html>
テストをしてみる‹/›

HTML5 <input> タグ

タグ説明
<input>input入力器の説明
HTML5 フォーム要素HTML5 オーディオ(オーディオ)