aligner les input !

Version imprimable

10/04/2006, 16h08
Tr@nkill

aligner les input !

Bonjour voila j'aimerai aligner tous mes input dans mon formulaire , mais la tout est alligné par rapport au nom que je leur met a gauche ! je voudrai plutot aligner du coté droit tous ces input. comment faire ? avec ou sans css ?
10/04/2006, 16h11
Yoshidu62

Tu peux peut-être utiliser la balise <pre>, c'est pratique pour placer les éléments, mais je trouve pas ça superbe comme méthode, ça rend brouillon le code.
10/04/2006, 16h11
franculo_caoulene

Salut,

Regarde la partie contenant les checkbox (dernier fieldset) : http://www.developpez.net/forums/viewtopic.php?t=444863
10/04/2006, 16h20
Tr@nkill

http://img101.imageshack.us/img101/8...eenpage8bv.jpg

voila ce que ca donne la si je ne suis pas assez clair

et aussi pour ajuster la largeur du formulaire en fonction de la plus grande zone de saisie ! ici le textarea !

et voila un peu la mise en page que je voudrai que ca donne ! j ai utilisé le meme .css mais en le simplifiant et aussi parce que mon formulaire etait pas fait pareil.

http://img139.imageshack.us/img139/1...souhait0dt.jpg
10/04/2006, 16h33
Yoshidu62

Pour la taille de ton formulaire, il faut que tu réduise la taille du fieldset avec le css, et pour placer tes inputs tu peux utiliser la balise <pre>
10/04/2006, 16h35
franculo_caoulene

Et mon code source? il sert à rien mon code source?
11/04/2006, 08h43
Tr@nkill

euh oui ton code source ... ou pourrais je trouver des infos sur les CSS, du genre signification des attributs etc ...

sinon j en suis arrivé la ! je chauffe ....

http://img92.imageshack.us/img92/7469/progres4jx.jpg
11/04/2006, 10h13
Tr@nkill

bon mainteant c a peu pres aligné, mais on dirais que ca m aligne les input au centre .... je ne sais pas comment faire !

http://img135.imageshack.us/img135/6013/progres27iz.jpg

Je suis bourrin lorsqu'il s'agit de faire un truc pareil.

Soit tu utilise une table (déconseillé), soit tu créer une div par ligne.

Pour chaque ligne tu met un span pour le libellé auquel tu associe une classe de taille fixe et float left ainsique ton champ en float left.
Code:

1 2 3 4 5 6 7 8 9 10 11 <style> .Formligne { width:300px; } .FormLibelle { float:left;width:100px;text-align:right; } .FormInput { float:left;width:150px; } </style> <div class="FormLigne"> <span class="FormLibelle">Nom</span> <input type="text" name="nom" class="FormInput" /> </div>
Perso je trouve que le code est mieux découpé de cette façon.

11/04/2006, 11h39
Tr@nkill

ca merde tjs !

http://img93.imageshack.us/img93/752...donnela8bg.jpg
11/04/2006, 11h46
franculo_caoulene

Et on devine ton code (x)html et css? Donne nous un lien ce sera plus simple.

ok mon code !!!
le .css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
/*** Mise en forme de la page ***/
 
body {
	margin: 1em;
	padding: 0;
	font: .8em arial, hevetica, sans-serif;
	text-align: center;
	color: black;
	background: white;
 
}
/*** Mise en forme du formulaire ***/
 
#titreForm, #piedForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: Black;
	padding: .5em;
	width:60%;
}
#piedForm {
	text-align: right; /*** Les boutons sont alignés à droite ***/
}
#corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	border: 1px solid black;
	color: black;
	background: #eeeeee;
	width:60%;	
 
}
#corpForm input {
		margin-left: 50px;
}
#corpForm fieldset {	/*** Mise en forme des cadres ***/
 
	font-style: normal;
	padding: 0 1em 1em;
}
#corpForm legend {	/*** Mise en forme des titres des cadres ***/
	font-weight: bold;
	color: black;
	background: transparent;
}
#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	margin: 0 0 .2em 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;
 
}
#corpForm label {
	float: center;
	width:100px;
	text-align: right;	
}
#corpForm .legende {	/*** Mise en forme des aides contextuelles ***/
	font-style: italic;
	color: #666;
	background: transparent;
 
}
 
