ホームページ  >  記事  >  ウェブフロントエンド  >  html5 フォームの新機能は何ですか?

html5 フォームの新機能は何ですか?

青灯夜游
青灯夜游オリジナル
2021-12-17 14:01:523019ブラウズ

HTML5 フォームの新機能は次のとおりです: 1. 新しい入力タイプの値 (電子メール、URL、番号、電話番号、色、日付など); 2. 新しいフォーム要素の属性 (プレースホルダー、オートフォーカス、形式、最小値、最大値、パターンなど)。

html5 フォームの新機能は何ですか?

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

H5 の新しいフォーム機能は 2 つのカテゴリに分類できます。

1. 10 個の入力の値を入力します

1. email: 電子メール入力フィールド。フォームの送信時に簡単な電子メール形式の検証を提供し、ポップアッププロンプトウィンドウ。

2. url: アドレス入力フィールド。簡単な URL アドレス形式の検証を提供し、フォームの送信時にプロンプ​​ト ウィンドウをポップアップ表示します。

3. 数値: 数値入力フィールド。 (最小値、最大値、ステップを設定可能)

4. 電話番号: 電話番号入力フィールド、モバイルブラウザに番号入力フィールドがポップアップ表示されます。

5. 検索: 検索入力フィールド、モバイル ブラウザの右下隅に検索ボタンが表示されます。

6. 範囲: 範囲選択コントロール。

7. color: カラー選択コントロール。

8. 日付/月/週: 時間選択コントロール。

2. フォーム要素の 11 の新しい属性

1. autocomplete: 自動補完、次の入力候補のために以前に送信されたデータを自動的に記録するかどうか。

2. プレースホルダー: 入力ボックスにプロンプ​​ト テキストを表示するために使用されるプレースホルダー。値とは異なり、送信できません。

3. オートフォーカス: 入力フォーカスを自動的に取得します。

4. Multiple: 複数の入力値を許可するかどうか この属性が宣言されている場合、カンマで区切られた複数の値を入力ボックスに入力することが許可されます。

5. form: 値はフォームの ID です。設定すると、入力フィールドをフォームの外に配置できます。

6. 必須: フォーム送信時に入力の有無が確認され、入力されていない場合はプロンプトメッセージが表示されます。

7. maxlength: 最大長を制限します。入力がある場合にのみ役立ちます。中国語と英語は区別されません。

7.5. minlength: 最小長を制限しますが、これは H5 標準属性ではなく、一部のブラウザでのみサポートされます。

8.min: 入力数値の最小値を制限します。

9. max: 入力数値の最大値を制限します。

10. step: min と組み合わせて使用​​される、入力数値のステップ サイズを制限します。

11. pattern: 入力を検証するための正規表現を指定します。 (通常のデフォルトでは先頭と末尾に ^$ が追加されます)

関連する推奨事項: "html ビデオ チュートリアル "

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。