28234 sujets

CSS et mise en forme, CSS3

[Résolu] Aligner les input d'un label

Salut Smiley cligne

Voilà, j'ai des <label>Texte : <input /></label> et je voudrais savoir comment faire pour que tous mes input commencent au même endroit (je veux dire que chacun soit décallé de "Texte : " pour se ranger en colonne avec les autres)

Comment faire svp ? Smiley cligne
Modifié par Skybattle (13 May 2005 - 23:06)
Bonsoir,

une solution serait de créer un style pour les label de manière à leur donner une certaine largeur.

par exemple:


label{
	float: left;
	width: 35%;
	margin: 0px;
	padding: 0px;
	display: block;

}




<label for="idtext">Blabla : </label>
<input type="text" id="idtext" name="idtext" value="" />
En utilisant un tableau

Enfin moi c'est ce que je fait lol


<table>
<tr>
<td>Texte :</td>
<td><input type="text"></td>
</tr>

<tr>
<td>Texte :</td>
<td><input type="text"></td>
</tr>
</table>
Modérateur
Utilise un tableau. Smiley eek

Quoi ? Je l'ai dis ? Oui, j'avous, je viens de le faire. J'ai dis de prendre un tableau. Bah quoi ! Smiley confused J'utilise encore les tableaux pour les formulaires, et j'avais pourtant essayé sans tableau, mais des problèmes d'affichage et la complexité du balisage pour certains cas précis m'ont fait revenir en arrière, à mon grand soulagement. À noter que j'utilise quand même les labels et les balises nécessaires pour le côté sémantique et accessibilité.

Merkel, qui passera bientôt à l'émission Francaise : C'est mon choix!
Modifié par Merkel (13 May 2005 - 22:49)
Je vais opter pour la solution de oli je crois Smiley lol (merci à toi)

Mais je pensais que les label devaient contenir un input ; alors dans ce cas, quelle différence entre label et span ?
Modérateur
Un label permet de lier un texte à un input. C'est pour identifier le champ.


...
<label for="prenom">Prénom :</label><input type="text" id="prenom" name="nom" value="" />
...


En cliquant sur le label Prénom, le focus du curseur va dans l'input grâce à l'attribut for.
Voici ma méthode :

<label></label>
<input type=""... /><br />
<label></label>
<input type=""... /><br />

label {
float: left;
width: 200px;
}

br {
clear: both;
}
Et la mienne :


label {
 width: 150px;
 float: left;
 text-align: right;
 margin: 0 10px 0 0;
}

<p>
 <label for="toto1">Etiquette</label>
 <input name="toto1" id="toto1" type=""... />
</p>

<p>
 <label for="toto2">Etiquette</label>
 <input name="toto2" id="toto2" type=""... />
</p>

<p>
 <label for="toto3">Etiquette</label>
 <input name="toto3" id="toto3" type=""... />
</p>

Modifié par jb_gfx (14 May 2005 - 02:50)
Modérateur
Tu donne un ID unique au input, et tu lui met un label avec la valeur du ID dans son attribut for. C'est ce qui permet de lier le libellé avec le champ. Dans les navigateurs que j'ai essayé, cela permet aussi à l'utilisateur de cliquer sur le label pour donner le focus au champ qui y est relié.
Sujet clos
Aller à