Discussion :

[sam01]

Bonjour à tous,

j'ai un formulaire sur différente page.

Ce formulaire à des partie commune ( à toutes les pages) et des parties nom commune (comme la largeur du formaulaire par exemple)

J'aimerais utiliser une unique class pour ces formulaire afin de pouvoir changer facielment la couleur du pied du formulaire par exemple). Est-ce possible,
ou suis-je obligé d'utilser une classe différentes pour chaque formulaire

voici le code 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
 
<form action="#">
	<div id="titreForm">Inscription : Etape 1 </div>
	<div id="corpForm">
		<fieldset id="coordonnees">
		<legend>Vos coordonnées</legend>
 
		<p class="double">
			<label for="f1-nom" class="oblig">* Nom :</label>
			<input type="text" id="f1-nom" name="nom" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p class="double">
			<label for="f1-prenom" class="oblig">* Prénom :</label>
			<input type="text" id="f1-prenom" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p class="double">
			<label for="f1-adresse" class="oblig">* Adresse :
			<span class="info">(Numéro et rue)</span></label>
			<input type="text" id="f1-adresse" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p class="double">
			<label for="f1-ville" class="oblig">* Ville :
			<span class="info"></span></label>
			<input type="text" id="f1-ville" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p class="double">
			<label for="f1-codepostal" class="oblig">* Code postal :
			<span class="info"></span></label>
			<input type="text" id="f1-codepostal" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p class="double">
			<label for="f1-pays" class="oblig">* Pays :
			<span class="info"></span></label>
			<SELECT name="mark" class="font">
				<optgroup label="Europe">
					<OPTION value="france" selected="selected">France</option>
					<OPTION value="allemagne">Allemagne</option>
				</optgroup>
				<optgroup label="Afrique">
					<OPTION value="algerie">Algérie</option>
					<OPTION value="nigeria">Nigéria</option>
					<OPTION value="senega">Sénégal</option>
				</optgroup>
				<optgroup label="Asie">
					<OPTION value="chine">Chine</option>
					<OPTION value="tibet">Tibet</option>
					<OPTION value="arabie saoudite">Arabie Saoudite</option>
				</optgroup>
			</SELECT>
		</p>
		<p class="double">
			<label for="f1-telephone" class="nonoblig">Téléphone : </label>
			<input type="text" id="f1-telephone" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p class="double">
			<label for="f1-mail" class="oblig">* mail : </label>
			<input type="text" id="f1-mail" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p>
			<p class="double">
			<label for="f1-mail" class="oblig">* Confirmer votre mail : </label>
			<input type="text" id="f1-mail" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p class="double">
			<label for="f1-motdepasse" class="oblig">* Mot de passe : </label>
			<input type="password" id="f1-motdepasse" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p class="double">
			<label for="f1-motdepasse" class="oblig">* Confirmer votre mot de passe : </label>
			<input type="password" id="f1-motdepasse" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
 
		<fieldset id="cond">
		<legend>Conditions</legend>
			<p align="left"><br>
				<input type="checkbox" name="checkbox" value="1">
				Je d&eacute;clare avoir pris connaissance des conditions générales d'utilisation du service et en 
				accepte les termes en cochant cette case<br> (pour conna&icirc;tre les conditions générales d'utilisation
				<a href="cond_ventes.htm">Cliquez ici</a>
			</p>
		</fieldset>
 
 
		</fieldset>
 
			<br />
			<em>* Champs obligatoires</em>
 
	</div> <!-- fin de corpForm -->
 
		<div id="piedForm">
			<input type="submit" value="Envoyer ces informations" />
		</div>
 
 
 
</form>

voici la partie commune de mon 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
 
 
 
 
/*******************************************formulaire partie commune : debut************************************************************************/
 
#titreForm, #piedForm 
{	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: orange;
	margin: 0;
	padding: .5em;
	border-color:orange;
}
 
#corpForm 
{	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	border: 1px solid orange;
	color: black;
	background: #efefef;
	margin: 0;
	padding: 1em;
}
 
 
#corpForm label.oblig {
	font-weight: bold;	/*** Mise en évidence des champs obligatoires ***/
}
 
#corpForm label.nonoblig {
	font-weight: 500;	/*** Mise en évidence des champs obligatoires ***/
}
 
#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;
}
 
#piedForm
{
	text-align: right; /*** Les boutons sont alignés à droite ***/
}
 
#piedForm input
{
	font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
	margin-left: 1em;
}
 
form p {
	margin: 1em 0;
}
form p.double {
	/* Empêcher le dépassement des flottants */
	overflow: hidden;
	width: 100%;
}
 
form p.double label span.info {
	display: block;
	margin-top: .2em;
	font-size: .8em;
	font-weight: normal;
	cursor: default;
}
 
form p.double select 
{
	padding: 2px 0 0 4px;
	width: 52%;
}
form p.double textarea {
	padding: 2px 0 0 4px;
	width: 65%;
	height: 6em;
}
form p.simple {
	margin-left: 32%;
}
 
/*******************************************formulaire partie commune : fin********************************************************************/

et voici la partie qui change

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
 
 
form {
	width: 500px;/* largeur du formulaire */
	padding: 10px 20px;
	/*background: lavender;*/
	/*color: midnightblue;*/
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}
form p.double label {
	overflow: hidden;
	float: left;
	width: 30%;
	text-align: right;
	font-weight: bold;
	cursor: pointer;
}
 
form p.double input,
form p.double select,
form p.double textarea {
	display: block;
	margin-left: 32%;
	width: 50%;
	border: solid 1px midnightblue;
	padding: 2px 4px;
}

Merci d'avance pour votre aide.