Mise en forme des formulaires

Programmation Web

La formulaire est un élément important de l’interaction avec l’utilisateur. Une mise en forme claire et attractive est trés nécessaire pour assurer une meilleure expérience utilisateur. Dans ce cours, on va étudier un scénario d’un formulaire simple et les possibilité de l’améliorer.

Au cours de cet paragraphe, on supposera que le formulaire suivant est pour la saisie de l’identité de l’utilisateur et quelques informations d’un produit.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Rapport</title>
</head>

<body>
  <form>
    <fieldset id="sec-identite">
      <legend>Identité</legend>
      <div>
        <label for="nom">Nom :</label>
        <input type="text" id="nom" required />
      </div>
      <div>
        <label for="email">Email :</label>
        <input type="email" id="email" placeholder="me@exemple.com" required />
      </div>
    </fieldset>
    <fieldset id="sec-produit">
      <legend>Information Produit</legend>
      <div>
        <label>Genre :</label>
        <ul>
          <li>
            <label>
              <input type="radio" name="genre" value="metal" />
              Métal
            </label>
          </li>
          <li>
            <label>
              <input type="radio" name="genre" value="bois" />
              Bois
            </label>
          </li>
          <li>
            <label>
              <input type="radio" name="genre" value="plastique" />
              Plastique
            </label>
          </li>
        </ul>
        <div>
          <label for="description">Description :</label>
          <textarea id="textareac"></textarea>
        </div>
    </fieldset>
    <button>Envoyez</button>
  </form>
</body>

</html>

Mise en forme de fieldset

On commencera par la mise en forme de <fieldset> et la légende.

legend {
    font-size: large;
    font-weight: bold;
    color: tomato;
}

fieldset {
    border: 1px dashed gray;
    padding: 10px;
    margin: 10px 0;
    border-radius: 15px;
}

Mise en page du formulaire

Ensuite, on va mettre en page notre formulaire :

legend {
    font-size: large;
    font-weight: bold;
    color: tomato;
}

fieldset {
    border: 1px dashed gray;
    padding: 10px;
    margin: 10px 0;
    border-radius: 15px;
}

fieldset>div {
    width: 100%;
    padding: 5px;
}

div>label {
    width: 30%;
    display: inline-block;
    text-align: right;
    font-weight: bold;
    font-size: small;
}

label+input,
label+textarea {
    display: inline-block;
    width: 60%;
}

ul {
    display: inline-block;
    width: 60%;
    vertical-align: top;
    list-style: none;
    margin: 0;
    padding: 0;
}

textarea {
    vertical-align: baseline;
    resize: none;
    height: 5rem;
}

Bouton d’envoi

Comme bonus, on va changer la mise en forme du bouton d’envoi.

Le bouton sera aligné à droite en utilisant la propriété float. L’apparence du bouton sera changée en utilisant les propriétés du fond, de la bordure et du texte.

On va utiliser le pseudo classe :hover pour changer le couleur du fond progressivement en utilisant la propriété transition.

Pour ajouter une ombre autour du bouton, on utilise la propriété box-shadow qui accepte une liste de définitions d’ombres séparées par des virgules, chacune contient les coordonnées de décalage de l’ombre en axe x et axe y, le rayon de flou (optionnel), le rayon d’étalement (optionnel) et finalement la couleur (optionnelle).

legend {
    font-size: large;
    font-weight: bold;
    color: tomato;
}

fieldset {
    border: 1px dashed gray;
    padding: 10px;
    margin: 10px 0;
    border-radius: 15px;
}

fieldset>div {
    width: 100%;
    padding: 5px;
}

div>label {
    width: 30%;
    display: inline-block;
    text-align: right;
    font-weight: bold;
    font-size: small;
}

label+input,
label+textarea {
    display: inline-block;
    width: 60%;
}

ul {
    display: inline-block;
    width: 60%;
    vertical-align: top;
    list-style: none;
    margin: 0;
    padding: 0;
}

textarea {
    vertical-align: baseline;
    resize: none;
    height: 5rem;
}

button {
    float: right;
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    transition: 1s;
}

button:hover {
    background-color: #007095;
}

Validation de contenu

CSS3 fournit des ensembles de pseudo classes reliées aux états de validation des éléments du formulaire.

legend {
    font-size: large;
    font-weight: bold;
    color: tomato;
}

fieldset {
    border: 1px dashed gray;
    padding: 10px;
    margin: 10px 0;
    border-radius: 15px;
}

fieldset>div {
    width: 100%;
    padding: 5px;
}

div>label {
    width: 30%;
    display: inline-block;
    text-align: right;
    font-weight: bold;
    font-size: small;
}

label+input,
label+textarea {
    display: inline-block;
    width: 60%;
    /*
    border: 1px solid #DDD;
    line-height: 1.8em;
    */
}

ul {
    display: inline-block;
    width: 60%;
    vertical-align: top;
    list-style: none;
    margin: 0;
    padding: 0;
}

textarea {
    vertical-align: baseline;
    resize: none;
    height: 5rem;
}

button {
    float: right;
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    transition: 1s;
}

button:hover {
    background-color: #007095;
}

input[type=email],
input[type=text],
textarea {
    border: 1px solid #333;
    font-size: 90%;
}

/* This is our style for the invalid fields */

input:invalid {
    border-color: #900;
    background-color: #FDD;
}

input:focus:invalid {
    outline: none;
}