In diesem Artikel zeige ich Ihnen, wie Sie ein Formular mit HTML5 validieren, dies ist ein ziemlich einfacher, aber sehr effektiver Weg.

In der Vergangenheit haben wir Formulare mit Javascript validiert, aber jetzt können Sie dies mit den Attributen tun, die HTML5 den Eingabe- und Auswahl-Tags hinzugefügt hat. Obwohl es sehr einfach klingt, verwenden wir es in Wirklichkeit immer noch selten, weil die Oberfläche nicht so schön ist wie bei professionellen Validierungsbibliotheken.

1. Erforderliche Dateneingabe in HTML5

Um den Benutzer aufzufordern, Daten in das Eingabefeld einzugeben, verwenden wir das require -Attribut. Wenn Sie das Formular absichtlich absenden, werden Sie aufgefordert, Daten in dieses Feld einzugeben.

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

2. Erfordert die Eingabe einer E-Mail-Adresse mit HTLM5

Wenn Sie den Benutzer zwingen möchten, eine bestimmte Zelle mit dem E-Mail-Format einzugeben, verwenden Sie das Tag input type="email" .

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

Alternativ können Sie das Musterattribut auch wie folgt verwenden:

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

Welcher Weg soll genutzt werden?

Tatsächlich können Sie jede Methode verwenden, solange sie das richtige Ergebnis liefert. Verwenden Sie jedoch nicht beide gleichzeitig, da dies leicht zu Konflikten führt.

3. Aufforderung zur Eingabe der Website-URL in HTML5

Das Input-Tag ist sehr magisch, es hat ein Typattribut mit vielen verschiedenen Kategorien, einschließlich URL-Typen.

Um die URL zu validieren, gehen wir wie folgt vor:

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

Alternativ können Sie auch Muster verwenden.

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

4. numerische Eingabe in HTML5 erforderlich

Das Tag input type="number" ermöglicht es dem Benutzer, eine Zahl einzugeben. Dies ist eine ziemlich gute Methode, da sie uns zwei weitere Min- und Max-Werte liefert.

Das folgende Beispiel ist ein Datenformular mit einer erforderlichen Zahleneingabe:

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

Hier begrenzen wir zwei Werte min und max, Sie können keine Zahlen außerhalb des Bereichs eingeben:

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

Wenn Sie möchten, dass jeder Klick den Wert mit einem anderen Sprung als 1 ändert, verwenden Sie das Step-Attribut:

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

Oben sind einige Möglichkeiten zur Verwendung von HTML5 zum Validieren von Daten aus Formularen aufgeführt. Dieser Artikel ist relativ einfach, wird Ihnen aber auch dabei helfen, einige der Grundlagen von HTML5 zu verstehen. Wir sehen uns im nächsten Beitrag.