Discussion :

[sibile]

Bonjour,

Depuis peu les formulaires que j' écris sont difficilement accessibles sous Firefox.

Certains champs textes et radio ne sont pas accesibles avec la souris, seulement pas la touche TAB.

Quant aux liens, certains ne sont carrément plus cliquables, idem on y arrive par la touche TAB mais les visiteurs non-handicapés de mon site ne peuvent pas le savoir !!!

J' aimerais savoir si quelqu' un a déjà eu les mêmes problèmes, j' ai eu beau chercher je n' ai pas pu trouver la source de cette erreur.

Sous IE, tout est accessible normalement.


Merci d' avance.

[Poulpynette]

Jamais eu ce genre de problèmes. Peut-être ta souris rend l'âme

Sinon un bout de code HTML / CSS pour voir si tout va bien ?

[HiRoN]

Bonjour...

Sinon un bout de code HTML / CSS pour voir si tout va bien ?

+1... Sans code, dur d'aider ou de tester... (une page en ligne ferait aussi l'affaire)

[sibile]

Désolée, c' est ici, si vous avez l' amabilité de repasser ici.

Il s' agit des input et le problème est uniquement sur Firefox.

Ce ne peut pas être ma souris car ça marche très bien sur IE.

Lorsque je passe ma souris sur les liens, elle tremble.

Je pense quand même qu' il s' agit d' un problème qui vient de ma souris, parce-que il n' y a aucune erreur.

Bizarre !!!

J' ai rencontré le même problème sur d' autres sites.
C' est donc un problème avec ma souris et Firefox !

Merci quand même.

[12monkeys]

Bonsoir

Tu as effectivement un souci : avec Firefox 3 je n'ai pas accès au formulaire au centre, un rapide regard sur le code ne m'as pas permis de trouver l'erreur... Mais commence par corriger les erreur dans ton code que te signale le validateur W3C : http://validator.w3.org/check?uri=ht...Inline&group=0

[Poulpynette]

Je me demande si le problème ne vient pas du fait que tes balises input se trouvent à l'intérieur de balises p ...

[HiRoN]

Bonjour,


Je suis allé dans le code, ton formulaire est construit de cette façon :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form>
<p class="form">
<label for="email">Email :</label>
<input type="text" name="email" size="20" value="" />
</p>
<p class="form" action="membre.php">
<label for="mot_passe">Mot de passe :</label>
<input type="password" name="mot_passe" size="20" />
</p>
<p class="submit">
<input class="check" type="image" src="images/sidentifier.jpg"  alt="s' identifier" 
onmouseover="this.src='images/sidentifiermouseover.jpg'" onmouseout="this.src='images/sidentifier.jpg'"		/>
<img src="images/annuler.jpg" onclick="javascript: history.go(-1)" alt="annuler" 
onmouseover="this.src='images/annuler.jpg'" onmouseout="this.src='images/annuler.jpg'"	/>
</p>
</form>

Donc sauf erreur de ma part, normal que cela ne fonctionne pas...

Normalement (la valeur du for est l'id du champ):

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<label for="id_champ">Label</label>
<input... id="id_champ" name="email" ... />

Un form se construit ainsi :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<form action="ta_page.php" methos="post">

Tu as seulement mis :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<form>

Tu mets :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<p class="form" action="membre.php">

Un paragraphe ne prend pas de propriété "action"...

+ Nom de class ambigu (submit, form à éviter)
Revoir la construction d'un formulaire pourrait être utile...

[sibile]

Merci 123Monkeys pour tes remarques

Mais commence par corriger les erreur dans ton code que te signale le validateur W3C : http://validator.w3.org/check?uri=ht...Inline&group=0

En effet depuis que j' ai corrigé les erreurs du validateur ( à part le marquee, qui est déconseillé, mais que je ne me sens pas de remplacer par des codes super compliqués en js pour le moment ) je n' ai plus de problème pour ce formulaire.

Je n' ai pas pu déceler exactement quelle était la faille, bien que je crois qu' il s' agisse de l' absence d' id="" correspondant au for="" du label, mais je n' en suis pas sûre. L' éloignement de la balise <form> par rapport aux inputs peut aussi en être la cause.

Les <p></p> qui contiennent les labels et inputs ne semblent pas poser de problèmes.


Je vais corriger mes autres formulaires et je vous donnerai mes conclusions.

[Poulpynette]

Les <p></p> qui contiennent les labels et inputs ne semblent pas poser de problèmes.

En effet pardon, n'ayant jamais utilisé cette façon de faire auparavant, je pensais que ça pouvait poser problème

[sibile]

Lol HiRoN !!

Tu es arrivé au moment ou je corrigeais mon code en live !

Et avec quelques verres de rouge après le repas, il y eut quelques erreurs un peu particulières. <p action="" > etc.

Ok pour l' id connecté avec le label, je ne savais pas.

.form et .submit sont déconseillés?

En effet pardon, n'ayant jamais utilisé cette façon de faire auparavant, je pensais que ça pouvait poser problème

Je trouve que c' est une façon très pratique d' organiser les formulaires ( ça centre bien et tout ), et d' après le livre "Réussir son site Web avec XHTML et CSS" de Mathieu Nebra, c' est bien aux normes. Il y a quand même une structure à respecter dans l' imbrications des balises <form> et les balises de mise en forme.

[HiRoN]

.form et .submit sont déconseillés ?

Disons qu'il vaudrait les appeller avec des noms explicites, si liés à ton formulaire d'authentification : formAuth & BtnAuth (par exemple, évitera les confusions et éventuellement des erreurs)