Accueil > html > formulaire-contact-html-css

{ Formulaire de contact html / css }

Introduction

formulaire de contact HTML / CSS

Vous cherchez un formulaire basé sur HTML et stylé avec les CSS ? vous êtes à la bonne page ! Le tutoriel qui suit se compose en 2 étapes on ne peut plus simple : le HTML et les CSS.

Avantages

N'utilise pas de tableau mais uniquement les CSS pour la mise en forme

Très facile à installer

Valide XHTML / CSS

Inconvénients

N'inclus pas le traitement des données

Le html

Comme vous pouvez le constater, ce formulaire n'utilise pas les tableaux ce qui est une très bonne chose car les tableaux sont lourds et beaucoup plus difficle à modeler avec les CSS.

<form id="myform" class="cssform" action="">

	<p><label for="user">Nom :</label>
	<input type="text" id="user" value="" /></p>

	<p><label for="emailaddress">Email :</label>
	<input type="text" id="emailaddress" value="" /></p>

	<p><label for="comments">Message :</label>
	<textarea id="comments" rows="5" cols="25"></textarea></p>

	<p><label for="comments">Sexe :</label>
	Homme :<input type="radio" name="sex" />
	Femme :<input type="radio" name="sex" /></p>

	<p><label for="comments">Hobbies :</label>
	<input type="checkbox" name="hobby" /> Tennis
	<input type="checkbox" name="hobby" class="threepxfix" /> Badminton
	<input type="checkbox" name="hobby" class="threepxfix" /> Basketball</p>

	<p><label for="terms">Conditions g&eacute;n&eacute;rales accept&eacute;es</label>
	<input type="checkbox" id="terms" class="boxes" /></p>

	<p><div style="margin-left: 150px;">
		<input type="submit" value="Envoyer" />
		<input type="reset" value="Reset" />
	</div></p>
</form>

Les styles css

Ajoutons un peu de style à notre formulaire.

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type=&quot;text&quot;]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
} 

Je vous annonce que votre formulaire est prêt ! Attention je tiens à repréciser que ce formulaire comporte uniquement le squelette et le style du formulaire, le traitement des données n'est donc pas inclus.