Discussion :

[pazam]

bonsoir,

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
 
<form id="monForm"action="inscription.php" method="post">
 
 
 <fieldset>
        <legend>Informations personnelles</legend>
    <p>
        <label for="form_firstname">Prénom : </label>
        <input type="text" id="form_firstname" name="firstname" />
    </p>
    <p>
        <label for="form_lastname">Nom : </label>
        <input type="text" id="form_lastname" name="lastname" />
    </p>
    <p>
        <label for="form_gender">Sexe : </label>
        <input type="text" id="form_gender" name="gender" />
    </p>
    <p>
        <label for="form_birthday">Date de naissance : </label>
        <input type="text" id="form_birthday" name="day" />/<input type="text" name="month" /><input type="text" name="year" />
    </p>
    <p>
        <label for="form_address">Adresse : </label>
        <input type="text" id="form_address" name="address" />
    </p>
    <p>
        <label for="form_postal_code">Code postal : </label>
        <input type="text" id="form_postal_code" name="postal_code" />
    </p>
    <p>
        <label for="form_city">Ville : </label>
        <input type="text" id="form_city" name="city" />
    </p>
    <p>
        <label for="form_country">Pays : </label>
        <select id="form_country" name="country">
		<optgroup label="Amérique">
            <option value="ca">Canada</option>
            <option value="us">États-Unis</option>
            <option value="be">Belgique</option>
            <option value="fr">France</option>
		</optgroup>
		<optgroup label="Europe">
			<option value="be">Belgique</option>
			<option value="fr">France</option>
		</optgroup>
		</select>
	</p>
	</fieldset>
 
	 <fieldset>
	    <legend>Compte</legend>
    <p>
        <label for="form_login">Identifiant : </label>
         <input type="text" id="form_pseudo"name="login" value="<?php if (isset($_POST['login'])) echo htmlentities(trim($_POST['login'])); ?>"><br />
    </p>
    <p>
        <label for="form_password">Mot de passe : </label>
       <input type="password" id="form_pass" name="pass" value="<?php if (isset($_POST['pass'])) echo htmlentities(trim($_POST['pass'])); ?>"><br />
    </p>
    <p>
        <label for="form_password2">Confirmer le mot de passe : </label>
       <input type="password" id="form_confirm" name="pass_confirm" value="<?php if (isset($_POST['pass_confirm'])) echo htmlentities(trim($_POST['pass_confirm'])); ?>"><br />
    </p>
    <p>
        <label for="form_mail">Adresse email : </label>
        <input type="text" id="form_mail" name="mail" />
    </p>
    <p>
        <label for="form_question">Question secrète : </label>
        <input type="text" id="form_question" name="question" />
    </p>
    <p>
        <label for="form_response">Réponse : </label>
        <input type="text" id="form_response" name="response" />
    </p>
	 </fieldset>
 
    <p>
       <input type="submit" name="submit" value="submit">
 
    </p>
</form>

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
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
 
#monForm
{
	width: 60%;
}
 
#monForm p
{
	margin: 2px 0;
}
 
/* fieldset , legend */
#monForm fieldset
{
	margin-bottom: 10px;
	border: #CCC 1px solid;
}
 
#monForm fieldset:hover
{
	background-color: #FFF;
}
 
#monForm fieldset legend
{
	padding: 0 10px;
	border-left: #CCC 1px solid;
	border-right: #CCC 1px solid;
	font-size: 1.2em;
	color: #999;
}
 
/* Label */
#monForm label
{
	background-color: #FFCC66;
	display: block;
	width: 39%;
	float: left;
	padding-right: 1%;
	text-align: right;
	letter-spacing: 1px;
}
 
#monForm label:hover
{
	font-weight: bold;
}
 
#monForm .form_label_nostyle
{
	background: none;
}
 
 
/* Input */
#monForm input, #monForm select
{
	margin-left: 1%;
	width: 58%;
	border: #CCC 1px solid;
}
 
#monForm input:hover, #monForm select:hover, #monForm input:focus, #monForm select:focus
{
	border: #999 1px solid;
	background-color: #DDEEFF;
}
 
#monForm .form_input_day_month
{
	width: 3%;
}
 
#monForm .form_input_year
{
	width: 6%;
}
 
 
/* button submit */
#monForm input[type="submit"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}
 
#monForm input[type="submit"]:hover
{
	background-color: #66CC33;
	cursor: pointer;
}
 
#monForm input[type="reset"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}
 
#monForm input[type="reset"]:hover
{
	background-color: #E6484D;
	cursor: pointer;
}

Les 3 champs pour la date de naissance ne sont pas alignés sur la même ligne
et ils ne sont pas limité en espace ,j'en ai deux qui sont sur la ligne du dessous
comment puis-je remedier à ce problème ?Merci

[Riko63]

Bonjour,
j'ajouterai une class sur les input de la date de naissance et mettrais un width d'environ 10% (voire pixel)

Code :

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

1
2
3
4
5
6
<p>
        <label for="form_birthday">Date de naissance : </label>
        <input class="petit" type="text" id="form_birthday" name="day" /> / 
        <input class="petit" type="text" name="month" /> / 
        <input class="petit"  type="text" name="year" />
    </p>

Code :

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

1
2
#monForm input, #monForm select{margin-left: 1%;width: 58%;border: #CCC 1px solid;}
#monForm input.petit{width:10%;}

[pazam]

Mon erreur était de ne pas respecter l'ordre .Je mettais le #monForm input.petit
après le #monForm input,#monForm select
Merci pour ta réponse Riko63 elle m'a bien aidé