[Résolu] Mise en forme d'un formulaire

Bonjour,

Je suis nouvelle ici et débutante en HTML et CSS. J'essaie de mettre en forme un formulaire et je bloque pour aligner correctement les champs.

Je me suis inspirée de différents modèles trouvés à droite à gauche....

J'aimerais que les jours soient alignés horizontalement sur deux lignes
jours : lun mar mer jeu
ven sam dim

<div id="stylized" class="myform">
<h1>Rechercher un horaire</h1>
<form id="form" action="index.html" method="post"> <label>Lieu de départ </label> <input id="depart" name="depart" type="text" /> <label>Lieu d'arrivée</label> <input id="destinationl" name="destination" type="text" /><label>Horaires</label><span class="texte">Entre</span><select name="entre"> <option value="1">00:00</option> <option value="2">01:00</option> <option value="3">02:00</option> </select>et<select name="et"> <option value="1">00:00</option> <option value="2">01:00</option> <option value="3">02:00</option> </select><label>Jours</label> Lun<input name="lun" type="checkbox" /></span> Mar<input  name="mar" type="checkbox" />Mer<input name="mer" type="checkbox" />Jeu<input name="jeu" type="checkbox" /> Ven<input  name="ven" type="checkbox" /> Sam<input name="sam" type="checkbox" /> Dim<input name="dim" type="checkbox" /><label>Date<span class="small">JJ/MM/AAAA (Facultatif)</span> </label> <input id="date" name="date" type="text" /> <button>Rechercher</button> </form></div>

/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ----------- stylized ----------- */
#stylized{
border:solid 2px #aacfe4;
background:#f6f6f6;
}

#stylized h1 {
font-size:16px;
font-weight:bold;
margin-bottom:8px;
color:#666666;
}

#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #f6f6f6;
padding-bottom:10px;
}

#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}

#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}

#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}

#stylized select{
width:80px;
}

#stylized .texte{
float:left;
display:block;
padding:4px 2px;
margin-left:10px;
}


#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:white;
font-size:11px;
font-weight:bold;
}

Merci par avance pour votre aide qui sera grandement appréciée !
Modifié par thelma (08 Sep 2010 - 16:51)

Si j'ai bien compris ce que tu veux, il te suffirait d'encapsuler les inputs des jours dans un div flottant à côté du label (ne pas oublier de fixer une largeur à ce div).

Hello thelma et bienvenue,

je t'invite tout d'abord à lire : Utilisez l’élément label dans les formulaires.

Du coup cela peut donner :

		<p>Jours</p>
		<label for="lun">Lun</label>
		<input type="checkbox" name="lun" id="lun" />
		<label for="mar">Mar</label>
		<input type="checkbox" name="mar" id="mar" />
		<label for="mer">Mer</label>
		<input type="checkbox" name="mer" id="mer" />
		<label for="jeu">Jeu</label>
		<input type="checkbox" name="jeu" id="jeu" />
		<label for="ven">Ven</label>
		<input type="checkbox" name="ven" id="ven" />
		<label for="sam">Sam</label>
		<input type="checkbox" name="sam" id="sam" />
		<label for="dim">Dim</label>
		<input type="checkbox" name="dim" id="dim" />

Et plutôt que d'utiliser float tu pourrais faire des tests avec display:inline-block (à affecter aux éléments LABEL et INPUT).

@keyraw

oui c'est bien ça. J'ai fait un test et ça marche. J'ai aussi ajouté un padding à select sinon ça partait dans tous les sens (je n'arrive pas bien à comprendre ce mécanisme...)

<div id="stylized" class="myform">
<h1>Rechercher un trajet</h1>
<form id="form" action="index.html" method="post"> <label>Jours</label>
<div class="jours">Lun<input name="lun" type="checkbox" /> Mar<input name="mar" type="checkbox" /> Mer<input name="mer" type="checkbox" /> Jeu<input name="jeu" type="checkbox" /> Ven<input name="ven" type="checkbox" /> Sam<input name="sam" type="checkbox" /> Dim<input name="dim" type="checkbox" /></div>
<label>Date<span class="small">JJ/MM/AAAA (Facultatif)</span> </label> <input id="date" name="date" type="text" /> <button>Rechercher</button> </form></div>

#stylized select{
width:80px;
padding:2px;
}

#stylized .jours{
float:left;
width:200px;
padding:4px 2px;
margin:2px 0 0 10px;
}

@Heyoan
Je vais lire l'article et tester également cette méthode et je te dirais si je m'en sors

Edit : je viens de tester sur d'autres navigateurs et ça ne fonctionne pas sur tous Dommage...
Je poursuis mes tests
Modifié par thelma (08 Sep 2010 - 13:17)

