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 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165
| <!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" lang="fr" xml:lang="fr">
<head>
<title>Des formulaires plus simples (Étape 3)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex,nofollow" />
<style type="text/css">
/*** Mise en forme générale de la page ***/
body {
margin: 1em;
padding: 0;
font: .8em arial, hevetica, sans-serif;
text-align: left;
color: black;
background: white;
}
p#notes {
border-bottom: 1px dotted black;
padding-bottom: 1em;
}
p#footer {
border-top: 1px dotted black;
padding-top: 1em;
}
code {
font-size: .9em;
}
html>body code {
font-size: 1.3em;
}
/*** Mise en forme du formulaire ***/
#inscription {
border: none;
margin: 0;
padding: 0;
width: 30em; /*** Largeur 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;
margin: 0;
padding: .5em;
}
#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;
}
#corpForm { /*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
border: 1px solid black;
color: black;
background: #efefef;
margin: 0;
padding: 1em;
}
#corpForm fieldset { /*** Mise en forme des cadres ***/
margin: 0;
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 ***/
padding: .2em 0;
margin: 0 0 .2em 0;
}
#corpForm fieldset#coordonnees label { /*** Mise en forme des intitulés de champs ***/
float: left; /*** Très important, ne pas suprimer ! ***/
width: 40%; /*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
text-align: right; /*** ... et ils sont alignés à droite... ***/
margin: 0;
padding: 0 .5em 0 0;
line-height: 1.8; /*** ... et centrés verticalement. ***/
}
#corpForm label:hover, #piedForm input {
cursor: pointer; /*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
}
</style>
</head>
<body>
<h1>Des formulaires plus simples</h1>
<h2>Étape 3 : Aligner les intitulés et les champs</h2>
<p id="notes">
Nous allons maintenant aligner les intitulés de ce formulaire en donnant une proriété <code>float:left</code> et <code>text-align:right</code> aux balises <code><label></code>.<br />
<a href="SVF_intro.htm" title="Cliquez ici pour revenir à l'article">retour à l'introduction</a> |
<a href="SVF_etape2.htm" title="Cliquez ici pour allez à l'étape précédente" tabindex="0">< étape précédente</a> |
<a href="SVF_etape4.htm" title="Cliquez ici pour allez à l'étape précédente" tabindex="0">étape suivante ></a>
</p>
<form name="inscription" id="inscription" method="get" action="http://fredcavazza.net/articles/exemples/SVF_etape4.htm">
<div id="titreForm">Newsletter</div>
<div id="corpForm">
<fieldset id="coordonnees">
<legend>Coordonnées</legend>
<br />
<p>
<label for="nom">Nom :</label>
<input type="text" name="nom" id="nom" />
</p>
<p>
<label for="prenom">Prénom :</label>
<input type="text" name="prenom" id="prenom" />
</p>
<p>
<label for="eMail">e-Mail :</label>
<input type="text" name="eMail" id="eMail" />
</p>
<p>
<label for="pays">Pays :</label>
<select id="pays">
<option value="france" selected="selected">France</option>
<option value="allemagne">Allemagne</option>
<option value="etatsunis">États-Unis</option>
<option value="canada">Canada</option>
<option value="japon">Japon</option>
<option value="chine">Chine</option>
</select>
</p>
<p>
<label for="dateNaissance">Date de naissance :</label>
<input type="text" name="dateNaissance" id="dateNaissance" />
</p>
</fieldset>
<br />
<fieldset id="periodicite">
<legend>Options</legend>
<p>
<input type="radio" name="periode" id="periodeH" value="hebdo" checked="checked" />
<label for="periodeH">Newsletter hebdomadaire</label>
<br />
<input type="radio" name="periode" id="periodeM" value="mens" />
<label for="periodeM">Newsletter mensuelle</label>
<br />
<input type="radio" name="periode" id="periodeT" value="trim" />
<label for="periodeT">Newsletter trimestrielle</label>
</p>
</fieldset>
</div>
<div id="piedForm">
<input type="reset" name="reset" id="reset" value="Annuler" />
<input type="submit" name="valid" id="valid" value="Valider" />
</div>
</form>
<p id="footer">
© 2004, <a href="http://www.fredcavazza.net/" hreflang="fr" title="Cliquez ici pour visiter mon site" tabindex="0">www.FredCavazza.Net</a>.
</p>
</body>
</html> |
Partager