HTML5強化された要素の中で、最も注目に値するものはフォーム要素です。 HTML5では、フォームが大幅にトリミングされており、以前はJavaScriptエンコードを必要としていたいくつかの機能をコーディングなしで簡単に実装できるようになりました。ディスカッションを開始する前に、注意すべきことの1つ
HTML5では、フォームコントロールは、属する1つ以上のフォームの外側にあります。したがって、フィールドセット、ラベル、入力などのフォームコントロールには、フォームコントロールが属するフォームを識別するためのフォーム属性がすべて追加されています。 HTML5で：1.フォーム要素自体は、AutoCompleteとNovalidateの2つの新しい属性を追加します。 AutoCompleteプロパティは、ドロップダウン提案リスト機能を有効にするために使用され、Novalidateプロパティは、テスト時に役立つフォーム検証機能をオフにするために使用されます。
2。フィールドセット要素は、無効、名前、フォームの3つの新しい属性を追加します。 DisableプロパティはFieldsetの無効化に使用され、名前プロパティはFieldsetの名前を設定するために使用され、Formプロパティの値は、Fieldsetが属する1つ以上のフォームのIDです。前述のように、フィールドセットがフォームの外側に配置された場合、フィールドセットを1つ以上のフォームに正しく関連付けることができるように、フィールドセットタグのフォームプロパティを設定する必要があります。
3。属性に加えて、ラベル要素はフォーム属性のみを追加します。ここで、私がこれまでに注意を払ったことがない属性のための属性について言及する価値があります。属性は、ラベルに接続されたフォームコントロールを指定するために使用されます。このように、このラベルをクリックすると、添付のフォームコントロールは次のようなフォーカスを獲得します。
<form action = "demo_form.asp" id = "form1">
<ラベル= "name">クリック</label> <入力id = "name" type = "text"> </input>
<入力型= "submit" value = "submit" />
</form>
[私をクリック]をクリックすると、次の入力ボックスがフォーカスを獲得します。
4.入力要素は、フォームの使いやすさを高めるためのいくつかの新しいタイプと属性を導入します。これらの新しい入力タイプは、データの整理と分類に非常に役立ちます。残念ながら、これらすべてのタイプをうまくサポートできるブラウザはありません。
元のボタンに加えて、テキスト、送信、チェックボックス、ラジオ、選択、パスワード、HTML5は次の新しい入力タイプを追加します。
色：色さまざまな日付：日付、DateTime、DateTime-Local、Month、Week、Time
メール：電子メール
番号：番号
範囲
検索：検索
電話：電話
URLタイプ：URL
次の例を実行して、さまざまなブラウザのサポートステータスを表示できます。
<form action = "demo_form.asp">
お気に入りの色を選択してください：<入力タイプ= "Color" name = "favcolor" />
誕生日：<入力タイプ= "date" name = "bday" />
誕生日（日付と時刻）：<入力型= "datetime" name = "bdaytime" />
誕生日（日付と時刻）：<入力タイプ= "datetime-local" name = "bdaytime" />
誕生日（月と年）：<入力タイプ= "月" name = "bdaymonth" />
[時間]を選択します：<入力タイプ= "time" name = "usr_time" />
1週間を選択します：<input type = "week" name = "week_year" />
数量（1〜5）：<入力型= "number" name = "数量" min = "1" max = "5" />
数量（1〜10）：<入力タイプ= "範囲" name = "points" min = "1" max = "10" />
Googleの検索：<入力タイプ= "search" name = "googleSearch" />
電話：<入力タイプ= "tel" name = "usrtel" />
ホームページを追加：<入力タイプ= "url" name = "Homepage" />
電子メール：<入力タイプ= "email" name = "usremail" />
<入力src = "submitbutton.png" type = "submit" />
</form>
以下は、新しく追加された入力プロパティです。
AutoComplete ：以前に入力した情報を自動的に表示し、値をオンまたはオフにします。テキスト、検索、URL、電話、電子メール、パスワード、デートピッカー、範囲、および色の種類に適用されます。オートフォーカス：ページが読み込まれた後、自動的にフォーカスを取得します。フォーム：入力が属するフォームを指定します。形式：フォームが送信された後にこの入力を処理するページ（URL）またはファイルを指定します。 Formenctype ：フォームが送信された後にデータのエンコード方法を指定します。 FormMethod ：フォームデータを送信するためのHTTPメソッドを指定します。これにより、対応するフォームのHTTPメソッドがオーバーライドされます。 FormNoValidate ：データの有効性は、提出前にチェックされません。 FormTarget ：提出後にフォームのコンテンツを表示する場所を指定します。高さ、幅：入力ボックスの長さと幅、画像タイプにのみ適用されます。 Max、Min ：入力値の最大値と最小値。意味のある数、範囲、日付タイプに適用できます。複数：電子メールとファイルの種類に適した複数の値を入力するかどうか。パターン：テキスト、検索、URL、電話、電子メール、パスワードに適用される入力値を確認するための正規表現を指定します。プレースホルダー：入力前の迅速な情報、テキスト、検索、URL、電話、電子メール、パスワードに適用されます。必須：必須であるかどうか、必要でない場合、フォームを提出できません。テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイルタイプに適用されます。ステップ：自動的に成長しているときにステップ値を入力して、数、範囲、日付、日付、DateTime、DateTime-Local、月、時間、週のタイプに適しています。リスト：入力項目の候補リストは、データリストの要素と組み合わせて使用する必要があります。リスト属性は、これらのタイプで使用できます：テキスト、検索、URL、電話、電子メール、日付、数字、範囲、および色。 Firefoxで有効であると推定されています。小さな例を参照してください：<FieldSet>
<legend>お気に入り</legend>
<p>
<label>
<input type = "text" name = "favorites" list = "options">
<データリストid = "options">
<オプション値= "a">
<オプション値= "b">
<オプション値= "c">
</datalist>
</label>
</p>
</fieldset>
次の例では、さまざまなプロパティを使用しようとします。これは、さまざまなブラウザで実行して実際の効果を表示できます。
<form action = "demo_form.asp">
電子メール：<入力タイプ= "email" name = "email" autocomplete = "on" />
画像：<入力型= "画像" src = "img_submit.gif"/>
1980-01-01より前に日付を入力します：<入力タイプ= "date" name = "bday" max = "1979-12-31">
2000-01-01以降の日付を入力します
数量（1〜5）：<入力型= "number" name = "数量" min = "1" max = "5" />
画像を選択：<入力タイプ= "ファイル" name = "img"倍数= "倍数" />
国コード：<入力タイプ= "テキスト" name = "country_code" pattern = "[a-za-z] {3}" />
名：<入力タイプ= "テキスト" name = "fname" placeholder = "first name" />
ユーザー名：<入力型= "テキスト" name = "usrname"必須= "必須" />
番号：<入力型= "number" name = "points" step = "3" />
<入力型= "submit" />
<input type = "submit" format = "demo_admin.asp" value = "admin" />>
<input type = "submit" formulactype = "multipart/form-data" value = "multipart/form-data"/>として送信
<入力型= "送信" formula = "post" format = "demo_post.asp" value = "post" />を使用して送信します
<input type = "submit" formnovalidate = "formnovalidate" value = "検証なしで送信" />
<input type = "submit" formtarget = "_ blank" value = "新しいウィンドウに送信" />
</form>
<form action = "demo_form.asp" id = "form1">
名：<入力タイプ= "テキスト" name = "fname" />
<入力型= "submit" value = "submit" />
</form>
姓：<入力タイプ= "テキスト" name = "lname" form = "form1" />
提案：すべてのブラウザがすべてのタイプをサポートしているわけではありませんが、ブラウザがサポートしていなくても、単純なテキスト入力ボックスに退化するだけなので、これらの新しいタイプを使用することをお勧めします。実用的なリファレンス： 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.vevb.com/xugang/archive/2010/08/12/1798005.html