Formulaire Web : bien utiliser les id et les name

Les éléments d'un formulaire Web peuvent comprendre un attribut id et un attribut name. Chacun de ces attributs joue un rôle important.

Cet article vous aidera à mieux comprendre quand utiliser id et quand utiliser name.

▼Publicité

Attribut id

L'attribut id a comme rôle d'identifier un élément de façon unique dans une page Web.

À l'intérieur du formulaire, l'attribut id permettra de faire le lien entre les libellés et les zones de saisie. Ce lien permet d'étendre la zone cliquable. Ainsi, un clic sur le libellé donne le focus à la zone de saisie.

Fichier où le formulaire est défini

<form method="post" action="traitement.php">

   <p>

      <label class="aligne" for="usager">Usager :</label>

      <input type="text" id="usager" name="usager" />

   </p>

   <p>

      <label class="aligne">Sexe:</label>

      <input type="radio" name="sexe" id="femme" value="femme" />

      <label for="femme">Femme</label>

      <input type="radio" name="sexe" id="homme" value="homme" />

      <label for="homme">Homme</label>

   </p>

   <p>

      <input class="aligne" type="submit" value="Soumettre" name="soumettre" />

      <input type="button" value="Annuler" name="annuler" />

   </p>

</form>

Attribut name

L'attribut name, en plus de rendre les boutons radio mutuellement exclusifs, trouvera son utilité lors du traitement du formulaire.

Ex :

Fichier où le formulaire est défini

<form method="post" action="traitement.php">

   <p>

      <label class="aligne" for="usager">Usager :</label>

      <input type="text" id="usager" name="usager" />

   </p>

   <p>

      <label class="aligne">Sexe:</label>

      <input type="radio" name="sexe" id="femme" value="femme" />

      <label for="femme">Femme</label>

      <input type="radio" name="sexe" id="homme" value="homme" />

      <label for="homme">Homme</label>

   </p>

   <p>

      <input class="aligne" type="submit" value="Soumettre" name="soumettre" />

      <input type="button" value="Annuler" name="annuler" />

   </p>

</form>

Fichier où le formulaire est traité (traitement.php)

<?php

   // Remarquez l'utilisation de htmlentities() pour prévenir l'exécution de balises <script> qui auraient pu être entrées dans le formulaire

   if(isset(htmlentities($_POST['soumettre']))) {   // si le bouton a été cliqué

      echo "<p>Bonjour, {htmlentities($_POST['usager'])}</p>";   // affichera le contenu de la boîte de saisie

      echo "<p>Votre sexe : {htmlentities($_POST['sexe'])}</p>";   // affichera l'attribut value de l'option choisie

   }

?>

Alignement du formulaire

Remarquez, dans les exemples précédents, l'utilisation de classes permettant d'aligner les zones de saisie sans avoir à utiliser un tableau. 

Voici un extrait du CSS associé à ce formulaire.

CSS

label.aligne {

   display:block;   /* si on ne met pas la balise en block, il sera impossible de spécifier sa largeur */

   width:100px;     /* espace nécessaire pour écrire les libellés. */

   float:left;      /* pour permettre que les contrôles soient placés sur la même ligne que les libellés */

}

 

input.aligne {

   margin-left: 100px; /* pour aligner le bouton sous les boîtes de saisie */

}

Pour plus d'information

« Les formulaires ». Site du zéro. http://www.siteduzero.com/tutoriel-3-13596-les-formulaires.html

« Transmettre des données avec les formulaires ». Site du zéro. http://www.siteduzero.com/tutoriel-3-14543-transmettre-des-donnees-avec-les-formulaires.html

« Bonnes pratiques de la conception de formulaires web ». Innova Blog. http://innovablog.com/analyse/formulaires-web-bonnes-pratiques-conception-ajax-1/

« Aligner ses formulaires sans tableaux ». Site du zéro. http://www.siteduzero.com/tutoriel-3-33971-aligner-ses-formulaires-sans-tableaux.html

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories