HTML5はWhatWG（Web HyperText Application Technology Working Group）によって開始されました。最初の名前はWebアプリケーション1.0でした。この標準は、Webフォーム2.0標準を吸収し、W3C組織に採用され、次世代のHTML5標準に合併しました。
序文
今日の最も広範なプログラミング言語を持つ言語として、HTML言語には、使いやすく、高速で、マルチブラウジングプラットフォームの互換性の特徴があります。ただし、時代の進行により、HTML標準は停滞しています。今回は、まだ開発中のHTML5標準の更新は、このマークアップ言語に新しい活力をもたらしたと言えます。この記事では、HTML5のWebフォーム2.0、つまりフォームパーツに焦点を当てます。
フォームは、Webページの一般的なコントロール（セット）です。 Webサイトの登録とログインからエンタープライズデータ管理システムへ、基本的にフォームがあります。フォームが非常に重要である理由は、主に、それらが多数のユーザーとWebバックグラウンドデータを更新および対話するタスクに責任があるためです。 Web開発者は、Webフォームを愛し、嫌うと言えます。彼らはデータを収集して整理するという便利な機能が大好きで、機能を大部分が嫌いです。入力型チェック、フォーム検証、エラープロンプトなど、最終Webサイトユーザーで普通に見える一部の機能は、すべての開発者がJavaScriptとDOMプログラミングを使用して、これらの自然に必要な機能ポイントを満たすために多くの努力を費やす必要があります。 Ajaxの人気により、Dojo、Yuiなどの一部のJavaScriptツールライブラリは、開発者の負担を軽減するために便利なJavaScriptウィジェットまたはAPIを提供しています。
HTML5 Web Forms 2.0は、現在のWebフォームの包括的な改善です。シンプルで使いやすい機能を維持しながら、ユーザーのニーズを満たすために多くの組み込みのコントロールまたはコントロール属性を追加し、開発者のプログラミングを削減します。私の意見では、HTML5は主に以下の側面で現在のWebフォームを改善しました。
<入力型= url> </input><入力型=電子メール> </input>
<入力型=日付> </input>
<データ= http：// domain/getmyoptions> </select>を選択します
<入力型=テキスト必須> </input><入力タイプ=数値min = 10 max = 100> </input>
<提出><field name = name index = 0> peter </field>
<フィールド名=パスワードインデックス= 0>パスワード</field>
</submission>
HTML5の新しいフォームシステムを使用して、ユーザー名、パスワード、生年月日、機密性の問題などを含む簡単なユーザー登録インターフェイスを作成します。コードは次のとおりです。
<！ Doctype html> <html> <head> <style> p label {width：180px;フロート：左;テキストアライグ：右;パディング・ライト：10px}テーブル{マージン左：80px}テーブルTD {border-bottom：1px solid #cccccccccccccccccccccccccck} input.submit {marve-left：80px} </style> </head> <body> <form action = '/Register' enctype =アプリケーション/x-xml登録）</label> <入力名= 'name'必須タイプ= '電子メール'> </input> </p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <padsbore> 'password'> password </label> <input name = 'password'必須タイプ= 'パスワード> </input> </p> <p> <ラベル='誕生日 ' for = 'gender'>国籍</label> <name = 'country' data = 'countries.xml'> </select> </p> <p> <ラベル= 'photo'> personal avatar </label> <入力タイプ= 'name =' photo 'Accept =' image/*'/> </p> <table> <td> <butth </butt> </butt> </butt> </butt> </puttin <td>回答</td> <td> </td> </head> <tr id = questionid Repeat =テンプレートリピートスタート= 1リピート - スタート= 1リピートマックス= 3> <td> <入力タイプ=テキスト名=質問[質問] .Q> </td> <td> <入力タイプ=テキスト名=質問type = delete> delete </button> </td> </tr> </table> <p> <入力タイプ= 'submit' value = 'send' class = 'submit'/> </p> </form> </body> </html>> </html>HTML5標準はまだ開発中であるため、さまざまなブラウザがHTML5機能を非常に限られています。その中で、オペラはそれをより良い形でサポートしています。この例は、Opera9で正常に実行されます。レンダリングは次のとおりです。
この例では、電子メールタイプの入力ボックス（ID）や日付タイプの入力ボックス（生年月日）など、いくつかの新しいHTML5フォーム要素を使用しています。また、複製モデルを使用して、ユーザーをガイドして機密性の問題を埋めます。ファイルタイプを制限することにより、パーソナライズされたアバターのアップロードでは、ユーザーは標準を満たすコンテンツをアップロードするための写真を選択できます。国籍のユーザー選択のためのドロップダウン選択ボックスは、アウトリーチデータソースの形で使用されます。アウトリーチデータソースはcoutries.xmlを使用し、コンテンツは次のとおりです。
<xmlns = http：//www.w3.org/1999/xhtml> <option> china </option> <option> Japan </option> <option> korea </option> </select>
フォームのenctypeは、Application/x-www-form+xml、つまりHTML5 XMLの提出です。したがって、フォーム検証が渡されると、フォームコンテンツはXMLで提出されます。また、ID入力ボックスに値がない場合、または非エメイルタイプの文字列が入力された場合、フォームを送信しようとすると、ブラウザに組み込まれたエラーメッセージが表示されます。
フォームコントロールへのHTML5の更新は間違いなく非常にエキサイティングです。この記事では、フォームのいくつかの新機能について説明しており、いくつかの新機能も非常にエキサイティングです。標準の詳細な開発とHTML5のブラウザサポートのさらなる改善により、シンプルで使いやすいフォームを設計する作業は非常に簡単になると思います。