!!! Listings aus dem Artikel "Auswahlscheibe"
!!! von Norman Paschke in iX 9/2012, S. 138

!!! Listing 1: Ausgangspunkt HTML4-Formular

<form id="form-termin" action="#" method="post">
  <fieldset class="data">
    <h2>Vereinbaren Sie einen Termin mit uns!</h2>
	  <p><input id="name" type="text" title="Vorname Nachname"/>
	       <label for="name">Vor- und Nachname *</label></p>
          <p><input id="mail" type="text" title="email@example.org"/>
		<label for="mail">E-Mail *</label></p>
          <p><input id="url" type="text" title="http://www.example.org"/>
		<label for="url">Webseite</label></p>
          <p><input id="phone" type="text" title="nur Zahlen erlaubt"/>
		<label for="phone">Telefonnummer</label></p>
          <p><input id="date" type="text" title="YYYY-MM-DD"/> 
		um <input id="time" type="text" title="hh:mm"/> Uhr
		<label for="date">Datum und Uhrzeit *</label>
	  </p>
  </fieldset>
  <fieldset class="buttons">
	<button type="submit">Absenden</button>
	<button type="reset">Eingaben löschen</button>
  </fieldset>
</form>

!!! Listing 2: Vorgaben für eine  Zeitangabe

<input id="time" type="time" 
  placeholder="hh:mm" title="hh:mm" 
  min="08:00" max="18:00" 
  pattern="([01]?[0-9]|2[0-3]):[0-5]?[0-9]" 
  required />

!!! Listing 3: Neue Pseudoklassen und Verläufe

/* Browser Reset */
input:invalid {
  box-shadow:none;
}
/* ersetzt Asterisk */
input:required + label::after {
  content:" *";
  color:#f00;
}
/* nicht oder falsch ausgefuellte Felder rot markieren */
input:focus:invalid {
  border-color:#f00;
}
/* richtig ausgefuellte Felder gruen markieren */
input:required:focus:valid {
  border-color:#0c0;
}
/* Buttons mit grauem Gradient und runden Ecken */
button {
  background:-moz-linear-gradient(top,#fff,#ccc);
  background:-webkit-linear-gradient(top,#fff,#ccc);
  background:-ms-linear-gradient(top,#fff,#ccc);
  background:-o-linear-gradient(top,#fff,#ccc);
  background:linear-gradient(top,#fff,#ccc);
  border-radius:5px;
}
/* Submit-Buttons mit blauem Verlauf */
button[type="submit"] {
  background:-moz-linear-gradient(top,#0cc,#08c);
  background:-webkit-linear-gradient(top,#0cc,#08c);
  background:-ms-linear-gradient(top,#0cc,#08c);
  background:-o-linear-gradient(top,#0cc,#09c);
  background:linear-gradient(top,#0cc,#08c);
}