#corpForm .focus {	/*** Mise en avant des champs en cours d'utilisation ***/
	background: beige;
	color: black;
}
#corpForm .normal {	/*** Retour à l'état normal après l'utilisation ***/
	background: white;
	color: black;
}

et le .php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
<head>
<link href="form2.css" rel="stylesheet" type="text/css"> 
</head>
<body>
<?php
 
echo "<form method='POST' name='enregdonnees' ACTION='enregform.php'>";
//connexion a la base
$hostname = "localhost";
$database = "calendrier";
$username = "root";
$password = "";
mysql_pconnect($hostname, $username, $password) or die(mysql_error());
@mysql_select_db($database) or die("Impossible de se connecter");
 
 
        $table="projet";
        //recupere les information sur la table choisie
        $req="SHOW FULL COLUMNS FROM ".$table;
        $result=mysql_query($req);
        $ligne=mysql_fetch_array($result);
        $i=0;
 
        while ($ligne)
        {
                //enregistre dans un tableau nom de l'attribut, son type et si c'est une clé primaire
                $tab[$i][0]=$ligne['Field'];
                $tab[$i][1]=$ligne['Type'];
                $tab[$i][2]=$ligne['Key'];
                
 
                $ligne=mysql_fetch_array($result);
                $i++;
        }
        echo "<div id=\"titreForm\">Ajout de données dans une table</div>";
        echo "<div id=\"corpForm\">";
        echo "<fieldset>";
        echo "<legend><h3>Table : ".$table."</legend></h3>";
        //enregistrement du tableau dans une variable de session de facon a pouvoir le transmettre sur la page d'enreg
         $taille=count($tab);
         for ($i=0;$i<$taille;$i++)
         {
 
 
                // switch permettant de creer un input different selon le type de données
                switch ($tab[$i][1])
                {
                        //si l'attribut est de type varchar, zone de saisie de texte
                        case (eregi("^varchar",$tab[$i][1])==true) :
                                echo "<p><label>".$tab[$i][0]." : </label><input type='text' name='".$tab[$i][0]."' cols='40' onfocus=\"this.className='focus';\" onblur=\"this.className='normal';\"></textarea></p>";
                        break;
 
                         //si l'attribut est de type set, checkbox
                        case (eregi("^set",$tab[$i][1])==true) :
                                
                                echo "<p>";
                                //on creer un tableau contenant les differentes valeurs que peut prendre l'attribut
                                if (eregi('^(set)\((.+)\)$', $tab[$i][1], $tmp)) 
                                {
                                        $tmp[2] = substr(ereg_replace('([^,])\'\'', '\\1\\\'', ',' . $tmp[2]), 1);
                                        $valeurs[$tab[$i][1]]=explode(",",$tmp[2]);
                                        echo "<fieldset>";
                                        echo "<legend>".$tab[$i][0]."</legend>";
                                        foreach($valeurs[$tab[$i][1]] as $j => $valeur) 
                                        {       
                                                $valeurs[$tab[$i][1]][$j]=substr($valeur,1,strlen($valeur)-2);
                                                echo "<p>".$valeurs[$tab[$i][1]][$j]." : <input type='checkbox' name='".$tab[$i][0]."[]' value='".$valeurs[$tab[$i][1]][$j]."'></p>";;
                                        }
                                 }
                                 echo "</fieldset></p>";
                        break;
 
                        //si l'attribut est de type enum, boutons radio ou select
                        case (eregi("^enum",$tab[$i][1])==true) :
                                
                        echo "<p>";
                                //on creer un tableau contenant les differentes valeurs que peut prendre l'attribut
                                if (eregi('^(enum)\((.+)\)$', $tab[$i][1], $tmp)) 
                                {
                                        $tmp[2] = substr(ereg_replace('([^,])\'\'', '\\1\\\'', ',' . $tmp[2]), 1);
                                        $valeurs[$tab[$i][1]]=explode(",",$tmp[2]);
                                        
                                        
                                        //select si plus de 3 choix et radio si moins
                                        if ((count($valeurs[$tab[$i][1]]))>3)
                                        {
                                                echo "<p><label>".$tab[$i][0]." : </label>";
                                                echo "<select name='".$tab[$i][0]."' onfocus=\"this.className='focus';\" onblur=\"this.className='normal';\">";
                                                foreach($valeurs[$tab[$i][1]] as $j => $valeur) 
                                                {       
                                                        $valeurs[$tab[$i][1]][$j]=substr($valeur,1,strlen($valeur)-2);
                                                        echo "<option value='".$valeurs[$tab[$i][1]][$j]."'>".$valeurs[$tab[$i][1]][$j]."</option>";
                                                        
                                                }
                                                echo "</select>";
                                        }
                                        else
                                        {
                                                echo "<fieldset>";
                                                echo "<legend>".$tab[$i][0]."</legend>";
                                                foreach($valeurs[$tab[$i][1]] as $j => $valeur) 
                                                {       
                                                        $valeurs[$tab[$i][1]][$j]=substr($valeur,1,strlen($valeur)-2);
                                                        echo "<p><input type=radio name='".$tab[$i][0]."' value=".$valeurs[$tab[$i][1]][$j].">".$valeurs[$tab[$i][1]][$j]."</p>";
                                                }
                                                echo "</fieldset>";
                                        }
                                }
                                echo "</p>";
                        break;
 
                        //si l'attribut est de type int, zone de saisie de texte
                        case (eregi("int",$tab[$i][1])==true) :
                                
                                echo "<p><label>".$tab[$i][0]." : </label><input type='text' name='".$tab[$i][0]."'cols='20' onfocus=\"this.className='focus';\" onblur=\"this.className='normal';\"></textarea></p>";
                        break;
                        
                        //si l'attribut est de type text, zone de saisie de texte importante
                        case (eregi("text",$tab[$i][1])==true) :
                        
                                echo "<p><label>".$tab[$i][0]." : </label><textarea name='".$tab[$i][0]."' cols='30' row='8' onfocus=\"this.className='focus';\" onblur=\"this.className='normal';\"></textarea></p>";
                        break;
 
 
                        //si l'attribut est de type date, zone de saisie de date
                        case (eregi("^date",$tab[$i][1])==true) :
                                echo "<p><label>".$tab[$i][0]." : </label><input type=text name=".$tab[$i][0]." size=\"15\"  onfocus=\"this.className='focus';\" onblur=\"this.className='normal';\"></input> <span class=\"legende\">'AAAA-MM-JJ hh:mm'</span></p>";
                        break;
                                        
                        default : 
                                echo "Type non identifié <br>";
                        break;
                 }
         }
        echo "</fieldset></div>";
        echo "<div id=\"piedForm\">";
        echo "<INPUT TYPE='submit' NAME='valider' VALUE='VALIDER'>";
        echo "<INPUT TYPE='reset' VALUE='ANNULER'>";
        echo "</div></form></body>";
 
