Formulaire avec validation champ par champ

Ce formulaire permet, lors de sa validation, d'afficher les errreurs détectées (côté serveur) par le script de validation, et ce champ  par champ.

Inspiré par les sources suivantes :

- http://www.guiderdoni.net/Un-formulaire-en-pur-CSS.html

- http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/

- http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/

 

J'ai utilisé cette architecture de formulaire dans mon application GIPel.

Pour vous en faire une idée plus précise, vous pouvez vous rendre à cette adresse (site de démo) :

http://webapps.ceck.org/gipel/index.php/home/login

Cette page a été vue 1187 fois. Date de mise à jour : 06/02/2014 02:48:48.

Code HTML5 utilisé


<!--  Formulaire de saisie -->
<form action="#" method="post" accept-charset="utf-8" class="formContainer" id="form">
<div style="display:none">
	<input type="hidden" name="itemid" value="3" />
	<input type="hidden" name="uid" value="not_set" />
</div>
<fieldset>
<legend>Contenu de l'enregistrement</legend>
	<div class="fieldContainer">
		<label for="first_name" class="styled">Nom du document</label>
		<div class="thefield">
			<input type="text" name="first_name" value="" id="first_name" size="32" maxlength="32"  />
			<br /><div class="errorMessage"><span style="font-size: 150%;">↑ </span>Le champ « Nom du document » est obligatoire.</div>
		</div>
	</div>
	<div class="fieldContainer">
		<label for="last_name" class="styled">Version du document</label>
		<div class="thefield">
			<input type="text" name="last_name" value="" id="last_name" size="32" maxlength="32"  />
		</div>
	</div>
	<div class="fieldContainer">
		<label for="birthday" class="styled">Date de parution</label>
		<div class="thefield">
			<input type="date" name="birthday" value="" id="birthday" placeholder="AAAA/MM/JJ" size="32" maxlength="32"  />
		</div>
	</div>
	<div class="fieldContainer">
		<label for="groupid" class="styled">Groupe</label>
		<div class="thefield">
			<select name="groupid">
				<option value="10071">Activité</option>
				<option value="10072">Administration</option>
				<option value="10104">Images</option>
				<option value="10030" selected="selected">JCAE Passive</option>
				<option value="10123">JCAE rules</option>
				<option value="10074">Maison Rochefort</option>
				<option value="10088">Packing info</option>
				<option value="10134">Services</option>
				<option value="1013">tbd</option>
				<option value="10126">Travail salarié</option>
				<option value="10157">Tutoriels pdf</option>
				<option value="10113">Voyage</option>
			</select>
		</div>
	</div>
	<div class="fieldContainer">
		<label for="url" class="styled">URL du document</label>
		<div class="thefield">
			<input type="url" name="url" value="" id="url" size="32" maxlength="2048"  />
			<br /><div class="errorMessage"><span style="font-size: 150%;">↑ </span>Le champ « URL du document » est obligatoire.</div>
		</div>
	</div>
	<div class="fieldContainer">
		<label for="width" class="styled">Largeur pop-up</label>
		<div class="thefield">
			<input type="number" name="width" value="800" id="width" size="8" maxlength="4"  />
		</div>
	</div>
	<div class="fieldContainer">
		<label for="height" class="styled">Hauteur pop-up</label>
		<div class="thefield">
			<input type="number" name="height" value="400" id="height" size="8" maxlength="4"  />
		</div>
	</div>
	<div class="fieldContainer">
		<label for="memo" class="styled">Commentaire (texte libre)</label>
		<div class="thefield">
			<textarea name="memo" cols="40" rows="5" id="memo" ></textarea>
		</div>
	</div>
	<div class="fieldContainer">
		<label for="visibility" class="styled">Contrôle d'accès</label>
		<div class="thefield">
			Personnel<input type="radio" name="visibility" value="personal"  />     Communautaire<input type="radio" name="visibility" value="communal" checked="checked"  />
			
		</div>
	</div>
</fieldset>
<div class="buttonsdiv">
	<input type="submit" value="Valider la saisie" />
</div>
</form><!--  #Formulaire de saisie -->

Feuille de style associée


/* ##################################################################
----------				STYLES POUR les FORMULAIRES			  ----------
################################################################## */
.formContainer {
	width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.formContainer legend {
	display: block;
	margin-left: 40px;
	padding: 2px 12px 4px 12px;
	font-size : 1.5em;
	color: #333333;
	background: #dcdcdc;
	border: 1px solid #ffffff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.formContainer fieldset {
	display: block;
	border: 1px solid #d0d0d0;
	background: #e8e8e8;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.formContainer p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}

div.fieldContainer { /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
	width: 540px; /*width of form rows*/
	overflow: hidden;
	padding: 5px 0;	/* 5px 0		*/
}

div.fieldContainer label.styled{ /* label elements that should be styled (left column within fieldContainer DIV) */
	float: left;
	width: 150px; /*width of label (left column)*/
	/* text-transform: uppercase; */
	border-bottom: 1px solid	gray; /* original = 1px solid red ||| dashed */
	margin-right: 15px; /* 15px spacing with right column*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}

div.fieldContainer div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldContainer DIV) */
	float: left;
	margin-bottom: 0; /* 10px space following the field */
}

div.fieldContainer div.thefield input { /* style pour le texte saisi dans les champs */
	font-family: Courier New;
	font-size: 1em;
	color : #000000;
	background-color: #ffffff;
	border-width: 3px;
	padding : 0 2px;
}

div.fieldContainer div.thefield select {
	color : #000000;
	background-color: #ffffff;
	border-width: 1px;
	padding : 0 2px;
}
/* ------------------------------------------------------ ajout image plus ------------------ */
div.fieldContainer img {
	margin : 0 0 5px 20px;
}

div.fieldContainer div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
	width: 250px;
}
div.fieldContainer div.thefield input[type="date"] , div.fieldContainer div.thefield input[type="number"], div.fieldContainer div.thefield input[type="tel"] {
	width: 150px;
}
/*
div.fieldContainer div.thefield textarea{ /* style for TEXTAREA fields. 
	width: 500px;
	height: 150px;
}
*/
div.fieldContainer div.thefield ul { /* style pour les champs boutons */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	list-style: none;
	margin-top: 0;
	padding: 5px 10px 8px 10px;
	background: #ffffff;
}

div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
	margin-top: 10px; /*space above buttonsdiv*/
}

div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
	width: 150px;
	background: #e1dfe0;
	margin-left: 180px;
	margin-bottom: 20px;
}

div.errorMessage {
	margin-top: -7px;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	color: red;
}