HTML5 TMM CH4 forms1

by Ram Tobolski

HTML

<h1>Zoo Keeper Application Form</h1>
<form action="#">
  <p><i>Please complete the form. Mandatory fields are marked with a </i><em>*</em></p>
  <fieldset>y
    <legend>Contact Details</legend>
      <label for="name">Name <em>*</em></label>
      <input id="name" placeholder="Jane Smith" autofocus ><br>
     .. <label for="telephone">Telephone</label>
      <input id="telephone" placeholder="(xxx) xxx- xxxx" type="tel"><br>
      <label for="email">Email <em>*</em></label>
      <input id="email" type="email" multiple ><br>
  </fieldset>
  <fieldset>
    <legend>Personal Information</legend>
      <label for="age">Age<em>*</em></label>
      <input id="age" type="number" min ="0" max ="120" step ="0.1"><br>
      <label for="gender">Gender</label>
      <select id="gender">
        <option value="female">Female</option>
        <option value="male">Male</option>
      </select><br>
      <label for="comments">When did you first know you wanted to be a zoo-keeper?</label>
      <textarea id="comments" oninput =" validateComments(this)"></textarea>
  </fieldset>

  <fieldset>
    <legend>Pick Your Favorite Animals</legend>
    <label for="zebra"><input id="zebra" type="checkbox"> Zebra</label>
    <label for="cat"><input id="cat" type="checkbox"> Cat</label>
    <label for="anaconda"><input id="anaconda" type="checkbox"> Anaconda</label>
    <label for="human"><input id="human" type="checkbox"> Human</label>
    <label for="elephant"><input id="elephant" type="checkbox"> Elephant</label>
    <label for="wildebeest"><input id="wildebeest" type="checkbox"> Wildebeest</label>
    <label for="pigeon"><input id="pigeon" type="checkbox"> Pigeon</label>
    <label for="crab"><input id="crab" type="checkbox"> Crab</label>
  </fieldset>
  <p><input type="submit" value="Submit Application"></p>
</form>

CSS

body {
  font-family: 'Palatino Linotype', serif;
  max-width: 600px;
  padding: 0px 30px;
}

h1 {
  margin-bottom: 0px;
}

p {
  margin-top: 0px;
}

fieldset {
  margin-bottom: 15px;
  padding: 10px;
}

legend {
  padding: 0px 3px;
  font-weight: bold;
  font-variant: small-caps;
}

label {
  width: 110px;
  display: inline-block;
  vertical-align: top;
  margin: 6px;
}

em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
}

input:required {
 background-color: lightyellow; 
}

input:focus {
  background: #eaeaea;
}

input, textarea {
  width: 249px;
}

textarea {
  height: 100px;
}

select {
  width: 254px;
}

input[type=checkbox] {
  width: 10px;
}

input[type=submit] {
  width: 150px;
  padding: 10px;
}

JavaScript

function validateComments( input) { if (input.value.length < 20) { input.setCustomValidity(" You need to comment in more detail."); } else { // There's no error. Clear any error message.
input.setCustomValidity(""); } }