La valeur 'inline-block' pour la propriété display n'est pas comprise par IE version < 8. Pour l'obtenir il faut faire une feuille de style alternative en remplaçant display:inline-block; par display:inline; zoom:1; . Après le comportement est le même.

Je te conseille aussi d'opter pour cette façon de faire plutôt qu'avec le flottant, elle est très pratique pour les formulaires.

keyraw a écrit :
La valeur 'inline-block' pour la propriété display n'est pas comprise par IE version < 8.

Si : pour les éléments de type en-ligne tels que LABEL et INPUT.

Edit: ton correctif est donc à spécifier uniquement pour les éléments de type bloc.
Modifié par Heyoan (08 Sep 2010 - 14:16)

Oui, très juste j'ai parlé un peu vite, j'aurais du dire "n'est pas bien comprise"

Merci de surveiller mes paroles Heyoan !

Je continue de me débattre avec mon formulaire. Je crois que j'ai identifié le problème. IE et mozilla considère que mes checkbox font 250px (cad la même taille que INPUT type="text").
J'ai tenté de créer une class pour Input de façon à différencier mais sans succès.

EDIT
OK ça y est c'est résolu ! c'est pas complètement fini mais ça semble en bonne voie
Voilà le code pour ceux que cela intéresse

Merci pour l'aide précieuse

<div id="stylized" class="myform">
<h1>Rechercher un trajet</h1>
<form id="form" action="index.html" method="post"> <label for="depart">Départ </label> <input id="depart" class="text" name="depart" type="text" /> <label for="arrivee">Arrivée</label> <input id="destination" class="text" name="destination" type="text" />
<div class="jours"><label>Horaires</label> Entre <select name="entre"> <option value="1">00:00</option> <option value="2">01:00</option> <option value="3">02:00</option> </select> et <select name="et"> <option value="1">00:00</option> <option value="2">01:00</option> <option value="3">02:00</option> </select> <label>Jours</label> Lun<input id="lun" name="lun" type="checkbox" /> Mar<input id="mar" name="mar" type="checkbox" /> Mer<input id="mer" name="mer" type="checkbox" /> Jeu<input id="jeu" name="jeu" type="checkbox" /> Ven<input id="ven" name="ven" type="checkbox" /> Sam<input id="sam" name="sam" type="checkbox" /> Dim<input id="dim" name="dim" type="checkbox" /></div>
</form> <label for="date">Date</label> <input id="date" class="text" name="date" type="text" /> <button>Rechercher</button></div>

/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:420px;
padding:14px;
}

/* ----------- stylized ----------- */
#stylized{
border:solid 2px #aacfe4;
background:#f6f6f6;
}

#stylized h1 {
font-size:16px;
font-weight:bold;
margin-bottom:8px;
color:#666666;
}


#stylized p{ 
display:-moz-inline-box;
display:inline-block;
font-weight:bold;
text-align:right;
padding:4px 2px;
width:70px;
margin:2px 5px 20px 10px;
}

#stylized label{
display:-moz-inline-box;
display:inline-block;
margin:2px 5px 20px 10px;
width:70px;
font-weight:bold;
text-align:right;
padding:4px 2px;}

#stylized input.text {
border:solid 1px #aacfe4;
width:250px;}

#stylized select {
width:100px;
padding:4px 2px;
}

#stylized checkbox {
width:10px;
padding:4px 2px;
}

#IE #inscription label,
#IE #inscription .input-submit{display:inline;}

#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:white;
font-size:11px;
font-weight:bold;
}

Modifié par thelma (08 Sep 2010 - 16:48)

thelma a écrit :
c'est pas complètement fini mais ça semble en bonne voie

Il manque au minimum la prise en compte de ma remarque sur l'utilisation pertinente des éléments LABEL.

Oui j'ai tenté et après de nombreux essais infructueux j'ai laissé tomber.

Est-ce que je m'y suis pris correctement ? sans doute que non...

Si je fais comme tu dis, je devrais avoir alors 2 types de label:
- LABEL #1 pour les champs texte : départ arrivée date
- une balise p, pour horaire et jours, qui reprendrait les mêmes propriétés que label ci-dessus
- LABEL #2: entre, et, lun, mar,... avec des propriétés différentes

Jusqu'à présent, je n'ai pas réussi à créer mes deux types de LABEL. J'avais un écart très important entre le label#2 et les checkbox
J'ai tenté de modifier les largeurs, les marges, sans succès.
J'avais dû faire qq dans ce genre là :

<label for"lun" class="jours">lun</label>

#stylized label.jours{ 
display:-moz-inline-box; 
display:inline-block;
font-weight:normal; 
text-align:right; 
}

Mais je vais peut-être finir par y arriver

Bonjour,

