Bordure indésirable sur un input type submit

Bonjour,

J'ai un soucis avec un mini formulaire. Il est ici...

Mon problème est bien évidemment sur Internet Explorer, lorsque je clique sur un input (par exemple celui de "login"), une bordure noir apparaît sur le input submit "Entrer"... Je ne comprends pas du tout pk...

Le code

echo"<form action=\"login.html\" method=\"post\">\n";
	echo"<ul class=\"formulaire\">\n";
	echo"<li>Login :</li>\n";
	echo"<li title=\"Login\"><input class=\"box\" type=\"text\" name=\"login\" value=\"Login\" onfocus=\"this.select();\" /></li>\n";
	echo"<li>Mot de passe :</li>\n";
	echo"<li title=\"Mot de passe\"><input class=\"box\" type=\"password\" name=\"mot_de_passe\" value=\"Mot de passe\" onfocus=\"this.select();\" /></li>\n";
	echo"<li title=\"Entrer\"><input class=\"bouton\" type=\"submit\" value=\"Entrer\" /></li>\n";
	echo"</ul>\n";
	echo"</form>\n";

et le css

#droite_contenu .box {
width: 147px;
height: 20px;
padding: 2px 0 0 3px;
margin: 5px 0 10px 0;
color: #000;
cursor: pointer;
border: 1px solid #000;
background: #488748;
}

#droite_contenu .bouton {
width: 152px;
height: 24px;
padding: 2px 0;
margin: 5px 0 0 0;
cursor: pointer;
border: 1px solid #000;
text-align: center;
background: #488748;
}

#droite_contenu .box:focus, #droite_contenu .box:active {
background: #339933;
}

Merci pour votre aide...

Bonjour,

C'est une fonctionnalité tout à fait normale et nécessaire du navigateur, signalant quel bouton sera activé via la touche entrée du clavier. Pas toucher, laisser tranquille
Modifié par Laurent Denis (04 Mar 2007 - 18:31)

Ha ok, merci, alors pas de soucis.

Mais pk ça ne fait pas sous Firefox?

++

Et en simplifiant le formulaire ?

[b]Avant :[/b]
<li title="Login"><input class="box" name="login" value="Login" onfocus="this.select();" type="text"></li>

[b]Après :[/b]
<li><input class="box" name="login" value="Login" type="text"></li>

Je ne sais pas ce qu'il faut faire de la fonction javascript utilisée (elle sert à quoi, d'ailleurs ?), mais en tout cas le title sur les li, c'est à virer. À la place, faire un formulaire accessible avec des labels explicites.

D'ailleurs, je ne vois pas trop l'utilité de la liste non ordonnée pour le formulaire. En quoi ce formulaire est-il une liste ?

Proposition de formulaire remanié :

<form action="login.html" method="post">
	<p><label for="form-login">Login</label><br />
	<input class="box" name="login" id="form-login" value="Login" type="text"></p>
	<p><label class="mot_de_passe" for="form-mot_de_passe">Mot de passe</label><br />
	<input class="box" name="mot_de_passe" id="form-mot_de_passe" value="Mot de passe" type="password"></p>
	<p><input class="bouton" value="Entrer" type="submit"></p>
</form>

Florent V. a écrit :

Je ne sais pas ce qu'il faut faire de la fonction javascript utilisée (elle sert à quoi, d'ailleurs ?)

Alors en simplifiant le formulaire, ça ne change rien. Le js sert que lorsque l'on clique sur le input, ça séléctionne la valeur associée au input. (vu que j'indique la value) C'est pas bien?

Par contre, je ne connaissait pas la balises "label", tu pourrais m'expliquer un peu son utilisation? Si ça peut m'aider à être plus accessible.... Je prends! A part ça, ça se fait de mettre des p à la suite comme ça?

Merci en tout cas!!!

PS N'oublie pas de fermer tes inputs...
Modifié par le rouge (05 Mar 2007 - 09:22)

le rouge a écrit :
Le js sert que lorsque l'on clique sur le input, ça séléctionne la valeur associée au input. (vu que j'indique la value) C'est pas bien?

Personnellement, je n'aime pas que les formulaires que j'utilise réagissent d'une façon non habituelle. À trop vouloir faciliter la vie aux utilisateurs, on risque de les décontenancer.

le rouge a écrit :
Par contre, je ne connaissait pas la balises "label", tu pourrais m'expliquer un peu son utilisation? Si ça peut m'aider à être plus accessible.... Je prends!

