Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Client side HTML form validation without JavaScript
<!DOCTYPE html>
<html lang="en" >
<meta charset="UTF-8">
<title>HTML Form Validation</title>
body {
font-family: sans-serif;
legend {
padding: 0 10px;
fieldset {
padding: 30px;
label {
display: inline-block;
width: 100px;
form div {
margin-bottom: 10px;
input {
width: 200px;
padding: 5px;
border: 2px solid #eee;
border-radius: 4px;
input:in-range {
border-color: green;
input:out-of-range {
border-color: red;
<legend>HTML Form Validation</legend>
<label for="email">Email: <abbr title="required" aria-label="required">*</abbr></label>
<input id="email" type="email" name="email" required>
<label for="username">Username: <abbr title="required" aria-label="required">*</abbr></label>
<input id="username" type="text" name="username" required pattern="^[a-z0-9]{3,15}$" title="Username may only contain letters and numbers">
<label for="password">Password: <abbr title="required" aria-label="required">*</abbr></label>
<input id="password" type="password" name="password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,25}$">
<label for="url">URL: <abbr title="required" aria-label="required">*</abbr></label>
<input id="url" type="url" name="url" required pattern="https?://.+">
<label for="age">Age: <abbr title="required" aria-label="required">*</abbr></label>
<input id="age" type="number" name="age" required min="18" max="36">
<button type="submit">Submit</button>

This comment has been minimized.

Copy link
Owner Author

@w3collective w3collective commented Feb 18, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment