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 :
sous Firefox, avec Style Windows XP :
sous IE 6, avec Style Windows classique :
et sous IE 6, avec Style Windows XP :
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 :
et sous IE, avec Style Windows classique :
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 :
et sous IE, avec Style Windows classique :
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>
RSS 2.0
