Médiaforma

Guide de survie – Les formulaires

9 janvier 2011
Categories: HTLM5 / CSS3
Email Envoyer à un ami
Print Friendly, PDF & Email

Les éléments dédiés aux formulaires

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un formulaire</title>
  </head>
  <body>
    <form name="MonFormulaire" method="post" action="traitement.php">
      <fieldset>
        <legend>Légende du <fieldset></legend>
        Contenu du du <fieldset>
      </fieldset>

      <br><label>Un champ texte</label>
      <input type="text" name="Nom" value="valeur">

      <br><label>Un bouton</label>
      <input type="button" name="Nom" value="Légende du bouton">

      <br><label>Un bouton image</label>
      <input type="image" src="commande.jpg">

      <br><label>Un champ mot de passe</label>
      <input type="password" name="Nom" value="valeur par défaut">

      <br><label>Une case à cocher</label>
      <input type="checkbox" name="Nom" value="Valeur">
      <label>Un bouton radio</label>
      <input type="radio" name="Nom" value="Valeur">

      <br><label>Des boutons <submit> et <reset></label>
      <input type="submit" name="Nom" value="Envoyer">
      <input type="reset" name="Nom" value="Annuler">

      <br><label>Champs spécialisés date et heure</label>
      <input type="date" name="Nom" title="Date(aaaa-mm-jj)" value="2010-11-22">
      <input type="time" name="Nom" title="Heure(hh-mm)" value="10:00">
      <input type="datetime" name="Nom">

      <br><label>Saise de nombres entiers autour de la valeur 55</label>
      <input type="number" name="Nom" value="55">

      <br><label>Une zone de texte spécialisée recherche</label>
      <input type="search" name="Nom" list="datalist" value="Valeur par défaut">

      <br><label>Un curseur pour sélectionner des valeurs numériques</label>
      <input type="range" min="-500" max="500" value="0" step="10" name="Nom">

      <br><label>Un bouton pour désigner un fichier local</label>
      <input type="file" name="Nom">

      <br><label>Une zone de saisie multiligne</label>
      <textarea cols="40" rows="4">Texte par défaut</textarea>

      <br><label>Liste déroulante et zone de liste</label>
      <select name="Nom">
        <option>Valeur 1</option>
        <option>Valeur 2</option>
        <option>Valeur 3</option>
        <option>Valeur 4</option>
        <option>Valeur 5</option>
      </select>

      <select size="2" name="Nom">
        <option>Valeur 1</option>
        <option>Valeur 2</option>
        <option>Valeur 3</option>
        <option>Valeur 4</option>
        <option>Valeur 5</option>
      </select>

      <br><label>Résultat d'un calcul : </label>
      <output name="resultat">123</output>
    </form>
  </body>
</html>

L’attribut placeholder

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une zone de texte améliorée</title>
  </head>
  <body>
    <form name="MonFormulaire" method="post" action="traitement.php">
      <label>Quel est le meilleur système d'exploitation selon vous ?</label>
      <input name="texte" placeholder="Entrez votre réponse ici">
      <input type="submit" value="Envoyer">
    </form>
  </body>
</html>

L’attribut autofocus

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Autofocus compatible avec tous les navigateurs</title>
  </head>
  <body>
    <form action="action.php" method="post">
      <fieldset>
        <legend>Positionnement du point d'insertion dans le premier champ input</legend>
        <label>Nom</label>
        <input type="text" id="champ1" autofocus>
        <script>
          if (!("autofocus" in document.createElement("input")))
          {
           document.getElementById("champ1").focus();
          }
        </script>
        <label>Prénom</label>
        <input type="text" id="champ2">
        <label>Adresse</label>
        <input type="text" id="champ3">
        <label>Ville</label>
        <input type="text" id="champ4">
      </fieldset>
    </form>
  </body>
</html>

Validation de données

Exemple 1

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Champ de saisie obligatoire</title>
  </head>
  <body>
  <form id="validation">
   <label>Nom</label><input name="Nom" required><br><br><br><br>
   <input type=submit value="Valider"></p>
  </form>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Validation e-mail et url</title>
  </head>
  <body>
  <form id="validation">
   <label>Nom</label><input name="Nom"><br>
   <label>e-mail</label> <input type=email name="email" required><br>
   <label>Adresse URL</label> <input type=url name="url" required><br>
   <label>Commentaire</label> <textarea name="comment"></textarea><br>
   <input type=submit value="Valider"></p>
  </form>
  </body>
