mise en forme d'un formulaire

**redoran** · 29/01/2012, 15h59

Salam ; code 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
 
 
html
{
background:#f4f6f7;
font-family: "times new roman",Arial, Verdana,serif;
}
.entete {
	padding:20px;
	width:  auto;
	margin: 0 auto;
	text-align: center;
	background: #d9d3d3;
}
.contenu{
	width: 900px;
	height:400px;
	margin: 0 auto;
	padding: 130px;
}
form {
	margin: 0 auto;
    width: 500px;
    padding: 50px;
    border: 1px solid grey;
	letter-spacing:.1em;
	font-weight:bold;
     /*** Rounded Corners ***/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
 
    background: #92c3e8;
 
    /*** Shadow behind the box ***/
    -moz-box-shadow:2px 3px 10px #92c3e8;
    -webkit-box-shadow:2px 3px 10px #92c3e8;
}
.form h2{
	border:1px solid #42596d;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	color:#fff;
	font-weight:normal;
	font-size:1.2em;
	background: #eba328;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#42596d', endColorstr='#1a1f24'); /* for IE */
	background-image: -moz-radial-gradient(center,0px,center,500px,from(#42596d),to(#1a1f24));
	background-image: -webkit-gradient(radial,center top,0,center top,500,from(#42596d),to(#1a1f24));
	-webkit-transition: border .6s ease-in;
    -moz-transition: border .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
}
.form h2{
 
	margin:0 auto 20px auto;
	padding:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.label {
	display: block;
	float: left;
}
input   {
 
    width: 230px;
    background:#fff8cd;
    padding: 6px;
    margin-bottom: 20px;
    border-top: 2px solid #ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px; 
 
    /*** Adding a small shadow ***/
    -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
}
.buttons {
	cursor:pointer;
	margin-right:50px;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
 }
.buttons:hover {
     color: black;
	 cursor:pointer;
}
.pied {
	padding:5px;
	background: #d9d3d3;
	margin: 0 auto;
	clear:both;
}

formulaire

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
<!DOCTYPE html>
<HTML>
<head>
	<!--Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks.-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta charset="utf-8" />
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- application dynamique  -->
	<link rel="shortcut icon" href="image/s3g.ico" />
	<link rel="stylesheet" type="text/css" href="style_div.css">
	<title> Identification</title>
</head>
<body>
	<div class="entete">
 
	</div>
	<div class="contenu">
		<form class="form">
			<h2> S-3-G: Identification</h2>
			<div class="label">
				<label for="ident">Identifiant</label><input type="text" name="ident" />
			</div>
			<div class="label">
				<label for="pass">Mot de passe</label><input type="password" name="pass" />
			</div>
			<div class="buttons">
				<button type="submit">S'identifier</button>
			</div>
		</form>
	</div>
 
</body>
<footer class="pied">
	Copyright © s3g - Conception kacinet
</footer>
</html>

mon problème c'est que j'arrive pas a aligner les champs inputs .
merci pour votre aide

**Rachel** · 29/01/2012, 21h45

je te propose ceci, remplace l'intérieur de ta div contenu :

Code :

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

1
2
3
4
5
6
7
8
<form class="form">
		<table align="center">
			<tr><td align="center" colspan=2>S-3-G: Identification</td></tr>
			<tr><td><label for="ident">Identifiant</label></td><td><input type="text" name="ident" /></td></tr>
			<tr><td><label for="pass">Mot de passe</label></td><td><input type="password" name="pass" /></td></tr>
			<tr><td align="center" colspan=2><button type="submit">S'identifier</button></td></tr>
		</table>
		</form>

c'est un début, mais ça alignera tes entrées

**redoran** · 30/01/2012, 08h11

Salam ; merci rotrevrep mais je crois que la mise en forme avec les div et css est indiquée dans le cadre de l'accessibilité, il me semble aussi que le CSS permet de réglé ce problème mais j'arrive pas a tombé sur la bonne pâte.

**redoran** · 30/01/2012, 15h52

Re; voila sur plusieurs tentative je suis arrivé a ça:
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
<!DOCTYPE html>
<HTML>
<head>
	<!--Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks.-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta charset="utf-8" />
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- application dynamique  -->
	<link rel="shortcut icon" href="image/favs3g.ico" />
	<link rel="stylesheet" type="text/css" href="style_div.css">
	<title> Identification</title>
</head>
<body>
	<div class="entete">
 
	</div>
	<div class="contenu"> 
		<form class="form">
			<div class="h1">
				<h1> S-3-G: Identification</h1>
			</div>
			<div class="label">
				<label for="ident">Identifiant:</label> 
			</div>
			<div class="input">
				<input type="text" name="ident" />
			</div>
			<div class="label">
				<label for="pass">Mot de passe:</label> 
			</div>
			<div class="input">
				<input type="password" name="pass" />
			</div>
 
			<div class="buttons">
				<button type="submit">S'identifier</button>
			</div>
		</form>
	</div> 
 
</body>
<footer class="pied">
	Copyright © s3g - Conception kacinet
</footer>
</html>

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
html
{
background:#f4f6f7;
font-family: "times new roman",Arial, Verdana,serif;
}
.entete {
	padding:40px;
	width:  auto;
	margin: 0 auto;
	text-align: center;
	background: #edeffc;
}
.contenu{
	width: 900px;
	height:400px;
	margin: 0 auto;
	padding: 120px; 
}
.form {
	margin: 0 auto;
    width: 400px;
    padding: 50px;
    border: 2px solid grey;
	letter-spacing:.1em;
	font-weight:bold;
     /*** Rounded Corners ***/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
 
    background: #92c3e8;
 
    /*** Shadow behind the box ***/
    -moz-box-shadow:2px 3px 10px #92c3e8;
    -webkit-box-shadow:2px 3px 10px #92c3e8;
}
.h1{
	border:1px solid #42596d;
	color:#ffe;
	font-weight:normal;
	font-size: 11px;
	background: #eba328;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#42596d', endColorstr='#1a1f24'); /* for IE */
	background-image: -moz-radial-gradient(center,0px,center,500px,from(#42596d),to(#1a1f24));
	background-image: -webkit-gradient(radial,center top,0,center top,500,from(#42596d),to(#1a1f24)); 
	-webkit-transition: border .6s ease-in;
    -moz-transition: border .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
	text-align: center;
	margin: -20px 10px 40px 10px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	border-radius:7px; 
}
 
.label {
	float: left;
	margin-top: 15px;
}
.input   {
	float: right;
	width: 230px;
    background:#fff8cd;
    padding: 6px;
    margin-bottom: 15px;
    border: 0px 0px 0px 0px; 
 
    /*** Adding a small shadow ***/
    -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
}
.buttons {
	margin-top: 08px;
	margin-left: 160px;
	cursor:pointer;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
 }
.buttons:hover {
     color: black;
	 cursor:pointer;
}
.pied {
	padding:5px;
	background: #d9d3d3;
	margin: 0 auto;
	clear:both;
}

il reste quelques ajustement des input ,toute proposition est la bienvenue.

**NoSmoking** · 30/01/2012, 21h49

Bonsoir,
au passage
- il me semble que des balises P seraient suffisantes...
- le FOR des LABEL se réfère à une ID et non à un NAME donc

Code html :

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

1
2
<label for="pass">Mot de passe:</label>
<input  id="pass" type="password" name="pass"  />

**redoran** · 31/01/2012, 11h11

Salam ; merci Nosmoking mais je crois que les div sa fait plus standard non !!! Bon selon la littérature.
actuellement je suis arrivé a cette solution :
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
html
{
background:#f4f6f7;
font-family: "times new roman",Arial, Helvetica,Verdana,serif;
}
.entete {
	padding:40px;
	width:  auto;
	margin: auto;
	text-align: center;
	background: #edeffc;
}
.contenu{
	width: 900px;
	height:400px;
	margin: 0 auto;
	padding: 120px; 
}
.form {
	margin: 0 auto;
    width: 400px;
    padding: 30px;
    border: 2px solid grey;
	letter-spacing:.1em;
	font-weight:bold;
     /*** Rounded Corners ***/
   	-moz-border-radius: 5px 20px 5px 20px;
    -webkit-border-radius: 5px 20px 5px 20px;
	-o-border-radius: 5px 20px 5px 20px;
	-ms-border-radius: 5px 20px 5px 20px;
	border-radius: 5px 20px 5px 20px;
    background: #92c3e8;
 
    /*** Shadow behind the box ***/
    -moz-box-shadow:2px 3px 10px #92c3e8;
    -webkit-box-shadow:2px 3px 10px #92c3e8;
	-o-box-shadow:2px 3px 10px #92c3e8;
}
.h1{
	border:1px solid #42596d;
	color:#ffe;
	font-weight:normal;
	font-size: 11px;
	background: #eba328;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#42596d', endColorstr='#1a1f24'); /* for IE */
	background-image: -moz-radial-gradient(center,0px,center,500px,from(#42596d),to(#1a1f24));
	background-image: -webkit-gradient(radial,center top,0,center top,500,from(#42596d),to(#1a1f24)); 
	-webkit-transition: border .6s ease-in;
    -moz-transition: border .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
	text-align: center;
	margin: -20px 10px 30px 10px;
	-moz-border-radius: 5px 20px 5px 20px;
    -webkit-border-radius: 5px 20px 5px 20px;
	-o-border-radius: 5px 20px 5px 20px;
	-ms-border-radius: 5px 20px 5px 20px;
	border-radius: 5px 20px 5px 20px;
}
 
.labelident {
	font-weight: bold;
	font-size: 14px;
	float: left;
	padding: 08px 8px;
	/* margin: 10px 0px 0px 0px; */
 
}
.labelpass {
	font-weight: bold;
	font-size: 14px;
	float: left;
	padding: 15px 8px;
 
}
.ident ,.pass{
	float: right;
	width: 230px;
	padding: 6px;
	margin-bottom: 10px;
	border: 0px; 
}
 
.buttons{
	margin-top: 15px;
	margin-left: 160px;
}
.buttons:hover {
     color: black;
	 cursor:pointer;
}
.pied {
	padding:5px;
	background: #d9d3d3;
	width:  auto;
	margin: auto;
 
}

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
<!DOCTYPE html>
<HTML>
<head>
	<!--Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks.-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta charset="utf-8" />
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- application dynamique  -->
	<link rel="shortcut icon" href="image/favs3g.ico" />
	<link rel="stylesheet" media="screen" type="text/css" href="style_div.css">
	<title> Identification</title>
</head>
<body>
	<div class="entete">
 
	</div>
	<div class="contenu"> 
		<form class="form">
			<div class="h1">
				<h1> S-3-G: Identification</h1>
			</div>
			<div class="labelident">
				<label for="ident">Identifiant:</label> 
			</div>
			<div class="ident">
				<input type="text" name="ident" value="" size="28" maxlength="23" id="ident"/>
			</div>
			<div class="labelpass">
				<label for="pass">Mot de passe:</label> 
			</div>
			<div class="pass">
				<input type="password" name="pass" value="" size="28" maxlength="23" id="pass"/>
			</div>
 
			<div class="buttons">
				<button type="submit" name="sident" value="" onClick="verif()onClick="verif()">S'identifier</button>
			</div>
		</form>
	</div> 
 
</body>
<footer class="pied">
	Copyright © s3g - Conception kacinet
</footer>
</html>

j'espére que c'est le bon résultat mais toute proposition est la bienvenue

mise en forme d'un formulaire [CSS 3]

CSS

Vue hybride

Discussions similaires

Partager

Partager