Créez un formulaire avec des bulles d'aide en CSS3

Voici une méthode permettant de créer un formulaire HTML boosté en CSS3: Bords arrondis, ombres, bulles d'aides ...

Ce mini tutorial expérimental réalisé par skyrocketlabs vous expliquera comment créer un formulaire CSS3 design avec des bulles d'aide dynamiques, sans Javascript.

Le rendu est pas mal du tout, toutefois, il ne faut pas compter sur Internet Explorer pour être de la partie (Bord carrés, pas de tips ...).

Le CSS3 pourra bientôt (dans quelques années ?) remplacer les images pour toute la conception du WebDesign.

Voici le HTML:

<form id="myForm" method="post" action="#">
<fieldset>

<!-- EACH LABEL AND FORM ELEMENT IS WRAPPED IN ITS OWN DIV TO APPLY THE HOVER STYLE THAT DISPLAYS THE HIDDEN HINT -->
<div class="myName">
<label>My name:</label>
<!-- HINT IS HIDDEN BY DEFAULT -->
<p class="hint">Please include both your first & last name</p>
<input type="text" name="Name" class="textfield" />
</div>

<div class="myEmail">
<label>My email address:</label>
<p class="hint">Your email address will never be sold!</p>
<input type="text" name="EmailAddress" class="textfield" />
</div>

<!-- IT IS PROBABLY UNNECESSARY TO USE A HINT FOR A SELECT LIST SO IT'S OMITTED HERE -->
<label>I'm looking for:</label>
<select class="dropdown" name="Topic">
<option>Select...</option>
<option>A CSS3 form like this</option>
<option>A CSS3 form like this</option>
<option>A CSS3 form like this</option>
</select>

<div class="myComments">
<label>Comments:</label>
<p class="hint">Please be as specific as possible so we can serve you quickly</p>
<textarea cols="60" rows="10" class="textarea"></textarea>
</div>

<!-- A HINT ON A SUBMIT BUTTON IS PROBABLY OVERKILL BUT THIS IS JUST TO SHOW THAT IT CAN BE DONE -->
<div class="sendTip">
<p class="hint">Make sure your info is correct before sending!</p>
<input type="submit" name="Submit" value="Send message" class="btn" />
</div>

</fieldset>
</form>

Les bulles d'aides sont situées dans les balises p de classe "hint". Ces dernières sont cachées par défaut, puis seront affichées lorsque vous serez en focus sur l'un des éléments du formulaire.

Et le CSS:

fieldset {
  width: 450px;
  margin: 0;
  padding: 30px;
  background: #f0f0f0;
  border: 2px solid #d0d0d0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; 
  -moz-box-shadow: 6px 6px 6px #ddd;
  -webkit-box-shadow: 6px 6px 6px #ddd;
  box-shadow: 6px 6px 6px #ddd;
}

label {
  display: block;
  font: bold 1.2em arial,verdana,tahoma,sans-serif;
  text-shadow: 2px 2px 2px #ccc;
  color: #000;
  margin: 0 20px 10px 0;
  padding: 0;
  clear: left;
}

/* APPLIES THE STYLE TO EACH FORM ELEMENT */

.textfield, .dropdown, .textarea {
  width: 220px;
  font: normal 1.1em arial,verdana,tahoma,sans-serif;
  color: #666;
  margin: 0 0 30px 0;
  padding: 9px 14px;
  background: #f2f2f2;
  border: 2px solid #d0d0d0;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;  
  -moz-box-shadow: 4px 4px 4px #ddd;
  -webkit-box-shadow: 4px 4px 4px #ddd;
  box-shadow: 4px 4px 4px #ddd;
}

/* OPTIONAL SET WIDTH FOR THE SELECT LIST */

.dropdown {
  width: 250px;
}

/* OPTIONAL SET WIDTH FOR THE TEXTAREA */

.textarea {
  width: 410px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; 
}

/* CHANGE THE STYLE WHEN THE FORM ELEMENT IS CLICKED */

input:focus, select:focus, .textarea:focus {
  background: #fff;
  border: 2px solid #ddd;
  -moz-box-shadow: 2px 1px 1px #ddd;
  -webkit-box-shadow: 2px 1px 1px #ddd;
  box-shadow: 2px 1px 1px #ddd;
  outline: none;
}

/* THE NAMES FOR EACH OF THE FORM ELEMENT DIVS WHICH AUTOMATICALLY HIDES THE TIPS BY DEFAULT */

div.myName p.hint, div.myEmail p.hint, div.myComments p.hint, div.sendTip p.hint {
  display: none;
}  

/* WHEN EACH DIV IS HOVERED, THE TIP IS DISPLAYED */

div.myName:hover > p.hint, div.myEmail:hover > p.hint, div.myComments:hover > p.hint, div.sendTip:hover > p.hint  {
  position: absolute;
  display: block;
  font: bold 0.8em arial,verdana,tahoma,sans-serif;
  text-shadow: none;
  color: #000;
  margin: 0 0 0 265px;
  padding: 10px 15px;
  background: #ffff80;
  border: 2px solid #f7de35;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;   
  -moz-box-shadow: 4px 4px 4px #ddd;
  -webkit-box-shadow: 4px 4px 4px #ddd;
  box-shadow: 4px 4px 4px #ddd;  
}

/* CHANGES THE LEFT MARGIN ON THE TEXTAREA TIP, FOR BALANCE */

div.myComments:hover > p.hint {
  margin: 2px 0 0 350px;
}

/* CHANGES THE LEFT MARGIN ON THE SUBMIT BUTTON TIP, FOR BALANCE */

div.sendTip:hover > p.hint {
  margin: 2px 0 0 150px;
}

.btn {
  display: block;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  color: #000;
  text-decoration: none;
  margin: 0;
  padding: 9px 11px 8px 11px;
  background: #f2f2f2 url(../img/submit-backgr.png) repeat-x;
  border: 2px solid #d0d0d0;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;  
  -moz-box-shadow: 4px 4px 4px #ddd;
  -webkit-box-shadow: 4px 4px 4px #ddd;
  box-shadow: 4px 4px 4px #ddd;  
}

.btn:hover, .btn:focus {
  color: #fff;
  background: #f2f2f2 url(../img/submit-hover-backgr.png) repeat-x; 
  border: 2px solid #888;
  -moz-box-shadow: 2px 2px 2px #ddd;
  -webkit-box-shadow: 2px 2px 2px #ddd;
  box-shadow: 2px 2px 2px #ddd;  
}

Sympa comme rendu non ?

Démo

Site Officiel