Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Client side HTML form validation without JavaScript
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML Form Validation</title>
<style>
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:valid,
input:in-range {
border-color: green;
}
input:invalid,
input:out-of-range {
border-color: red;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML Form Validation</legend>
<div>
<label for="email">Email: <abbr title="required" aria-label="required">*</abbr></label>
<input id="email" type="email" name="email" required>
</div>
<div>
<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">
</div>
<div>
<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}$">
</div>
<div>
<label for="url">URL: <abbr title="required" aria-label="required">*</abbr></label>
<input id="url" type="url" name="url" required pattern="https?://.+">
</div>
<div>
<label for="age">Age: <abbr title="required" aria-label="required">*</abbr></label>
<input id="age" type="number" name="age" required min="18" max="36">
</div>
<div>
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>
@w3collective

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