5. Formular Web redat via CSS

Exemplu de formular Web ce recurge la diverse stiluri CSS

HTML

<form method="get" action="javascript:alert('De implementat...');">
<fieldset>
<legend>Identitatea participantului</legend>
<label for="identitate">Identitate:</label>
<input type="text" id="identitate" />
</fieldset>
<fieldset>
<legend>Contact</legend>
<label for="adr">Adresa de e-mail:</label>
<input type="email" required="required" id="adr" />
</fieldset>
<fieldset id="evenim">
<legend>Excursie</legend>
<label for="excursie">Participare la excursie?</label>
<input type="checkbox" id="excursie" />Desigur, particip!
</fieldset>
<input type="submit" value="Trimite datele" />
</form>

CSS

* {
  font-family: 'Arial', 'Helvetica', sans-serif;
}
label, input {
  width: 70%;
  display: block;
}
input[type='checkbox'] {
  display: inline;
  width: 10px;
  height: 10px;
}
input[type='email']:invalid {
 border: 1px solid red;
  color: red;
}
:focus {
  background-color: lightgray;
}
#evenim:before {
  content: '\2691';
  float: left;
  padding-right: 0.3em;
}
input[type='submit'] {
  margin-top: 1em;
  background: lightgreen;
  padding: 0.5em;
  border: thin solid green;
}
input[type='submit']:hover {
  color: white;
  background: linear-gradient(to bottom, darkgreen, rgba(0,127,0,0.5));
}