この記事では、HTML5を使用してフォームを検証する方法を紹介します。これは非常に単純ですが、非常に効果的な方法です。

以前はJavascriptでフォームを検証していましたが、HTML5が入力タグと選択タグに追加した属性を使用して検証できるようになりました。非常に簡単に聞こえますが、インターフェイスはプロの検証ライブラリほど美しくないため、実際にはまだほとんど使用していません。

1.HTML5で必要なデータ入力

ユーザーに入力ボックスへのデータの入力を要求するには、 require属性を使用します。これで、意図的にフォームを送信すると、そのボックスにデータを入力するように通知されます。

 <form> <input type="text" required /><br /> <input type="submit" value="Submit now" /> </form>

2.HTLM5を使用してメールアドレスを入力する必要があります

ユーザーに電子メール形式で特定のセルを入力するように強制する場合は、 input type="email"タグを使用します。

 <form> <input type="email" required /> <br /> <input type="submit" value="Submit Now!"> </form>

または、次のようにpattern属性を使用することもできます。

 <form> <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/" required /> <br /> <input type="submit" value="Submit Now!"> </form>

どちらの方法を使用する必要がありますか？

実際、正しい結果が得られる限り、どのような方法でも使用できます。ただし、競合が発生しやすいため、両方を同時に使用しないでください。

3.HTML5でWebサイトのURLを入力するように要求します

入力タグは非常に魔法のようで、URLタイプを含む多くの異なるカテゴリを持つタイプ属性を持っています。

URLを検証するには、次の方法を使用します。

 <form> <input type="url" required /> <input type="submit" value="Submit Now!"> </form>

または、パターンを使用することもできます。

 <form> <input type="url" pattern="https?://.+" required /> <input type="submit" value="Submit Now!"> </form>

4.HTML5で必要な数値入力

input type="number"タグを使用すると、ユーザーは数値を入力できます。これは、さらに2つの最小値と最大値を提供するため、非常に優れた方法です。

次の例は、数値入力が必要なデータフォームです。

 <form> <input type="number" required> <input type="submit" value="Submit Now!"> </form>

ここでは、最小値と最大値の2つを制限します。その範囲外の数値を入力することはできません：

 <form> <input type="number" min="10" max="20" required> <input type="submit" value="Submit Now!"> </form>

クリックするたびに1以外のジャンプで値を変更する場合は、step属性を使用します。

 <form> <input type="number" min="10" max="20" step="2" value="16" required> <input type="submit" value="Submit Now!"> </form>

上記は、HTML5を使用してフォームデータを検証するいくつかの方法です。この記事は比較的単純ですが、HTML5の基本のいくつかを理解するのにも役立ちます。次の投稿でお会いしましょう。