HTML5フォームの検証とフローティング入力ラベルとは何かを理解する

公開: 2016-05-16

フォーム検証の実装は、悪意のあるユーザーがフォームフィールドにぎこちないテキストを入力するのを防ぐ上で重要な役割を果たします。 また、経験の浅いユーザーがフォームに間違った情報を誤って入力することを制限します。

もちろん、安全でない方法でユーザーから誤ったデータを収集することは望ましくありません。 したがって、フォームの検証ルールを定義することが不可欠です。

何年もの間、クライアント側でフォーム検証を実装するために、複雑でTL; DR（つまり長すぎる;読み取らなかった）JavaScriptコードを使用してきました。 ありがたいことに、「HTML5フォーム検証」のリリースにより、最小限のJavaScriptでフォームに検証を追加できるようになりました。

最新のHTMLバージョンのリリースにはいくつかの利点がありますが、最も重要なのは、複雑なJS（JavaScriptの略）検証コードを記述せずにフォームを検証するために不可欠な新しい入力フィールドと属性が多数付属していることです。

ただし、ユーザーはフォームに入力するときに簡単にイライラする可能性があることを忘れないでください。特に、入力したデータが間違っていることを知った場合は、フラストレーションが大幅に高まる可能性があります。 しかし、HTML5のおかげで、フローティング入力ラベルを追加すると、ユーザーがフォームに入力すると同時にフォームデータを検証できます。 このようにして、ユーザーは入力フィールドに間違いがあった場合にすぐにわかります。

たとえば、以下はMatt SmithによってDribbleに投稿された画像で、フォームに適用したときにフローティングラベルパターンがどのように機能するかを示しています。

How the floating label pattern works

この投稿では、HTML5フォームに検証を追加するときにフローティング入力ラベルを実装する方法について説明します。

しかし、始める前に

ほとんどの人は、最初にHTML5フォームを検証するプロセスを知りたいと思うかもしれません。 結局のところ、すべての人がHTML5フォームの検証コードを書いた経験があるわけではありません。 また、HTML5で新しく導入された入力フィールドと属性についての知識がない可能性もあります。

HTML5フォーム検証の詳細な概要

フォームの検証を計画している場合は、最初にサーバー側の検証から始めることをお勧めします。 また、優れたWebデザイナーの場合は、クライアント側の検証を追加して、ユーザーがフォームに正しいデータを入力しているかどうかに関係なく、ユーザーが即座にフィードバックを得ることができるようにします。 たとえば、ユーザーが[メールアドレス]フィールドにデータを入力しているときにすぐにフィードバックを提供すると、入力したメールアドレスが有効であることがユーザーに通知されます。

HTML5の優れた機能の1つは、スクリプトに依存せずにクライアント側の検証を実装できることです。 むしろ、フォーム要素の「検証属性」を利用することで、このようなタスクを実行できます。 最も重要なことは、入力フィールドに「必須」属性を追加するだけで、残りはブラウザによって処理されることです。

入力フィールドに検証を追加するために必要な属性の使用を説明する例を次に示します。

[php]
名前：<input type = "text" name = "yourname" required>
[/ php]

上記のコード行により、ブラウザは、名前INPUTフィールドを必須と見なす必要があることを認識します（つまり、空白のままにすることはできません）。

INPUT field cannot be left blank

ご覧のとおり、「あなたの名前」入力フィールドに対応するテキストボックスに赤いマーカーが表示されます。 ただし、名前入力フィールドにテキストが入力されるとすぐに、マーカーはチェックマークに変わり、入力された値が有効であることを示します。

<input type="text"> （つまり、テキスト入力タイプ）とは別に、HTML5は、検索、電子メール、電話、日時などのいくつかの新しい入力オプションをサポートするようになりました。簡単に言えば、HTML5を使用すると、次のコード行を記述できます。 ：

[php]
<input type = "text" name = "email">
[/ php]

次のようなものに：

[php]
<input type = "email" name = "email">
[/ php]

デスクトップブラウザは、標準のテキストフィールドと同じように上記のコードをレンダリングします。

もう1つ重要なことは、コンテンツがなくても、CodePenデモでrequiredやinput type =” email”などの属性を入力しようとすると、エラーが発生することです。有効な電子メールアドレスなしで[送信]ボタンをクリックしたときのメッセージ：

Error message

上で説明した例では、ブラウザがデフォルトでエラーメッセージを表示していることがわかります。 しかし、独自の（つまりカスタムの）検証ルールを入力値に適用したい場合はどうでしょうか？ これは、正規表現パターンが役立つところです。