je pense que c'est une coquille mais l'élément checkbox n'existe pas dans

#stylized checkbox { 
width:10px; 
padding:4px 2px; 
} 

C'est la classe .checkbox

Mais un passage aux validateurs HTML et CSS du W3C devraient te le dire

Merci Felipe. En effet, c'était bien une erreur.

@Heyoan
Je crois que ça y est cette fois.
Avec une utilisation des élément label pertinente (je crois). Il faudrait que je puisse tester sous IE et consorts.
Je voulais signaler aussi un article qui m'a bien servi : http://www.lesintegristes.net/2008/06/18/utiliser-la-propriete-displayinline-block/

<div id="stylized" class="myform">
<h1>Rechercher un trajet</h1>
<form id="form" action="index.html" method="post"> 
<label for="depart">Départ </label> 
<input id="depart" class="text" name="depart" type="text" /> <br>
<label for="destination">Arrivée</label> 
<input id="destination" class="text" name="destination" type="text" /><br>
<p>Horaires</p> 
<label for="entre" class="jours">Entre</label> 
<select name="entre"> 
<option value="1">00:00</option> 
<option value="2">01:00</option> 
<option value="3">02:00</option> </select> 
<label for="et" class="jours">et </label>
<select name="et"> 
<option value="1">00:00</option> 
<option value="2">01:00</option> 
<option value="3">02:00</option> </select> <br>
<p>Jours</p>
<label for="lun" class="jours2">Lu</label><input id="lun" name="lun" type="checkbox" /> 
<label for="mar" class="jours2">Ma</label><input id="mar"  name="mar" type="checkbox" /> 
<label for="mer" class="jours2">Me</label><input id="mer"  name="mer" type="checkbox" /> 
<label for="jeu" class="jours2">Je</label><input id="jeu"  name="jeu" type="checkbox" /> 
<label for="ven" class="jours2">Ve</label><input id="ven"  name="ven" type="checkbox" /> 
<label for="sam" class="jours2">Sa</label><input id="sam"  name="sam" type="checkbox" /> 
<label for="dim" class="jours2">Di</label><input id="dim"  name="dim" type="checkbox" /><br>
<label for="date">Date </label> 
<input id="date" class="text" name="date" type="text" /><label class="small">JJ/MM/AAAA (Facultatif)</label> 
<input type="submit" value="Rechercher" class="button" /></form> </div>

/* ----------- My Form ----------- */ 
.myform{ 
margin:0 auto; 
width:450px; 
padding:14px; 
} 
 
/* ----------- stylized ----------- */ 
#stylized{ 
border:solid 2px #aacfe4; 
background:#f6f6f6; 
} 
 
#stylized h1 { 
font-size:16px; 
font-weight:bold; 
margin-bottom:8px; 
color:#666666; 
} 
 
 
#stylized p{  
display:-moz-inline-box; 
display:inline-block; 
font-weight:bold; 
text-align:right; 
padding:4px 2px; 
width:70px; 
margin:2px 5px 20px 10px; 
} 
 
#stylized label{ 
display:-moz-inline-box; 
display:inline-block; 
margin:2px 5px 20px 10px; 
width:70px; 
font-weight:bold; 
text-align:right; 
padding:4px 2px;} 

#stylized label.jours{ 
font-weight:normal; 
text-align:right; 
width: 35px;
margin:0px;
padding:0px;
} 

#stylized label.jours2{ 
font-weight:normal; 
text-align:right; 
width:17px;
margin: 0px;
padding: 0px;
} 

#stylized label.small{ 
font-weight:normal;
font-size: 80%;
width:70px; 
} 
 
#stylized input.text { 
border:solid 1px #aacfe4; 
width:200px;
} 
 
#stylized select { 
width:70px; 
padding:4px 2px;
} 
 
#IE #inscription label, 
#IE #inscription .button{display:inline;} 
 
#stylized .button{ 
clear:both; 
margin-left:150px; 
width:125px; 
height:31px; 
background:#666666 url(img/button.png) no-repeat; 
text-align:center; 
line-height:31px; 
color:white; 
font-size:11px; 
font-weight:bold; 
}

Une chose est sure, je devrais être bien classée au championnat de la prise de tête.
Modifié par thelma (08 Sep 2010 - 20:37)

thelma a écrit :
Une chose est sure, je devrais être bien classée au championnat de la prise de tête.

Mais ça en valait la peine !

Juste un pitit détail : tu as bien renseigné le LABEL for pour les éléments SELECT mais tu as oublié de leur affecter l'id correspondant.
Modifié par Heyoan (08 Sep 2010 - 20:59)

Ok corrigé ! J'en suis à mon troisième formulaire avec cette technique ! Merci encore !