クライアント検証は、Webクライアントプログラムの最も一般的に使用される機能の1つです。 HTML5は、フォーム検証の機能をすでに提供しています。なぜそれが人気がないのかについては、互換性があると推定されており、スタイルはあまりにも醜いです。
以下に、HTMLとCSSのみを使用して、HTML5およびCSS3のフォーム検証を段階的に作成します。
以下は次のとおりです。
ステップ1：検証フィールドとタイプを並べ替えますまず、次のフィールドが必要です。
ユーザーがいくつかの情報を入力した後、ユーザーの情報が正しいかどうかを確認する必要があります。
HTML5の新しい仕様では、入力ボックスは、Tel、電子メール、番号、範囲、色などのさまざまな入力タイプを提供します。これらのタイプは、一般的にデスクトップクライアントにはあまり反映されていません。たとえば、番号はモバイルキーボードの純粋な番号に自動的に切り替わり、電子メールキーボードは@キーボードに自動的に切り替わります。
ステップ2：フォームスタイルを決定しますまた、フォームの最終的なスタイルを決定する必要があります。ここでは、この時期のデモスタイルとしてドリブルのフォームスタイルを見つけました。
ステップ3：テンプレートコード標準のHTML5ステートメントコードを使用します
<！doctype html> <html> <gead> <meta charset = utf-8> <title> html5 form vidalation> </head> <body> </body> </html>ステップ4：フォームを作成します
基本的なフォーマット要素を作成します。ここでは、データをデモンストレーションしないため、フォームはそれを送信しません。
<form action = onsubmit = return false> </form>ステップ5：要素を作成します
テーブル要素には、次の要素構成があります。
ULおよびLI要素は、テーブルユニットの要素とレイアウトを分割するために使用されるタイポグラフィレイアウトに使用されます。ラベルは、フォームのフィールドプロンプトテキストに使用されます。入力はユーザー入力データに使用されます。スパンは、ユーザーフィールドが正しく入力されているかどうかを示すために絵文字を使用します。
<ul> <li> <ラベル= name> furname </label> <入力タイプ=テキストid = name name = name placeholder = name/> <span class = icon-name> </span> < /span> </span> li> </ul>
Form Form HTMLコードComplete Codeは次のとおりです。
ステップ6：スタイルを追加しますフォーム要素の執筆を完了し、そのスタイルを厳しく改善し、より美しく見えるようにします。
ボディ{flex;}フォーム{10％：100％;}マージンボトム：}ラベル{＃333;色：黒い境界線：-moz-placeholder {coler：d4d4d4;} lim {color：＃d4d4d4;} Absolute：10px：}CSSコードは次のようにコードを完了します：
ステップ7：絵文字プロンプトを追加します各フォーム構造に、名前フィールドに<span class = icon-name> </span>ラベルを追加したなど、スパンタグを追加しました。次に、学校のテストフィールドの状態にスタイルを追加します。
li span {block; absolute;