RegExパターンを理解する

abc @aのようなメールアドレスを入力するときにパターンを見たことがあるかもしれません。 言うまでもなく、ユーザーに実際の電子メールアドレスを入力してもらいたいと思うでしょう。 また、データと一致する独自のパターンを指定することで、入力した値を検証するのに役立ちます。 たとえば、電子メールが最後に3文字以上を含むパターンと一致することを確認できます。 そのためには、「パターン属性」と正規表現（RegEx）を使用する必要があります。

RegExは基本的に、テキストを解析または操作するために使用される言語です。 ほとんどの場合、正規表現は、テキストデータの形成を改善するために、複雑な操作（検索や置換など）を実行するために使用されます。 今日では、ほとんどすべてのプログラミング言語とスクリプト言語で正規表現が使用されています。 RegExは、次のようにパターン属性を利用して入力タイプにデータを適用することにより、フォームフィールドに入力されたデータを検証するために使用できます。

[php]
<input id = "phone" placeholder = "111-111-1111" title = "電話番号のパターンを伝えるテキスト" required pattern = "[0-9] {3}-[0-9] {3}-[ 0-9] {4} ">
[/ php]

また、検証エラーが発生した場合は、検証エラーとともにタイトル属性を決定して、「フォーマットが間違っています！」以外のメッセージをスローするように選択できます。 以下のコード行を使用します。

[php]
<input type = "email" placeholder = "Email" required pattern = "^ [A-Za-z0-9 ._％+-] + @ [A-Za-z0-9 .-] + \。[A- Za-z] {2、} $ "title ="ここに有効なメールアドレスを入力してください。 ">
[/ php]

入力ごとにばかげたパターンを書く必要はないことを覚えておいてください。 代わりに、多くの場合、必要な属性を特定のタイプのデータに割り当てる必要があります。 たとえば、8を超える数値は次のようになります。

[php]
<input type = "number" min = "8"が必要>
[/ php]

また、すべてのブラウザが利用可能なすべての検証属性をサポートしているわけではないことに注意してください。 たとえば、Firefoxブラウザは「minlength」パターンと互換性がありません。

HTML5フォーム検証を使用する利点

HTML5フォーム検証を実装する最大の利点は、即時のフィードバックです。 ほとんどの場合、ユーザーがフォームの一部のフィールドに入力している間、入力された値が有効かどうかを通知するために、ある種の表示が強調表示されます。

Indication will be highlighted while users fill out some field

ここで、テキストボックスに何かを入力すると、境界線の色が次のように緑色に変わります。

The border color changes to green

ただし、ご覧のとおり、このアプローチには欠点があります。 「名」フィールドに無効な（または不完全な）値を追加した場合でも、ユーザーは値が正しいことを示します。 おそらく、コードに:invalid:not(:empty)を追加することを考えるかもしれません。 残念ながら、このようなロジックは、通常、フォーム要素が空であると見なされるため、ブラウザでは機能しません。

何をすべきか疑問に思いますか？

次のように、コードに「：placeholder-shown」という新しい疑似セレクターを追加してみてください。

[php]
<フォーム>
<ラベル>
<span>名</ span>
<input type = "text" pattern = "。{4、}" placeholder = "" required title = "少なくとも4文字を入力してください。">
</ label>

<button>送信</ button>

</ form>
[/ php]

ただし、ほとんどのブラウザはプレースホルダー表示をサポートしていないようです。そのため、入力フィールドが空かどうかに関係なく、クラスを切り替えるスクリプトを作成することをお勧めします。 同じもののJavaScriptコードは次のとおりです。

[php]
$（ 'input：empty、textarea：empty'）。addClass（ 'empty'）;

$（ 'input'）。keyup（function（）{

if（$（this）.val（）。trim（）！==”）{

$（this）.removeClass（ 'empty'）;

} そうしないと {

$（this）.addClass（ 'empty'）;

}

}）;
[/ php]

注：上記のHTMLマークアップからプレースホルダー要素を削除することを忘れないでください。

上記のコードスニペットをHTML5マークアップと一緒に実行すると、出力は次のようになります。

Code snippet along with HTML5 markup

ご覧のとおり、フィールドに適用された検証が実行されなくなるまで、テキストボックスの色は赤のままです。 また、[送信]をクリックすると、不完全な名前を入力するとエラーメッセージが表示されます。

ただし、ユーザーが完全な文字（3文字を超える文字）を入力するとすぐに、テキストボックスの境界線の色が緑色に変わります。

The color of the text box border changes to green.

