実際、HTML5の形式の特性は、昨年知っておくべきHTML5の第28条の特徴、ヒント、テクニックに導入されました。ただし、この部分の導入がビデオの形で表示されることは少し残念です。実際、ビデオである場合は大丈夫です。重要なのはToutubeビデオです。これは、視聴する必要があります。まあ、綿密な人である私のような良い市民は、客室乗務員を除いて他の状況でだまされないほど怠け者であるため、ビデオのこの部分に表示されるコンテンツは実際に空です。
したがって、ここにコンテンツのこの部分を改善するパッチがあります。この記事の一般的な内容は次のとおりです。
＃<入力型=番号 />
＃<入力型= range />
＃<入力タイプ=日付 />およびその他の時間セレクターコントロール
＃<入力タイプ= Color /> Color Selector
＃<入力タイプ=検索 />
＃<Datalist>要素とリスト属性
＃HTML5フォーム検証とCSS3の曖昧な関係
type = numberのHTMLフォーム要素を使用すると、キーを押してテキストボックスの値を変更できます。この効果は、次のようなWindowsシステムでよく見られます。
怠zyな人は、椅子の上に横になり、座ってキーボードを押すよりもマウスをクリックします。したがって、キーボードの入力と比較して、クリックと入力の市場もあります。これが、HTML5フォームに数値選択制御がある理由です。
大まかなHTMLコードは次のとおりです。
人数：<入力タイプ=番号値= 1 />
ドットに適切な幅の制限を追加する場合、Chrome（推定UIはシステムテーマに関連している）の効果は次のとおりです。
現在サポートされているブラウザはOpera 11ですが、Operaの下の値を追加および減算するボタンは、少し曲がって抽象的なスタイルを持っています。
ここをクリックしてハード：html5フォームnubmerコントロールデモ
2。型=範囲範囲中国の意味値範囲、そして次のスクリーンショットに示すように、この種の効果はウィンドウシステムでも一般的です。
HTML5には同様の効果を持つ入力コントロールがあります。そのタイプを範囲として定義するだけなので、とても簡単です！
ドラッグ範囲：<入力タイプ=範囲値= 50 />
デフォルトでは、値範囲は0〜100なので、値= 50の場合、ドラッグバーはエリア範囲の中央にあります。下の図に示すように：
私のFirefoxは現在バージョン3.6であり、この機能はまだサポートされていません。ただし、Chrome、Opera、およびSafari 4にはすべて効果がありますが、結局同じ父親ではないため、外観にはいくつかの違いがあるため、これらの違いはここには示されません。
ここをクリックしてHTML5フォームレンジコントロールデモ
28のHTML5の最後の項目、最初に言及された機能、トリック、テクニック、つまり28番目の項目の優れた効果の例は、MIN、MAX属性、およびステップ属性を含むレンジコントロールに実装される効果です。これは、観察して学習する価値のある例です。この例Demoについては、ここをクリックして厳しくクリックしてください。
3。Type=日付およびその他の時間制御これは時間セレクター制御です。長い時間を選択した場合は、JSプラグインを気にしないでください。日付属性を持っているだけで、コーヒー中に隣の床を掃除した老婦人とコミュニケーションをとることができます。あなたがそれを信じないなら、見てください：
[日付]を選択：<入力タイプ=日付値= 2011-01-04 />
その結果、オペラなどのサポートされているブラウザの下で、次の効果が利用可能です。
これは生きていない時間セレクターです！
彼の醜い外観は別として、他の人はとても楽しいです。
日付の種類だけでなく、時間の種類だけでなく、日付、週、月もまた、時間のクラススペース。
明らかに、名前が示すように、日付のタイプは日付を選択すること、時間の種類は時間を選択すること、日付と時刻を選択すること、週は週を選択すること、月は月の選択に気付くことです。
ここをクリックしてHTML5フォームタイムクラススペースデモ
私はそれをテストし、Safariをバージョン5.0にアップグレードしました。現在、Opera Browserはこのタイプの時間制御をサポートしていることがわかりました。効果は次のとおりです。
type = timeの場合、効果はtype = numberに多少似ています。クリックしてイベントを切り替えることができます。デフォルトでは、すべてのポイントが1回、時間は1分間切り替えられ、マウスは長く押され、マウスも有効です。
[時間]を選択します：<入力タイプ=時間値= 22：52 />
選択時間を選択：
Type = Weekでは、マウスが通り過ぎると、各ラインの日付の背景色（1週間を表します）が、下の図に示すように、集合的に暗くなります。
type =月の場合、下の図に示すように、月全体の背景色が暗くなります。
2つを選択した後のデータ値は次のとおりです。
4。Type= Colorこれはカラーセレクターコントロールであり、非常に強力です。次のように、非常に簡単に使用できます。
色を選択：<入力タイプ=色値=＃34538B />
Operaブラウザのデフォルト効果は次のとおりです。
デフォルトの入力コントロールには、＃34538Bの丸い色の背景があります。クリックしてドロップダウンすると、結果はWebカラーパネルを拭いて展開します。
他の...単語で下のボタンをクリックしてください。その結果、ゴージャスな色の選択パネルが展開されました。
かっこいいです、それはとても使いやすいです、ああ。
ここをクリックしてハード：HTML5フォームカラー選択コントロールデモ
5。Type=検索検索機能です。検索タイプの入力ボックスには、検索拡大ガラスアイコンが自動的にあることを覚えています。しかし、私はこのテストを見ませんでした（それは夢の中ですか）、この属性のUI効果は非常に控えめで寒いです。 WebKitコアブラウザでは、値がある場合、以下に示すように、入力ボックスの後にセクシーなクロスがあります。
私は他に何か特別なことを見つけられなかったので、これについて言及したばかりです。ここをクリックしてHTML5検索タイプコントロールデモ
6。<Datalist>要素とリスト属性データリストは、データリストのプルダウン効果を実装する非常にまれな要素であり、UIスタイルはオートコンプリートに少し似ています。
簡単な例を示すには：
次のHTMLコード：
リスト：<入力タイプ=テキストリスト= myDataプレースホルダー=人気のある映画のランキング/> <データリストid = mydata> <option label = top1 value = let the bullets fly> <option label = top2 value = youの場合は2> <オプションラベル=トップ3値=笑いjianghu> <オプションラベル= Zhao
結果は、入力ボックスがフォーカスを取得した後に次のとおりです。
このこと、この属性は良いことです。歩き回って、最新のオペラブラウザの下でのみ効果があることを確認しないでください。他のブラウザが将来それをサポートするかどうかは不明です。
HTML5を使用すると、次のようなCSS3のセレクター部分にもいくつかの新しい擬似クラスが登場しています。
たとえば、次のCSSおよびHTMLコード：
input [type = text]：focus：valid、input [type = email]：focus：foluct、input [type = number]：focus：in-range {outline：2px green solid; } input [type = text]：focus：invalid、input [type = email]：focus：invalid、input [type = number]：focus：of-of-range {outline：2px red solid; }<p>通常の入力ボックス：<入力タイプ=テキスト />> < /p> <p>メール入力ボックス：<入力タイプ=電子メール /> < /p> <p>数値入力ボックス：<入力タイプ= min = 0 max = 10 />（0〜10）< /p>
例として、メール入力ボックスを使用してください。入力テキストが法的メールボックスではない場合、入力ボックスの概要に赤い警告ボーダーが表示されます。
キャラクターの入力により、メールボックスが合法である場合、ボーダーレッドは安全な緑色の境界線に磨かれます。
検証作業、および関連スタイルのディスプレイなどはすべて、ブラウザとCSSによって完了します。私は10年後にそれについて考えました、すごい、それはウェブです、すべてがとても美しいです。
必要な、オートフォーカス、プレースホルダー、パターンなどのHTML5フォームの他の機能が、28のHTML5の機能、ヒント、テクニックに紹介されていることが示され、説明されているので、ここで詳しく説明しません。
HTML5に興味がある場合は、28のことに関する前の記事を個人的に読むことをお勧めします。この記事の内容は、さらなる改善であると言え、特定のポイント（HTML5フォームの他の新機能）を補完することができます。前者は大したことであり、この記事はせいぜい高レベルの醤油です。
最後に、それはすべてHTML5のことであるため、ブラウザがしばらく飛行させたとしても、今やろうとしているブラウザがIEである場合、これらの人目を引く効果はわかりません。したがって、最新のブラウザの最新バージョンに移動することをお勧めします。
参照記事：html5の新しいフォーム機能：http：//dev.opera.com/articles/view/new-form-features-in-html5/