HTML5 Validation

by Kushal Jayswal

HTML

<form action="" method="post">
  <fieldset>
    <legend>Booking Details</legend>
    <div>
      <label for="name">Name:</label>
      <input id="name" name="name" value="" required pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname" aria-required="true" aria-describedby="name-format">
      <span id="name-format" class="help">Format: firstname lastname</span>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" value="" required aria-required="true">
    </div>
    <div>
      <label for="website">Website:</label>
      <input type="url" id="website" name="website" value="">
    </div>
    <div>
      <label for="numTickets"><abbr title="Number">No.</abbr> of Tickets:</label>
      <input type="number" id="numTickets" name="numTickets" value="" required aria-required="true" min="1" max="4">
    </div>
    <div class="submit">
      <input type="submit" value="Submit">
    </div>
  </fieldset>
</form>

CSS

body {
  font-family: Helvetica, Arial;
  font-size: 12px;
}

h1 {
  font-size: 200%;
}

legend {
  padding: 0 5px;
  text-align: right;
}

fieldset > div {
  margin: 10px 0;
}

fieldset > legend + div {
  margin-top: 0;
}

fieldset > div:last-child {
  margin-bottom: 0;
}

label {
  display: inline-block;
  width: 100px;
}

input {
  width: 200px;
}

input[type="number"] {
  width: 30px;
}

div > input[type="submit"] {
  background: #ccc;
  border: 1px solid #999;
  width: auto;
}

input:required {
  background: hsl(180, 50%, 90%);
  border: 1px solid #999;
}

input:optional {
  background: hsl(300, 50%, 90%);
  border: 1px dotted hsl(180, 50%, 90%);
}

input:valid,
input:in-range {
  background: hsl(120, 50%, 90%);
  border-color: hsl(120, 50%, 50%);
}

input:invalid,
input:out-of-range {
  border-color: hsl(0, 50%, 50%);
  background: hsl(0, 50%, 90%);
}

.help {
  display: none;
  font-size: 90%;
}

input:focus + .help {
  display: inline-block;
}

div.submit {
  margin-left: 100px;
}