html5の新しいフォーム要素タイプとは何ですか

HTML5 の新しいフォーム要素タイプは次のとおりです: 1. 電子メール タイプ; 2. URL タイプ; 3. 数値タイプ; 4. 範囲タイプ; 5. 日付セレクター タイプ (日付、月、週、時刻など)。 ); 6. 検索タイプ; 7. カラータイプ; 8. 電話タイプ。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。HTML フォームでは、 要素は最も重要なフォーム要素です。要素には多くのフォームがあります。さまざまなタイプ属性に従って、元の HTML フォームのタイプ タイプには、テキスト、パスワード、ラジオ、送信などが含まれます。新しい HTML5 には、複数の新しいフォーム入力タイプ があります。 これらの新機能により、入力制御と検証が向上します。

この記事では、次の新しいフォーム要素の入力タイプを紹介します:

• email
• url
• number
• range
• 日付ピッカー (日付、月、週、時刻、日時、ローカル日時)
• search
• color
• tel

email type

type 属性が email に設定されている場合、フォームを送信するときに、email フィールドの値が電子メールの標準形式に準拠しているかどうかが自動的に検証され、ユーザーの入力は不要になります。自分で正規表現を使用する必要があるため、メールの形式を確認してみました。

例

Email：<input type="email" name="useremail" />

url type

type属性がurlに設定されている場合、フォームが送信されると、urlフィールドの値が以下に準拠しているかどうかが自動的に検証されます。 URL の標準形式。

例

Linkpage:<input type="url" name="link_url" />

数値型

type属性をnumberに設定すると、入力内容が数値型であるかどうかが自動的にチェックされます。ボックス数の制限。

例

Number：<input type="number" name="user_num" min="1" max="10" />

数値修飾属性の場合:

#valueデフォルト値を指定しますdisabled入力フィールドが無効であることを指定しますmaxlength入力フィールドの最大文字長を指定します#pattern入力フィールドの検証に使用するパターンを指定しますreadonly入力フィールドの値を変更できないことを指定しますrequired次のように指定します入力フィールドの値は必須ですsize入力フィールドの表示文字を指定します## range type

属性	説明
max	許容される最大値を指定します
min	許容される最小値を指定します
step	有効な数値の間隔を指定します (step="3" の場合、有効な数値は -3、0、3、6 など)

range type は、範囲内の数値を含む必要がある入力フィールドに使用されます。範囲の種類はスライダーとして表示されます。受け入れられる数に制限を設定することもできます。

例

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

数値修飾に使用される属性は、数値タイプの最初の 4 つと同じです。

日付ピッカー 日付ピッカーのタイプ

は、日付と時刻を選択するために使用されます。

例

Date：<input type="date" name="user_date" />

日付と時刻を選択するための入力タイプ:

date は日、月、年を選択します

• month は月、年を選択します
• week 週と年を選択します
• time 時刻 (時と分) を選択します
• datetime 時刻、日、月、年 (UTC 時間、タイムゾーン) を選択します
• datetime-local 時刻、日、月、年 (現地時間) を選択します。
検索タイプ

は、サイト検索や Google 検索などの検索フィールドに使用されます (検索フィールド通常のテキストフィールドのように動作します)。

Example

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

color type

type 属性が color に設定されている場合、入力コンテンツがカラー形式であるかどうかが自動的にチェックされます。

例

Select your favorite color:<input type="color" name="favcolor">

tel type

type属性をtelに設定すると、入力内容が電話番号形式かどうかを自動的にチェックします。

例

Telephone:<input type="tel" name="usrtel">

関連する推奨事項: 「

html ビデオ チュートリアル

」

以上がhtml5の新しいフォーム要素タイプとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。