HTML5でフローティング入力ラベルを追加するにはどうすればよいですか？

それでは、HTML5フォームを検証するときにフローティング入力ラベルを追加する方法について説明しましょう。 そうすることで、フォームのルックアンドフィールを向上させることができます。 これがHTMLマークアップです。

floatラベルパターンを実装するには、HTMLマークアップの<input>要素のすぐ下にタグをプッシュする必要があります。

[php]
<フォーム>
<ラベル>
<input type = "text" pattern = "。{4、}" required title = "文字は4以上である必要があります。">
<span>あなたの名前</ span>
</ label>
<ラベル>
<input type = "email" required pattern = "^ [A-Za-z0-9 ._％+-] + @ [A-Za-z0-9 .-] + \。[A-Za-z] { 2、} $ "title ="有効なメールアドレスを入力してください。 ">
<span>あなたのメール</ span>
</ label>
<button>送信</ button>

</ form>
[/ php]

CSSは次のようになります。

[css]
ラベル{
位置：相対;
表示：インラインブロック;
}
ラベルスパン{
位置：絶対;
左：20px;
上：-2em;
フォントサイズ：.75em;
カーソル：テキスト;
色：＃f27853;
移行：すべての150msが容易になります。
}
入力{
ボーダー：1pxソリッド＃f2f2f2;
概要：なし;
}
input：focus {
ボーダーカラー：＃d9d9d9;
}
input：valid {
ボーダーカラー：＃42d142;
}
input：invalid {
ボーダーカラー：＃ff8e7a;
}
input.empty {
ボーダーカラー：＃d9d9d9;
}
input.empty + span {
トップ：50％;
変換：translateY（-50％）;
フォントサイズ：1em;
背景：なし;
色：#cccccc;
}
体 {
表示：フレックス;
最小-高さ：100vh;
背景：＃f1f1f1;
font-family： 'Lato'、sans-serif;
フォントサイズ：150％;
}
形 {
マージン：自動;
}

入力、ボタン{
パディング：15px 20px;
border-radius：1px;
ボーダー：2pxソリッド#bdbdbd;
}

ボタン {
ボーダーカラー：＃363636;
背景：＃363636;
色：#FFFFFF;
}
[/ css]

そして最後に、JavaScriptコードを記述します。

[コード]
$（ 'input：empty、textarea：empty'）。addClass（ 'empty'）;
$（ 'input'）。keyup（function（）{
if（$（this）.val（）。trim（）！==”）{
$（this）.removeClass（ 'empty'）;
} そうしないと {
$（this）.addClass（ 'empty'）;
}
}）;
[/コード]

出力：

Output

HTML5でフローティング入力ラベルを使用すると、次のようないくつかの効果を実装できます。

  • HTML5フォームの検証中に、フェードイン/フェードアウト効果のあるアイコンを追加します。
  • 入力したデータが無効な場合は、入力を振ってください。
  • 入力が正しく入力されたら、入力の色を暗くします。
考慮事項

HTML5フォームへの検証の実装に取り​​組むときは、以下に精通している必要があります。

  1. ブラウザのサポート：HTML5フォームは、最新のブラウザとIE10 +で完璧に機能します。 IEバージョン9以前のバージョンは、フォームのスタイル設定を控える検証疑似セレクターをサポートしていませんが、それでも正しく機能します。
  2. 警告：HTML5フォームに検証を適用するときに実行できないことの1つは、検証メッセージのスタイル設定です。 これは、そのような機能がブラウザによって無効にされているためです。

最後の言葉

フォームに検証を実装することは、サイトにセキュリティの層を追加するために重要です。 これは、悪意のあるユーザーがフォームフィールドの値として悪意のあるテキストを追加するのを防ぐためです。 さらに、ユーザーがフォームの検証済み入力フィールドに入力を入力するときに即座にフィードバックを提供することで、ユーザーエクスペリエンスを向上させることができます。 結局のところ、彼らはフォームへの記入を間違えたことを認識するのに時間を費やす必要はありません。 ただし、JavaScriptのみを使用してフォームを検証することは困難な場合があります。 ここで、HTML5フォームの検証が役に立ちます。

HTML5を使用してフォームに検証を適用する場合、複雑なJSコードの長い行を記述する必要はありません。 代わりに、最小限のJavaScriptコーディングでフォーム検証ルールを実装できます。 最も重要なことは、フォームをゴージャスに見せ、ユーザーがフォームの送信を実行できるようにするフローティング入力ラベルなど、HTML5フォーム検証で多くの新機能を利用できることです。