Heu... ben je vais pas refaire la spécification HTML 4 ici, hein.
http://www.w3.org/TR/html4/interact/forms.html#h-17.9

le rouge a écrit :
A part ça, ça se fait de mettre des p à la suite comme ça?

Ça n'est pas interdit, ça ne gênera aucun utilisateur, ça n'a pas de « valeur sémantique » particulière, et ça peut aider pour la mise en page. Donc oui, ça se fait.

Par ailleurs, cliquer sur un label (explicite) donne le focus à l'élément de formulaire pointé par le label. Dans le cas d'un input de type text, ça sélectionnera le texte présent dans l'input s'il y en a un.

On peut signaler à l'utilisateur de la souris qu'un label est réactif :

form label {cursor: pointer;}

Modifié par Florent V. (05 Mar 2007 - 09:38)

Florent V. a écrit :
Personnellement, je n'aime pas que les formulaires que j'utilise réagissent d'une façon non habituelle. À trop vouloir faciliter la vie aux utilisateurs, on risque de les décontenancer.

Moi je trouve très pratique, et ça n'efface pas le texte, ça le sélectionne simplement, je ne pense pas que ça pourrait gêner l'utilisateur, enfin il me semble...

Florent V. a écrit :
Heu... ben je vais pas refaire la spécification HTML 4 ici, hein.
http://www.w3.org/TR/html4/interact/forms.html#h-17.9

On est d'accord, je vais aller lire tout ça... Merci!

Florent V. a écrit :
Ça n'est pas interdit, ça ne gênera aucun utilisateur, ça n'a pas de « valeur sémantique » particulière, et ça peut aider pour la mise en page. Donc oui, ça se fait.

Ok, je pensais que c'était pas bien de le faire, mais apparement...

Florent V. a écrit :
Par ailleurs, cliquer sur un label (explicite) donne le focus à l'élément de formulaire pointé par le label. Dans le cas d'un input de type text, ça sélectionnera le texte présent dans l'input s'il y en a un.

On peut signaler à l'utilisateur de la souris qu'un label est réactif :

form label {cursor: pointer;}

Ok, donc je te montre le code de mon "nouveau" formulaire et redis-moi si c'est "juste"

<form class="formulaire" action="login.html" method="post">
p><label class="login" for="login">Login</label><br />
input class="box" type="text" name="login" id="login" value="Login" title="Login" tabindex="1" onfocus="this.select();" /></p>
p><label class="mot_de_passe" for="mot_de_passe">Mot de passe</label><br />
input class="box" type="password" name="mot_de_passe" id="mot_de_passe" value="Mot de passe" title="Mot de passe" tabindex="2" onfocus="this.select();" /></p>
p><input type="image" src="images/boutons/entrer.gif" alt="Entrer" title="Entrer" /><input type="hidden" name="action" value="Entrer" tabindex="3" /></p>
form>

Et voilà ce que ça donne...

En tout cas, merci pour les infos!

Je relance la question initiale car je suis moi aussi confronté à ce "problème".
Sur IE7, lorsqu'on clique dans "une zone entre <form> et </form>" on voit apparaitre une bordure autour du bouton submit. Mon bouton submit possède une image de background et vous devinez que ca donne un effet non désiré.

Alors ma question est comment évitez la bordure sur le submit ?

PsYk0-PaT a écrit :
Mon bouton submit possède une image de background

Cette image ne sera pas visible avec plusieurs navigateurs (dont Safari, pour prendre l'exemple le plus frappant... et prochainement Firefox 3 sur Mac, il me semble). J'espère pour toi qu'elle ne contient pas d'information importante et qu'elle sert juste à décorer le bouton.

Pour mémoire, le seul moyen correct pour faire un bouton d'envoi de formulaire personnalisé graphiquement, c'est ainsi :

<input type="image" src="envoi-formulaire.jpg" alt="Envoyer le formulaire">

Oui, ou comme ça :

<input type="image" src="images/boutons/entrer.gif" alt="Entrer" title="Entrer" /><input type="hidden" name="action" value="Entrer" tabindex="3" />

J'ai trouvé une solution tout simple. J'avais juste pas pris le temps d'essayer

Initialement, mon submit avec un background-image et un border. J'ai enlevé le border et j'avais toujours la petite bordure noir autour du submit. J'ai rajouté un border: 0px par la suite et bingo !

Un truc chiant parcontre, l'effet bordure revient pour l'ensemble du submit meme si je spécifie un border-right (ou left ou top ou..) uniquement.