Curiosités des formulaires

© Christian PAULUS. Document créé le 28 mars 2007 , mis à jour le 28 mars 2007.

On ne va jamais aussi loin que lorsqu'on ne sait pas où l'on va. Christophe Colomb

Accueil du site > Astuces > HTML > Curiosités des formulaires

Mots-clés

Même rubrique

Les forumlaires ne sont pas interprétés de la même façon par Firefox, IE, etc.

Quelques notes à ce propos...

La valeur du bouton

Prenons l’exemple d’un simple bouton-image de formulaire qui doit renvoyer sa valeur lors de sa validation :

<form action="/page.php" method="post">
<input name="retour" type="image" src="/img/mon-bouton.png" value="oui" />
</form>

renverra $_POST[’retour’], $_POST[’retour_x’] et $_POST[’retour_y’] sous Firefox, mais seulement $_POST[’retour_x’] et $_POST[’retour_y’] sur IE 6.

Pour récupérer cette valeur aussi bien sous Firefox que sous IE, ajoutons un élément input caché (hidden) et donnons-lui cette valeur.

<form action="/page.php" method="post">
<input name="retour" type="hidden" value="oui" />
<input type="image" src="/img/mon-bouton.png" />
</form>

Affichage du bouton de formulaire

Un simple code HTML :

<html>
<head>
</head>
<body>
<form method="post" action="">
  <label>Valider
  <input type="submit" name="Submit" value="Envoyer" />
  </label>
</form>
</body>
</html>

affichera sous Firefox, avec Style Windows classique :

PNG

sous Firefox, avec Style Windows XP :

PNG

sous IE 6, avec Style Windows classique :

PNG

et sous IE 6, avec Style Windows XP :

PNG

Firefox aligne le texte (label) sur la ligne de base (baseline) du texte du bouton, IE par contre, aligne la label sur la ligne de base du bouton.

Appliquons un style CSS pour les éléments :

<style type="text/css">
<!--
form, label, input {
        border:1px solid red; margin:0; padding:0; font-size:10pt; line-height:1.6em;
}
-->
</style>

affichera sous Firefox, avec Style Windows classique :

PNG

et sous IE, avec Style Windows classique :

PNG

La différence est flagrante. Les deux navigateurs n’ont pas la même notion du line-height et IE force un padding-left et padding-right sur le bouton.

Sortir l’input du label (ne plus l’envelopper) :

<form method="post" action="">
  <label for="bt">Valider</label>
  <input type="submit" name="Submit" id="bt" value="Envoyer" />
</form>

donne - presque - le même résultat.

Sous Firefox, avec Style Windows classique :

PNG

et sous IE, avec Style Windows classique :

PNG

On peut apercevoir un petit espace entre le label et l’input. Pour s’en débarrasser, supprimer l’espace dans le code HTML :

<form method="post" action="">
  <label for="bt">Valider</label><input type="submit" name="Submit" id="bt" value="Envoyer" />
</form>

Pour retrouver sur les deux navigateurs une affichage similaire du bouton et de son label, le code CSS suivant semble un bon compromis :

<style type="text/css">
<!--
input, label { vertical-align: middle; }
label { padding-right:0.75ex; }
-->
</style>

Plussoyez !

Les forums sont fermés.