w3collective/html-form-validation.html

## html-form-validation.html
<!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>
	<!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>