?>

11/04/2006, 14h13
franculo_caoulene

Pas de code php ici!!!! juste la source html généré par celui-ci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<head>
<link href="form2.css" rel="stylesheet" type="text/css"> 
</head>
<body>
<form method='POST' name='enregdonnees' ACTION='enregform.php'>
<div id="titreForm">Ajout de données dans une table</div>
<div id="corpForm">
<fieldset><legend><h3>Table : projet</legend></h3>
<p><label>id_projet : </label>
	<input type='text' name='id_projet'cols='20' onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></p>
<p><label>code_projet : </label>
	<input type='text' name='code_projet' cols='40' onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></p>
<p><label>lib_projet : </label>
	<input type='text' name='lib_projet' cols='40' onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></p>
<p><label>description : </label>
	<textarea name='description' cols='30' row='8' onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></p>
<p><label>communes_implantation : </label>
	<input type='text' name='communes_implantation' cols='40' onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></p>
<p><p><label>nat_m_ouvrage : </label>
	<select name='nat_m_ouvrage' onfocus="this.className='focus';" onblur="this.className='normal';">
	<option value='autre organisme privé'>autre organisme privé</option>
	<option value='Particulier'>Particulier</option><option value='syndicat'>syndicat</option></select></p>
<p><p><label>nat_projet : </label>
	<select name='nat_projet' onfocus="this.className='focus';" onblur="this.className='normal';">
	<option value='batiment privé'>batiment privé</option>
 
	<option value='station d\'épuration'>station d\'épuration</option>
	<option value='zone d\'activité'>zone d\'activité</option></select></p>
