
How to Create HTML5 Form Validations
In this article, you will learn How to Create HTML5 Form Validations.HTML5 Form validation is client-side validation . With the help of the HTML5, we can validate the form with the pattern.
Types of Different Pattern Matching in HTML5
- Letter only
- Number only
- Password
- Mobile no
- URL
Letters Only
<form>
<input type="text" pattern="[A-Za-z]+" title="only letters" required />
<input type="submit">
</form>
Numbers Only
<form>
<input type="text" pattern="[0-9]+" title="numbers only" required />
<input type="submit">
</form>
<form>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="xyz@mail.com" required />
<input type="submit">
</form>
Password
<form>
<input type="password" pattern=".{6,}" title="Six or more characters" required />
<input type="submit">
</form>
Mobile No.
<form>
<input type="tel" pattern="^\d{10}$" title="10 numeric characters only" required />
<input type="submit">
</form>
URL
<form>
<input type="url" pattern="https?://.+" title="https://huboftutorials.com" required />
<input type="submit">
</form>