Alignement vertical avec des champs inputs

Boisoir a tous

je sais si je suis dans le bon forum ! mes excuses sinon !

Voici mon code

Code:

---

1 2 3 4

<label><font color="red">Nom* : <input class="majusculeb" type="text" name="first_name" id="first_name" size= 30px required="required"/></font></label> <label><font color="red">Prénoms* : <input class="majusculea" type="text" name="last_name" id="last_name" size= 69px required="required"/></font></label> <label><font color="red">Date de Naissance* : <input type="date" name="last_naiss" id="last_naiss" size= 15px placeholder="EX : 01/01/2000" required="required"/></font></label> <label><font color="red">Lieu de Naissance* : <input class="majusculeb" type="text" name="last_lieu" id="last_lieu" size= 50px required="required"/></font></label>

---

et voila en image ce que ça produit :
Pièce jointe 203179

Je voudrais que le début des champs sois tous aligné de manière verticale (comme les libellés des champs). Commet dois je procéder ?

Merci a tous

Bonjour,
• commence par supprimer les <font color="red"></font> de ton code.
• ajoute un display:inline-block sur tes <label>.
• ajoute une width:12em, par exemple, sur tes <label>.

cela devrait le faire en ayant une structure

Code:

---

<p><label></label><input></p>

---

et le CSS

Code:

---

1 2 3 4 5

label { display:inline-block; width:12em; color:red; }

---

Merci je vais tester et vous faire un retour.

Bonsoir

Je viens de tester. Voici mon code modifié ! mais j'ai pas les effets que je souhaitait

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

p><label></label>N° Table (BAC)* : <input type="number" name="bac_name" id="bac_name" size= 40px required="required"/></p> <p><label></label>Nom* : <input class="majusculeb" type="text" name="first_name" id="first_name" size= 30px required="required"/></p> <p><label></label>Prénoms* : <input class="majusculea" type="text" name="last_name" id="last_name" size= 69px required="required"/></p> <p><label></label>Date de Naissance* : <input type="date" name="last_naiss" id="last_naiss" size= 15px placeholder="EX : 01/01/2000" required="required"/></p> <p><label></label>Lieu de Naissance* : <input class="majusculeb" type="text" name="last_lieu" id="last_lieu" size= 50px required="required"/></p> <p><label></label>Sexe* : <select name="last_sex"> <option value="-1">--Sexe--</option> <option value="F">F</option> <option value="M">M</option> </select> <p><label></label>Télephone* : <input type="text" name="last_tel" id="last_tel" size= 50px required="required"/></p> <p><label></label>Email* : <input type="text" name="last_mail" id="last_mail" size= 40px required="required"/></p> <p><label></label>Contact parents* : <input type="text" name="last_parent" id="last_parent" size= 40px required="required"/></p>

---

et voici ce que j'ai :
Pièce jointe 203322

Les debuts de zone de saisies ne sont pas aligné verticalement ! et j'ai la couleur rouge qui a disparu. ?

Merci

Bonjour,

il faut que tu te documentes sur la syntaxe :

• Personnalisation d'un formulaire XHTML avec CSS

Utilisation des <label> :

Code:

---

1 2 3 4

<p> <label for="id_du_blabla">blabla : </label> <input id="id_du_blabla" type="text" name="blabla" /> </p>

---

Quant à la couleur rouge, c'est dans le CSS qu'on la définit (comme ça t'a déjà été indiqué) :

Code:

---

1 2 3 4 5

form label { display:inline-block; width:12em; color:red; }

---