<p><fieldset><legend>contexte</legend>
	<p>1 pour cent paysage : <input type='checkbox' name='contexte[]' value='1 pour cent paysage'></p>
	<p>Logement social : <input type='checkbox' name='contexte[]' value='Logement social'></p>
	<p>Perimetre protégé : <input type='checkbox' name='contexte[]' value='Perimetre protégé'></p>
	<p>Subvention Etat : <input type='checkbox' name='contexte[]' value='Subvention Etat'></p></fieldset></p></fieldset>
	</div>
<div id="piedForm"><INPUT TYPE='submit' NAME='valider' VALUE='VALIDER'><INPUT TYPE='reset' VALUE='ANNULER'></div></form></body>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<form method='POST' name='enregdonnees' ACTION='enregform.php'>
<div id="titreForm">Ajout de données dans une table</div>
<div id="corpForm">
<fieldset><legend><h3>Table : projet</legend></h3>
<p><label>id_projet : </label>
   <input type='text' name='id_projet'cols='20' onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></p>
<p><label>code_projet : </label>
   <input type='text' name='code_projet' cols='40' onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></p>
<p><label>lib_projet : </label>
   <input type='text' name='lib_projet' cols='40' onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></p>
<p><label>description : </label>
   <textarea name='description' cols='30' row='8' onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></p>
<p><label>communes_implantation : </label>
   <input type='text' name='communes_implantation' cols='40' onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></p>
<p><p><label>nat_m_ouvrage : </label>
   <select name='nat_m_ouvrage' onfocus="this.className='focus';" onblur="this.className='normal';">
   <option value='autre organisme privé'>autre organisme privé</option>
   <option value='Particulier'>Particulier</option><option value='syndicat'>syndicat</option></select></p>
<p><p><label>nat_projet : </label>
   <select name='nat_projet' onfocus="this.className='focus';" onblur="this.className='normal';">
   <option value='batiment privé'>batiment privé</option>
 
   <option value='station d\'épuration'>station d\'épuration</option>
   <option value='zone d\'activité'>zone d\'activité</option></select></p>
<fieldset id="contexte"><legend>contexte</legend>
   <p><label>1 pour cent paysage : </label><input type='checkbox' name='contexte[]' value='1 pour cent paysage'></p>
   <p><label>Logement social : </label><input type='checkbox' name='contexte[]' value='Logement social'></p>
   <p><label>Perimetre protégé : </label><input type='checkbox' name='contexte[]' value='Perimetre protégé'></p>
   <p><label>Subvention Etat : </label><input type='checkbox' name='contexte[]' value='Subvention Etat'></p></fieldset></fieldset>
   </div>
<div id="piedForm"><INPUT TYPE='submit' NAME='valider' VALUE='VALIDER'><INPUT TYPE='reset' VALUE='ANNULER'></div></form></body> 
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
/*** Mise en forme de la page ***/
 
body {
   margin: 1em;
   padding: 0;
   font: .8em arial, hevetica, sans-serif;
   text-align: center;
   color: black;
   background: white;
 
}
/*** Mise en forme du formulaire ***/
 
#titreForm, #piedForm {   /*** Mise en forme du titre et du pied de formulaire ***/
   font: bold 1.1em arial, hevetica, sans-serif;
   color: white;
   background: Black;
   padding: .5em;
   width:60%;
}
#piedForm {
   text-align: right; /*** Les boutons sont alignés à droite ***/
}
#corpForm {   /*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
   border: 1px solid black;
   color: black;
   background: #eeeeee;
   width:60%;
   text-align: left;
 
}
#corpForm input, #corpForm textarea, #corpForm select {
      margin-left: 10px;
	clear:both;
}
 