</html>

Labels implicites

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Alignement d'éléments dans un formulaire</title>
  </head>
  <body>
  <form id="validation">
   <label>Nom<input id="Nom"></label><br>
   <label>Prénom</label> <input id="prenom"><br>
   <label for="adresse">Adresse</label><textarea id="adresse"></textarea><br>
  </form>
  </body>
</html>

Labels explicites

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Alignement d'éléments dans un formulaire</title>
  </head>
  <body>
  <form id="validation">
   <label for="nom">Nom<input id="nom"></label><br>
   <label for="prenom">Prénom</label> <input id="prenom"><br>
   <label for="adresse">Adresse</label><textarea id="adresse"></textarea><br>
  </form>
  </body>
</html>

Aligner les éléments d’un formulaire

Tester le code

Exemple 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Labels implicites et explicites</title>
    <style>
      label
      {
        display: inline-block;
        width: 80px;
      }
    </style>
  </head>
  <body>
    <form id="validation">
    <label>Nom</label><input id="Nom"><br>
    <label>Prénom</label><input id="Prenom"><br>
    <label>Adresse</label><textarea id="Adresse" rows="8" cols="30"></textarea><br><br>
    <input type="button" name="Nom" value="Valider">
   </form>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Alignement d'éléments dans un formulaire</title>
    <style>
      input, textarea
      {
        position: absolute;
        left: 85px;
      }
      .button
      {
        position: absolute;
        left: 85px;
        top: 200px;
      }
    </style>
  </head>
  <body>
    <form id="validation">
    <label>Nom</label><input id="Nom"><br>
    <label>Prénom</label><input type=email id="email"><br>
    <label>Adresse</label><textarea id="adresse" rows="8" cols="30"></textarea><br><br>
    <input type="button" name="Nom" value="Valider" class="button">
   </form>
  </body>
</html>

Arrondir les angles des éléments d’un formulaire

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Arrondir les angles d'un formulaire</title>
    <style>
      .arrondi
      {
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -khtml-border-radius: 15px;
        -ms-border-radius: 15px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <form id="validation">
    <label>Nom</label><input id="Nom" class="arrondi"><br>
    <label>Prénom</label><input id="Prenom" class="arrondi"><br>
    <label>Adresse</label><textarea id="adresse" class="arrondi" rows="8" cols="30"></textarea><br><br>
    <input type="button" name="Nom" value="Valider" class="arrondi">
   </form>
  </body>
</html>

Modifier l’allure d’un bouton avec un style

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un bouton de formulaire entièrement redéfini</title>
    <style>
      @font-face
      {
        font-familly: algerian;
        src: url('ALGER.TTF');
      }
      .arrondi
      {
        width: 220px;
        height: 50px;

        -moz-border-radius: 50px 50px 200px 50px;
        -webkit-border-radius: 50px 50px 200px 50px;
        -khtml-border-radius: 50px 50px 200px 50px;
        -ms-border-radius: 50px 50px 200px 50px;
        border: 1px solid black;

        background: -moz-linear-gradient(top, #40FFFF, #C0FFFF);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#40FFFF), to(#C0FFFF));

        box-shadow: 5px 5px 5px grey;
        -moz-box-shadow: 5px 5px 5px grey;
        -webkit-box-shadow: 5px 5px 5px grey;
        -khtml-box-shadow: 5px 5px 5px grey;

        font-family: 'algerian';
        font-size: 40px;
      }
      .arrondi:hover
      {
        background: -moz-linear-gradient(top, #C0FFFF, #40FFFF);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C0FFFF), to(#40FFFF));
      }

      .arrondi:active
      {
        background: white;
        background: white;
      }
    </style>
  </head>
  <body>
    <form id="validation">
    <input type="button" name="bouton1" value="Valider" class="arrondi">
   </form>
  </body>
</html>

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
Email Envoyer à un ami
 
Comments

No comments yet.

Téléchargez gratuitement ce mini-dossier PDF dans votre boîte mail.

 
Mediaforma est une marque déposée - Copyright © 2019 Mediaforma
14 visiteurs connectés sur Mediaforma !