Je pars du principe que vous créez un fichier HTML supplémentaire. Personnellement, je le sauvegarde sous le nom de contact.html. Le contact.html se trouve au même niveau que l'index.html que vous connaissez déjà.
Dans cette première partie, les réglages de base du formulaire sont effectués. Les éléments tels que les coins arrondis, les dégradés de couleurs, etc. suivront dans le prochain tutoriel.
À l'intérieur de contact.html, vous créez le formulaire. Le formulaire est défini à l'intérieur de la zone div avec la classe content. Ensuite, réfléchissez aux champs à créer. J'ai décidé d'interroger les informations suivantes :
• Nom
• Adresse e-mail
• Commentaire
Vous devez bien sûr décider vous-même des informations que vous souhaitez obtenir. En principe, je recommande de demander uniquement les données réellement nécessaires. En effet, la plupart des visiteurs de sites Web sont réticents face aux formulaires complexes. Soyez donc brefs.
La structure de base de mon formulaire est la suivante :
<div class="content">
<form class="form" action="#" method="post">
<fieldset>
<legend>Nous contacter</legend>
<ol>
<li>
<label for="name">Nom :</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">Adresse e-mail :</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comment">Commentaire :</label>
<textarea cols="32" rows="7" name="content" id="content"></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Envoyer" />
</li>
</ol>
</fieldset>
</form>
</div>Le formulaire ne contient aucune particularité pour l'instant. Un fieldset a été appliqué autour des champs du formulaire. La façon de créer des champs de formulaire et l'utilisation des éléments label ont déjà été suffisamment décrites. Nous allons donc nous concentrer ici sur la conception du formulaire.
Lorsque vous consultez le résultat dans le navigateur, vous verrez un formulaire pas encore très attrayant. 
Il faudra bien sûr l'améliorer.
Commencez par fournir des informations de base sur le formulaire.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
Ici, les marges intérieures et extérieures sont définies. De plus, une largeur de 550 pixels est fixée pour le formulaire.
Nous continuons avec la conception du fieldset.
fieldset {
padding: 10px 20px 25px;
}
Les marges sont également définies ici.
Les champs de formulaire sont eux-mêmes créés à l'intérieur d'une liste ordonnée ol.
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Afin que cette liste ne soit pas visuellement identifiable en tant que telle, list-style-type: none; est utilisé. En outre, les bordures et les marges intérieures sont définies à 0.
À l'étape suivante, les éléments de liste sont définis. Ils sont alignés à gauche et possèdent une marge intérieure de 10 pixels.
li {
float: left;
padding: 10px;
}
Il y a une particularité concernant le bouton situé en dessous du formulaire. Il doit être aligné à droite.
li.button {
float: none;
clear: both;
text-align: right;
}Titre du formulaire
Passons maintenant à l'élément legend. C'est là que le titre du formulaire est défini. 
La définition du titre se présente comme suit :
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}Les étiquettes
L'élément label vous est également familier dans le cadre de cette série. Avec cette balise label, un lien logique est établi entre l'étiquetage du champ et le champ de formulaire réel. En ce qui concerne la définition CSS, il y a une particularité ici aussi.
label {
display: block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}
Je donne à l'élément label notamment une mention de cursor. Cela indique aux visiteurs que les étiquettes des champs sont cliquables. Lorsqu'ils cliquent sur une description de champ, le curseur est automatiquement positionné dans le champ correspondant. 
La conception des champs de formulaire
À l'étape suivante, les champs de formulaire réels sont stylisés. Tout d'abord, des informations générales sur input et textarea sont fournies.
input, textarea {
color: #3399FF;
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, sans-serif;
padding: 8px 10px;
width: 190px;
}
Il s'agit exclusivement de questions de conception. Une attention particulière doit être portée aux cadres. Dès que le curseur est placé dans un champ, la couleur du cadre change. Ce n'est d'ailleurs pas seulement un aspect esthétique. En fait, cela aide également les visiteurs à remplir le formulaire. Ainsi, ils voient toujours immédiatement dans quel champ se trouve actuellement le curseur.
Voici maintenant quelques informations sur le champ de texte à plusieurs lignes.
textarea {
width: 430px;
overflow: auto;
}
La largeur de ce champ est fixée à 430 pixels. Une instruction peut sembler un peu étrange au premier coup d'œil: overflow: auto en relation avec les champs de texte à plusieurs lignes. Cette ligne est due aux anciennes versions d'Internet Explorer. En fait, ce navigateur affichait toujours des barres de défilement dans les champs de texte à plusieurs lignes même si ce n'était pas nécessaire. Avec overflow: auto, ce problème est contourné.
Styliser le bouton d'envoi
Actuellement, le bouton d'envoi est plutôt austère. Cela va maintenant changer. Le résultat ressemblera à ceci:
Des propriétés différentes seront attribuées au bouton:
• Couleur de fond
• Apparence de la police
• Cadre
• Espacements
La syntaxe CSS associée est la suivante:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}
Il est peut-être intéressant de mentionner ici la spécification input[type="submit"]. Ce sélecteur permet d'accéder aux éléments input qui possèdent la combinaison attribut-valeur type="submit".