#corpForm fieldset {   /*** Mise en forme des cadres ***/
 
   font-style: normal;
   padding: 0 1em 1em;
}
 
#corpForm legend {   /*** Mise en forme des titres des cadres ***/
   font-weight: bold;
   color: black;
   background: transparent;
}
 
#corpForm p {   /*** Mise en forme des lignes du formulaire ***/
   margin: 0 0 .2em 0;
   padding: 0 .5em 0 0;
   line-height: 1.8;
 
}
#corpForm label {
   float: left;
   width:150px;
   text-align: right;
 
}
 
#contexte label {
clear: left;
text-align: left;
}
 
#corpForm .legende {   /*** Mise en forme des aides contextuelles ***/
   font-style: italic;
   color: #666;
   background: transparent;
 
}
 
#corpForm .focus {   /*** Mise en avant des champs en cours d'utilisation ***/
   background: beige;
   color: black;
}
#corpForm .normal {   /*** Retour à l'état normal après l'utilisation ***/
   background: white;
   color: black;
}

:?:

11/04/2006, 15h31
Tr@nkill

mmm sans vouloir mettre en doute tes competences ! voila le resultat avec ta modif du css

http://img103.imageshack.us/img103/8612/result4uo.jpg

Enlève le clear: both;

Code:

1
2
3
#corpForm input, #corpForm textarea, #corpForm select {
      margin-left: 10px;
}

11/04/2006, 15h43
Tr@nkill

owwwww mon pote, j'ai envie de t'aimer !!!!!!!!!!!!!!!! CA MARCHE ! Merci bien copain ! je reviendrai demain pour de nouvelles questions à la con^^
11/04/2006, 16h10
Tr@nkill

euh sinon une derniere toute petite question , comment on aligne les boutons de checkbox ?
11/04/2006, 16h13
franculo_caoulene

regarde #contexte label dans la feuille de style
11/04/2006, 16h31
Tr@nkill

euh oui, je le vois mais je ne comprend pas trop ce que je devrais y voir !
11/04/2006, 16h56
franculo_caoulene
hum... ok:
Il faut savoir que les styles s'héritent. Un élément contenu dans un autre héritera des styles de son conteneur. Sauf si l'élément a un style défini qui écrase celui du conteneur. Sachant ça:
Code:

1 2 3 4 5 6 #corpForm label { float: left; width:150px; text-align: right; }
Tous les labels contenus dans corpForm ont une taille de 150px, sont alignés à droite et, le plus important, ils flottent tous à gauche. C'est à dire que le flux HTML normal coule à droite de chaque label.
Ensuite on écrase et ajoute des styles dans l'élément label contenu dans contexte :
Code:

1 2 3 4 #contexte label { clear: left; text-align: left; }
Au lieu d'aligner à droite comme le début du formulaire on place le texte à gauche du label. Ensuite le clear dit que le coté gauche du label ne doit pas toucher de boîte flottante. Pourquoi? Apparemment, les checkbox sont des élements plus petits que les autres inputs donc les labels seraient censés couler à droite de chaque label précédent.
Ce n'est pas forcément clair mais pour illustrer, remplace le style #contexte label actuel par :
Code:

1 2 3 4 #contexte label { border: solid 1px red; text-align: left; }
Et on comprend tout de suite mieux l'intérêt du clear (un bout de chaque label touche le label précédent en bas à droite).
En fait, les champs du formulaires coulent à droite des labels grâce à #corpForm label, le clear: left n'est qu'une mise au point.

Clair?
12/04/2006, 08h44
Tr@nkill

ah oui tres clair, mais en fait tu vois ce que tu nommes contexte, est un nom généré automatiquement depuis une table de ma base et qui change selon les tables, donc le nom n'est pas fixe, on ne peux pas rajouter une balise d'un nom different pour que cela fonctionne ?
12/04/2006, 09h41
franculo_caoulene
Ben mets un id en dur.
html :

Code:

<fieldset id="sousForm">

css :
Code:

1 2 3 4 #sousForm label{ clear: left; text-align: left; }