Accueil Boite à Outils Réaliser un formulaire de contact (2/4)

Publié le : 3 février 2004
Imprimer Imprimer cet article

Auteur :
Philippe Auriol

Philippe Auriol
Réaliser un formulaire de contact (2/4)
html, css, javascript, php

Les feuilles de style (CSS ou cascading style sheet) permettent un certain nombre de fonctionnalités comme de gérer les couleurs mais pas seulement : il est possible de différencier l’aspect selon le média final. Voici donc un formulaire de contact à envoyer par Internet...ou à envoyer par la poste !

Comment ça il ne vous suffit pas le premier formulaire ? Il manque de couleurs c’est ça ? La police d’écriture n’est pas là ? Mais que fait la police !

Il est important de bien comprendre que le html n’est qu’un langage de structuration et certainement pas un langage de présentation cela explique l’existence d’un langage spécifique pour la mise en page des données html : les css.

Définissons donc maintenant l’aspect du formulaire précédent avec nos css.

CSS mode d’emploi

Les feuilles de style répondent elles aussi à des règles particulières d’écriture et de présentation. On peut les intégrer directement dans la page web si elles sont spécifiques à un document ou bien les mettre dans un fichier séparé que l’on appelera dans l’entête du fichier html.

Appel d’une css intégrée, placer dans le "head" :


<style type="text/css" media="all">
<-- le contenu de la feuille de style //-->
</style>

Appel d’une css externe, toujours placer dans le "head" :


<link href="mafeuilledestyle.css" rel="stylesheet" type="text/css">

La feuille de style sera ainsi intégrée par le navigateur lors de la lecture du document et la mise en forme pourra ainsi se faire. Je vous invite à faire quelques tutoriels sur le sujet si vous souhaitez aller plus loin sur le thème des feuilles de style. Nous allons avancer un peu et entrer directement dans le vif du sujet.

Plaçons donc dans le head non pas une mais trois feuilles de style différentes.

Pourquoi ? Et bien parceque la personne en qui veut vous contacter peut souhaiter imprimer le formulaire et vous l’envoyer par des voies plus classiques comme le courrier pas éléctronique ou le fax. Certaines personnes n’ont pas l’accès permanent à Internet (si si) et l’impression des pages web reste fréquente.

Cela nous donne donc :


<head>
[....]
<style type="text/css" media="all">
</style>
<style type="text/css" media="print">
</style>
<style type="text/css" media="screen">
</style>
</head>

La première permet de donner des informations utilisées quel que soit le support, la deuxième des informations uniquement pour l’impression et la troisième uniquement pour l’écran.

Reprenons notre formulaire et ajoutons y le nécessaire à la bonne gestion de nos contraintes :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                       "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mon formulaire.</title>
<style type="text/css" media="all">
td {font-weight: bold; text-align: right;}
td.liste{text-align: left;}
th {font-size: 2em; color: red; padding: 0; border-bottom: 1px solid red;}
</style>
<style type="text/css" media="print">
div.nepasvoir p:first-line {font-weight: bold;}
tr#nepasimprimer {display: none;}
</style>
<style type="text/css" media="screen">
div.nepasvoir {display: none;}
td.info{border-left : 3px solid red; border-bottom: 1px solid red}
td.champ{border-right : 1px solid red;}
td {padding: 0.25em 1px;}
td.subject{border-left : 3px solid green; border-bottom: 1px solid green}
td.liste{ border-top: 1px dotted red; border-right: 1px solid green; border-bottom: 1px solid green;}
td.contenu{border-left : 3px solid gray; border-bottom: 1px solid gray}
td.contenant{border-right : 1px solid gray; border-bottom: 1px solid gray}
td.lesboutons{}
</style>
</head>
<body>
<form name='formulaire' action='traitement.php' method='post'>
<table cellspacing="0">
<th colspan="2">Formulaire de contact</th>
<tr><td class="info">Votre nom : </td><td class="champ"><input name='nom' type='text' size='50' class="writein"></td></tr>
<tr><td class="info">Votre pr&eacute;nom : </td><td class="champ"><input name='prenom' type='text' size='50' class="writein"></td></tr>
<tr><td class="info">Votre email</td><td class="champ"><input name='email' type='text' size='50' class="writein"></td></tr>
<tr><td class="subject">Le motif de votre message</td><td class="liste"><input name='sujet' type='radio' value='renseignement'>Renseignement<br>
<input name='sujet' type='radio' value='probleme technique'> Probleme technique<br>
<input name='sujet' type='radio' value='partenariat'>Partenariat</td></tr>
<tr><td class="contenu">Votre message</td><td class="contenant"><textarea name='texte' cols='50' rows='20' class="writein"></textarea></td></tr>
<tr id="nepasimprimer"><td class="lesboutons"><input name='annuler' type='reset' value='Annuler'></td><td>
<input name='soumettre' type='submit' value='Envoyer'></td></tr>
</table>
<div class="nepasvoir">
Tous les champs du formulaire <strong>doivent</strong> &ecirc;tre remplis.
<p>
Envoyez le formulaire par la poste &agrave;:<br>
Dr Duschmoll<br>
44, rue des maures
<br> AZ445 Djoumbala - France<br>
Ou par fax au 01 34 56 76 56
</p>
</div>
</form>
</body>
</html>

Soit :

GIF - 7.1 ko
formulaire avec css
c’est plus coloré non ?

Vous voyez que nous avons identifié :

 ce qui ne doit pas être vu à l’écran "nepasvoir" : il s’agit des mentions utiles sur un format papier mais pas sur un écran.
 ce qui ne doit pas être vu su une page imprimée "nepasimprimer" : en fait ce sont surtout les boutons et aussi la coloration qui est moins utile sur le papier que sur l’écran.

La valeur display : none ; permet de ne pas afficher le contenu de ce qui est identifié.

Nous avons également séparé les champs de présentation des boites à remplir mais ce n’est utile que pour agrémenter un peu les bords et rendre ainsi plus clair quelle partie du formulaire fait quoi.

Le formulaire est tout de suite plus agréable et en plus, il est vraiment imprimable !

Dans la 3e partie, nous verrons comment utiliser le javascript pour venir vérifier que les champs sont bien remplis.


Document joint à l'article

le formulaire avec ses css - ben.. ;c’est le formulaire html ...et ses css.

Imprimer Imprimer cet article


Réactions à l'article :