HTML5の入力タイプ

HTML5の新しい入力タイプ

HTML5には、いくつかの新しいフォームの入力タイプがあります。 これらの新機能は、より優れた入力コントロールと検証を提供します。

この章では、これらの総合的な新しい入力タイプについて説明します。

• カラー
• 日付
• 日時
• 日時、ローカル
• メール
• 月
• 数
• 範囲
• 検索
• TEL
• 時間
• URL
• 週

注：ない主要なブラウザのすべてが新しい入力タイプをサポートしていますが、あなたはすでにすべての主要なブラウザでそれらを使用することができます。サポートされていない場合、それはまだ通常のテキストフィールドとして表示することができます。

入力タイプ：色

次のように入力フィールドタイプに使用される色は、主に、色を選択するために使用されます。

例

カラーピッカーから色を選択してください：

选择你喜欢的颜色: <input type="color" name="favcolor">

»をお試しください

入力タイプ：日付

date型では、日付ピッカーから日付を選択することができます。

例

時間制御を定義します。

生日: <input type="date" name="bday">

»をお試しください

入力タイプ：日時

日時型は、日付（UTC時間）を選択することができます。

例

日付と時刻コントローラ（現地時間）定義します。

生日 (日期和时间): <input type="datetime" name="bdaytime">

»をお試しください

入力タイプ：日時、ローカル

日時・ローカル型は、日付と時刻（タイムゾーンなし）を選択することができます。

例

日付と時刻（タイムゾーンなし）を定義します。

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

»をお試しください

入力タイプ：電子メール

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

例

フォームが送信されると、それは自動的に値有効な電子メールドメインかどうかを確認します：

E-mail: <input type="email" name="email">

»をお試しください

ヒント：Safariブラウザでは、iPhoneは、電子メールの入力タイプをサポートし、それに合わせて、タッチスクリーンキーボードを変更することにより、（@や.COMのオプションを追加します）。

入力タイプ：月

月・タイプを使用すると、月を選択することができます。

例

定義された月と年（タイムゾーンなし）：

生日 (月和年): <input type="month" name="bdaymonth">

»をお試しください

入力タイプ：数値

番号タイプは値を含める必要があります入力フィールドに使用されます。

また、限られた数を受け入れるように設定できます。

例

数値入力フィールド（限定）を定義します。

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

»をお試しください

デジタルリミテッドの種類を指定するには、次のプロパティを使用します。

• 規制によって許容される最大MAX-
• 分 - 規制によって許容される最小
• ステップ - のための法的な数の間隔を指定します（ステップ= "3"場合、法律上の数字は-3,0,3,6、などとすることができます）
• 値 - 指定されたデフォルト値

すべての定義された属性は、との例を試してみてくださいしてみてください

入力タイプ：範囲

範囲の種類は、数値の範囲を含むべき入力フィールドのために使用されます。

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

例

あなたは（スライダコントロールのような）非常に正確な値を定義する必要はありません。

<input type="range" name="points" min="1" max="10">

»をお試しください

デジタルリミテッドの種類を指定するには、次の属性を使用してください：

• 最大 - 規制によって許容される最大
• 分 - 規制によって許容される最小
• ステップ - のための法的な数の間隔を指定します
• 値 - 指定されたデフォルト値

入力タイプ：検索

このようなサイトの検索やGoogle検索などの検索フィールドの検索タイプ、。

例

（サイトの検索やGoogle検索に似ています）検索フィールドを定義します。

Search Google: <input type="search" name="googlesearch">

»をお試しください

入力タイプ：TEL

例

フィールドが定義されている電話番号を入力します。

电话号码: <input type="tel" name="usrtel">

»をお試しください

入力タイプ：時間

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

例

入力時間制御（無タイムゾーン）を定義します。

选择时间: <input type="time" name="usr_time">

»をお試しください

入力タイプ：URL

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

フォームが送信されると、自動的にURLフィールドの値を確認します。

例

入力フィールドのURLを定義します。

添加您的主页: <input type="url" name="homepage">

»をお試しください

ヒント：Safariブラウザでは、iPhoneは、URLの入力タイプをサポートし、それに合わせて、タッチスクリーンのキーボードを変更することにより、（.COMオプションを追加します）。

入力タイプ：1週間

週は、あなたが週と年の種類を選択することができます。

例

定義の週と年（タイムゾーンなし）：

选择周: <input type="week" name="week_year">

»をお試しください

HTML5の<input>タグ