Discussion :

[gabier]

Bonjour,
Je n'ai encore jamais utilisé les formulaires HTML.
J'essaie donc d'en faire un avec plusieurs champs INPUT.

Code html :

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

1
2
3
4
5
6
7
8
 
<form>
     <label>champ avec long libellé</label>
     <input type="text" name="un" size="6" ><br/>
     <label>champ avec libellé court</label>
     <input type="text" name="deux" size="6" /><br/>
     <input type="submit" value="Envoi"  />
</form>

On voit que les étiquettes ont des longueurs différentes or je voudrais que les champs "input" soient sur la même ligne que leur label, mais que les deux champs input soient calés sur la même verticale à droite. Le formulaire est dans une boîte div.
J'ai essayé de faire une classe "input" avec un text-align, mais ça ne marche pas
CSS

Code :

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

.input{text-align:right;}

HTML

Code html :

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

1
2
3
4
5
6
7
8
 
<form>
     <label>Champ1</label>
     <input class="input" type="text" name="Un" size="6" ><br/>
     <label>Champ2</label>
     <input class="input" type="text" name="Deux" size="6" /><br/>
     <input type="submit" value="Envoi"  />
</form>

Comment faire ?

Gabier

[Invité]

Bonjour,

Code css :

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

1
2
3
form#myform label { display:inline-block; width:100px; }
form#myform input { display:inline-block; }
form#myform input[type=submit] { color:#fff; background-color:green; }

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
<form id="myform">
	<p>
		<label for="idUn">Champ1 :</label>
		<input id="idUn" type="text" name="Un" size="6" ><br/>
	</p>
	<p>
		<label for="idDeux">Champ2 :</label>
		<input id="idDeux" type="text" name="Deux" size="6" /><br/>
 	</p>
	<p>
		<label></label>
		<input type="submit" value="Envoi"  />
 	</p>
</form>

=> Personnalisation d'un formulaire XHTML avec CSS
=> Créez des formulaires fabuleux avec HTML5

[gabier]

Merci Jérôme,
J'ignorais ces instructions CSS spécifiques aux formulaires. Cela marche très bien.