aligner les input !

**Tr@nkill** · 10/04/2006, 16h08

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 ?

**Yoshidu62** · 10/04/2006, 16h11

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.

**franculo_caoulene** · 10/04/2006, 16h11

Salut,

Regarde la partie contenant les checkbox (dernier fieldset) : http://www.developpez.net/forums/viewtopic.php?t=444863

**Tr@nkill** · 10/04/2006, 16h20

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.

**Yoshidu62** · 10/04/2006, 16h33

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>

**franculo_caoulene** · 10/04/2006, 16h35

Et mon code source? il sert à rien mon code source?

**Tr@nkill** · 11/04/2006, 08h43

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

**Tr@nkill** · 11/04/2006, 10h13

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

**10-nice** · 11/04/2006, 10h20

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 :

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

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.

**Tr@nkill** · 11/04/2006, 11h39

ca merde tjs !

**franculo_caoulene** · 11/04/2006, 11h46

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

**Tr@nkill** · 11/04/2006, 13h40

ok mon code !!!
le .css

Code :

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

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 :

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

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>";
 
?>

**franculo_caoulene** · 11/04/2006, 14h13

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

**Tr@nkill** · 11/04/2006, 14h40

Code :

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

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>

**franculo_caoulene** · 11/04/2006, 15h05

Code :

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

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 :

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

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;
}

:

**Tr@nkill** · 11/04/2006, 15h31

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

**franculo_caoulene** · 11/04/2006, 15h34

Enlève le clear: both;

Code :

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

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

**Tr@nkill** · 11/04/2006, 15h43

owwwww mon pote, j'ai envie de t'aimer !!!!!!!!!!!!!!!! CA MARCHE ! Merci bien copain ! je reviendrai demain pour de nouvelles questions à la con^^

**Tr@nkill** · 11/04/2006, 16h10

euh sinon une derniere toute petite question , comment on aligne les boutons de checkbox ?

**franculo_caoulene** · 11/04/2006, 16h13

regarde #contexte label dans la feuille de style

aligner les input !

HTML

Discussions similaires

Partager

Partager