mise on form pour LABEL

[k_boy]

je cherche à appliquer une mise forme juste pour les LABEL de mon FORM, comment peut on faire ça ?
j'ai essayer ce qui suit mais sa n'a pas marché

Code :

1
2
3
4
5
6
7
#field-login label, #field-password label 
{ 
display:block; 
width:150px; 
float:left; 
}

et le code HTML est le suivant:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form action="..."> 
  <p class="field"> 
    <label for="field-login">User name:</label> 
    <input id="field-login" name="login" type="text" /> 
  </p> 
  <p class="field"> 
    <label for="field-password">Password:</label> 
    <input id="field-password" name="password" type="password" /> 
  </p> 
  <p class="send"> 
    <input type="submit" value="Log in" /> 
  </p> 
</form>

[nadox]

Bonsoir

Je crois qu'il faut revoir l'utilisation de base de CSS :

#monid{...} //élément qui a l'id 'monid'

.maclass{...} //élément qui a la classe 'maclass'

element{...} //élément du DOM (une balise HTML comme label)


Soit :

Code :

1
2
3
4
5
6
7
 
.field label /* éléments label contenus dans les éléments dont la classe est 'field'*/
{ 
display:block; 
width:150px; 
float:left; 
}

on pourrais aussi simplement mettre une classe sur les labels...

[k_boy]

merci,mais une petite question: pourquoi en utilise le FOR pour indiquer l'ID de ce champ ?

[nadox]

Il s'agit d'une question d'accessibilité.

Par exemple : le clic sur le label d'une checkbox/radio coche l'élément si l'attribut for est correctement renseigné.(je déteste devoir cliquer sur le petit rond blanc d'un bouton radio... pas vous ?)

C'est aussi ce qui permet à un système de lecture d'écran(pour les mal-voyant) de savoir quel texte est associé à un champs(donc c'est aussi utile pour tout les types de champs).

L'attribut for n'est pas indispensable pour passer la valiation W3C, mais c'est une bonne habitude de le préciser pour ne pas pénaliser une partie des internautes...(qui doivent déjà avoir une utilisation légèrement plus compliqué que nous autre !)