Discussion :

[devalender]

Boisoir a tous

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

Voici mon code

Code html :

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

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 :


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

[NoSmoking]

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

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

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

et le CSS

Code css :

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

1
2
3
4
5
label {
  display:inline-block;
  width:12em;
  color:red;
}

[devalender]

Merci je vais tester et vous faire un retour.

[devalender]

Bonsoir

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

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


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

Merci

[Invité]

Bonjour,

il faut que tu te documentes sur la syntaxe :

• Personnalisation d'un formulaire XHTML avec CSS

Utilisation des <label> :

Code html :

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

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

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

1
2
3
4
5
form label {
  display:inline-block;
  width:12em;
  color:red;
}