Document sans nom

Code HTML

Sélectionner le code

<ul class="formulaire">
	<li class="civilite">
		<label>Civilité *</label>
			
			<input type="radio" value="Mme" />
			<label for="Mme" class="label_radio">Mme</label>
			
			<input type="radio" value="Mlle" />
			<label for="Mlle" class="label_radio">Mlle</label>
			
			<input type="radio" value="Mr" />
			<label for="Mr" class="label_radio">Mr</label>
			
	</li>
	<li>
		<label for="form_nom">Nom *</label>
		<input type="text" id="form_nom" value="" />
	</li>
	<li>
		<label for="form_prenom">Prénom *</label>
		<input type="text" id="form_prenom" value="" />
	</li>
	<li class="naissance">
		<label for="form_naissance_jour">Date de naissance</label>
		<select id="form_naissance_jour">
			<option>Jour</option>
		</select>
		<select id="form_naissance_mois">
			<option>Mois</option>
		</select>
		<select id="form_naissance_annee">
			<option>Année</option>
		</select>
	</li>
	<li>
		<label for="form_adresse">Adresse *</label>
		<input type="text" id="form_adresse" value="" />
	</li>
	<li>
		<label for="form_cp">Code Postal *</label>
		<input type="text" id="form_cp" value="" />
	</li>
	<li>
		<label for="form_ville">Ville *</label>
		<input type="text" id="form_ville" value="" />
	</li>
	<li>
		<label for="form_pays">Pays *</label>
		<select id="form_pays">
			<option></option>
		</select>
	</li>
	<li>
		<label for="form_email">Email *</label>
		<input type="text" id="form_email" value="" />
		<span>Ex : john@doe.com</span>
	</li>
	<li>
		<label for="form_email_confirm">Confirmation Email *</label>
		<input type="text" id="form_email_confirm" value="" />
	</li>
	<li>
		<label for="form_pass">Mot de passe *</label>
		<input type="password" id="form_pass" value="" />
		<span> Minimum 6 caractères</span>
	</li>
	<li>
		<label for="form_pass_confirm">Confirmation mot de passe *</label>
		<input type="password" id="form_pass_confirm" value="" />
		<span> Minimum 6 caractères</span>
	</li>
	<li class="validation">
		<input type="submit" value="Envoyer" />
	</li>
</ul>

Code CSS

Sélectionner le code

/* FORMULAIRE */
ul.formulaire {
	padding:			10px;
	margin:				10px;
	border:				1px #ccc solid;
	width:				500px;
}
ul.formulaire li {
	padding:			3px 0;
	clear:				left;
	border-bottom:		1px #eee solid;
}
ul.formulaire label {
	float:				left;
	width:				200px;
	margin:				0 10px 0 0;
	text-align:			left;
}
ul.formulaire input {
	width:				200px;
	height:				16px;
	margin:				0 5px 0 0;
}
ul.formulaire input.short {	
	width:				100px;
}
ul.formulaire select {	
	width:				204px;
	height:				22px;
	margin:				0 4px 0 0;
}
ul.formulaire .input-checkbox,
ul.formulaire input[type=checkbox],
ul.formulaire .input-radio,
ul.formulaire input[type=radio] {
	width:				auto;
}
ul.formulaire li.date_naissance select {
	width:				63px;
}
ul.formulaire span {
	color:				#AAA;
	display:			block;
	font-size:			10px;
	font-style:			italic;
	margin:				0 0 0 210px;
}

/* Civilite */
ul.formulaire li.civilite .label_radio {
	float:				none; 
	width:				auto;
}
/* Date de naissance */
ul.formulaire li.naissance select {
	width:				63px;
}
/* Validation */
ul.formulaire li.validation input {
	margin:			0 0 0 210px;
	width:				auto;
	height:				auto;
}