©
. Document créé le 28 mars 2007 , mis à jour le 28 mars 2007.Il n'est point de secret que le temps ne révèle. Jean Racine
Accueil du site > Astuces > HTML > Curiosités des formulaires
Les forumlaires ne sont pas interprétés de la même façon par Firefox, IE, etc.
Quelques notes à ce propos...
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>
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>
Les forums sont fermés.