Declage dans le champ de saisie et labels

salut
je veut crée deux champ de saisie (login et password), mais j'ai un problème dans le positionnement des champs labels et le champ de saisie.

HTML

<form action="">
	
<label>Logon:</label> <input type="text" class="input" />
<label>Password: </label> <input type="password" class="input" />    
<label>&nbsp; </label> <input type="submit" value="Submit" class="button" />
</form>

CSS

	
.input {
    border: 1px solid #006;
    background: #ffc;
}


.input:hover {
    border: 1px solid #f00;
    background: #ABC8E2;
}


label {
   
    width: 150px;
    float: left;
    margin: 2px 4px 6px 4px;
    text-align: middle;
}
br { clear: left; }

et voila comment est le décalage:

Euh .... ca parait evident, mais tes labels sont en float:left ...

désoler ,mais vous voulez dire que je doit enlever la dernière ligne(br { clear: left; }) ?
parce que j'ai essayer d'enlever cette ligne mais ça n'a pas corriger le problème .
Modifié par yotta (16 Mar 2011 - 18:53)

Quel est le rendu souhaité au juste?
Pour corriger le problème actuel, tu peux supprimer le float:left sur tes labels.

Ça serait bien aussi de corriger le code HTML:
- Pas d'élément LABEL vide utilisé pour de la mise en page (et puis quoi encore? ).
- Il faudrait utiliser des LABEL explicites, sinon ça ne sert pas à grand chose. Donc penser à bien utiliser les attributs id (sur les INPUT) et for (sur les LABEL).
Modifié par fvsch (16 Mar 2011 - 19:12)

merci,le problème est corrigé en supprimant le Float sur les LABEL.

mais pour les deux remarques:

- Pas d'élément LABEL vide utilisé pour de la mise en page (et puis quoi encore? cligne ).
- Il faudrait utiliser des LABEL explicites, sinon ça ne sert pas à grand chose. Donc penser à bien utiliser les attributs id (sur les INPUT) et for (sur les LABEL).

je n'est pas bien saisie la signification (je suis nouveau avec le CSS),sa serai sympa que vous m'explique une peut d'avantage .

yotta a écrit :
je n'est pas bien saisie la signification (je suis nouveau avec le CSS)

En fait ces remarques ne portent pas sur le code CSS, mais sur le code HTML.
Voici un code HTML propre pour ce formulaire:

<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>

Les paragraphes ne sont pas indispensables, mais aideront pour la mise en forme.
J'ai supprimé l'élément LABEL vide (le code était <label>&nbsp; </label>) et j'ai rajouté des attributs id sur les INPUT et for sur les LABEL. Ainsi quand on clique sur un label, le focus passe sur le champ correspondant (c'est un mécanisme particulièrement utile pour les cases à cocher et boutons radio, et surtout ça rend le formulaire beaucoup plus accessible).

Dans le code de départ il me semble que l'élément LABEL vide servait à créer un espace blanc à gauche du bouton Submit. Ce genre de mise en forme se fera autant que possible en CSS, plutôt qu'avec des éléments vides. Avec le code HTML que je propose, on peut par exemple appliquer un padding-left au paragraphe qui porte la classe "send".

Enfin, j'ai supprimé les classes sur les éléments INPUT. En effet, on peut utiliser les sélecteurs suivants pour viser ces éléments:

input[type="text"] {}
input[type="button"] {}
input[type="submit"] {} /* ".send input" marcherait aussi */

Modifié par fvsch (17 Mar 2011 - 13:43)

merci pour le coup de main,je trouve que c'est plus organiser ce que tu a fait.
mais comme je suis débutant je n'est pas trouver l'effet de Focus que tu a mentionné et je vouderai savoir comment en peut changer la couleur du champ de saisie quand la sourie est sur ce dernier(je ne pas trouver comment utiliser le HOVER)?
merci

Faire des recherches sur les pseudo-classes :hover et :focus.
Il n'y a pas de mal à être débutant... mais on trouve plein d'informations de qualité en cherchant par soi-même.

juste une petite question,je veux 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é

#field-login label, #field-password label
{
display:block;
width:150px;
float:left;
}

Modifié par yotta (18 Mar 2011 - 22:06)

bonjour,

les label sont par défaut inline.
Le float pose des problèmes pour les debutants (voir clear et contextes de formatage difficile a appréhender au début)
le display:block; provoque un retour a la ligne.

reste le display:inline-block(au lieu de float) qui permet de leur donner une largeur et de les gardé sur leur ligne, c'est d'ailleurs le display par défaut des élément input, rien de dangereux donc .

en faisant usage de l'architecture proposé par fvsh et en appliquant au label un display:inline-block au lieu de float, ton probleme devrait se resoudre.

bon apprentissage

merci bien. mais juste une question que j'ai bien chercher mais sans trouve de réponse claire: pourquoi en utilise le FOR pour indiquer l'ID du label ?

yotta a écrit :
merci bien. mais juste une question que j'ai bien chercher mais sans trouve de réponse claire: pourquoi en utilise le FOR pour indiquer l'ID du label ?

Attention, ne pas confondre! Ce qui vient après le for indique l' id de l'input sur lequel pointe le label , il ne s'agit aucunement de l'id du label.

yotta a écrit :
j'ai essayer ce qui suit mais sa n'a pas marché

Ces sélecteurs CSS sont faux, ils ne correspondent pas du tout au code HTML.
Solution: apprendre les sélecteurs CSS 2.1.
Ici c'est le sélecteur d'attribut qui te serait utile pour viser ces éléments LABEL séparément.

yotta a écrit :
pourquoi en utilise le FOR pour indiquer l'ID du label ?

Dans le code HTML que je propose, les LABEL n'ont pas d'attributs id. Je me contente d'utiliser l'attribut for pour établir un lien logique entre le LABEL et l'élément INPUT (ou SELECT ou TEXTAREA...) auquel il correspond. Si tu ne déclares pas ce lien logique le navigateur ne peut pas le deviner tout seul, et:
- lorsqu'on clique sur l'élément LABEL, il ne se passe rien (alors que si le navigateur sait à quel contrôle de formulaire le label correspond, il donne le focus à ce contrôle de formulaire);
- certaines aides techniques telles que les lecteurs d'écran auront plus de mal à lire correctement le formulaire.