HTML5 HTML 要素拡張 (パート 2) - 強化された Form 要素は注目に値します_html5 チュートリアル スキル

HTML5 の拡張要素の中で最も注目すべきは form 要素です。 HTML5ではフォームが大幅に刷新され、これまでJavaScriptのコーディングが必要だった一部の機能がコーディングなしで簡単に実装できるようになりました。議論を始める前に、次のことに注意する必要があります:

HTML5 では、フォーム コントロールは、それが属する 1 つ以上のフォームの外側に存在できます。したがって、フィールドセット、ラベル、入力などのフォーム コントロールには、フォーム コントロールが属するフォームを識別するフォーム属性が追加されました。

HTML5

の :

1. form 要素自体に、autocomplete と novalidate という 2 つの新しい属性が追加されます。 autocomplete 属性は「ドロップダウン提案リスト」機能を有効にするために使用され、novalidate 属性はフォーム検証機能をオフにするために使用されます。これはテスト中に役立ちます。

2. fieldset 要素は、disable、name、form の 3 つの新しい属性を追加します。 disable 属性はフィールドセットを無効にするために使用され、name 属性はフィールドセットの名前を設定するために使用され、form 属性の値はフィールドセットが属する 1 つ以上のフォームの ID です。 fieldset がフォームの外側に配置されている場合は、fieldset を 1 つ以上のフォームに正しく関連付けることができるように、fieldset タグの form 属性を設定する必要があります。

3. for 属性に加えて、label 要素は form 属性のみを追加します。ここで言及する価値があるのは、これまであまり気付かなかった for 属性です。 for 属性は、ラベルにアタッチされたフォーム コントロールを指定するために使用されます。これにより、ラベルがクリックされると、アタッチされたフォーム コントロールがフォーカスを取得します。例:

コードをコピーします

コードは次のとおりです:

< label for="name">クリックしてください

[クリックしてください] をクリックすると、次の入力ボックスがフォーカスされます。

4. input 要素には、フォームの使いやすさを向上させるためにいくつかの新しいタイプと属性が導入されています。これらの新しい入力タイプは、データの整理と分類に非常に役立ちますが、残念ながら、これらすべてを適切にサポートするブラウザはありません。
元のボタン、テキスト、送信、チェックボックス、ラジオ、選択、パスワードのタイプに加えて、HTML5 では次の新しい入力タイプが追加されました:

色: カラー
さまざまな日付: 日付、日時、ローカル日時、月、週、時刻
電子メール: 電子メール
数値: 数値
範囲: 範囲
検索: 検索
電話: 電話
URL タイプ: URL

次の例を実行して、さまざまなブラウザのサポートを確認できます:

コードをコピーします

コードは次のとおりです。次のように:

好きな色を選択してください:
誕生日:
誕生日 (日付と時刻):
誕生日 (日付と時刻) :
誕生日 (月と年):
時間を選択します:
週を選択します:
数量 ( 1 と 5 の間):
数量(1 と 10 の間):
Google 検索:
電話番号:
ホームページを追加します:
電子メール:


新しく追加された入力属性は次のとおりです:
autocomplete: 以前に入力された情報を自動的に表示し、値「on」または「off」を取得します。テキスト、検索、URL、電話番号、電子メール、パスワード、日付ピッカー、範囲、および色のタイプに適用されます。

autofocus: ページが読み込まれた後、自動的にフォーカスを取得します。
form: 入力が属するフォームを指定します。複数指定できます。
formaction: フォームの送信後にこの入力を処理するページ (URL) またはファイルを指定します。
formenctype: フォームの送信後にデータをエンコードする方法を指定します。
formmethod: フォーム データを送信するための HTTP メソッドを指定します。これは、対応するフォームの HTTP メソッドをオーバーライドします。
formnovalidate: 送信前にデータの有効性をチェックしません。
formtarget: フォームの送信後に応答コンテンツを表示する場所を指定します。
高さ、幅: 入力ボックスの長さと幅。画像タイプにのみ適用されます。
max, min: 入力値の最大値と最小値。意味のある数値、範囲、日付タイプに適しています。
multiple: 複数の値の入力を許可するかどうか。電子メールとファイルの種類に適用されます。
パターン: 入力値を検証するための正規表現を指定します。テキスト、検索、URL、電話番号、電子メール、パスワードに適しています。
プレースホルダー: 入力前のプロンプト情報。テキスト、検索、URL、電話番号、電子メール、パスワードに適用されます。
必須: 必須項目であるかどうか。必須項目が入力されていない場合、フォームは送信できません。テキスト、検索、URL、電話番号、メールアドレス、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイルタイプ。
step: 自動増加のステップ値を入力します。数値、範囲、日付、日時、ローカル日時、月、時刻、および週のタイプに適用されます。
list: datalist 要素と組み合わせて使用​​する必要がある入力項目の候補リスト。list 属性は次のタイプで使用できます: text、search、url、tel、email、日付、数値、範囲、色を視覚的に検査できます。小さな例を見てみましょう:

コードをコピーします

コードは次のとおりです:

お気に入り

以下各プロパティの使用を試みる例では、別のブラウザで実行して実際の効果を確認できます:

コードをコピー

コードは次のとおりです:

電子メール:
画像:
1980-01-01 より前の日付を入力してください:
2000-01-01 より後の日付を入力してください:
数量 (1 ～ 5):
画像の選択:
国コード:
名:
ユーザー名:
数値:


<入力タイプ="submit" formaction="demo_admin.asp" value="管理者として送信" />

名:

姓:

建议：虽然并不是全浏览器都支持全型，但是鼓動大家使用这新型，因為即浏览器不支持，只不是会退化简单のテキストが入力されました。

参考文献：
W3C の教則：http://www.w3schools.com/html5/default.asp
HTML5官方指导：http://dev.w3.org/html5/html-author/
不错的一指导网站：http://html5doctor.com/
HTML5中文教程：http://www.html5china.com/
一不错的フロントエンド博客：http://www.pjhome.net/default.asp?cateID= 1
JS 操作表の関連知識:http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html