Le web ne serait pas aussi intéressant s’il n’avait pas ce caractère dynamique qui nous permet de se transmettre des informations les uns aux autres au travers d’une simple page web.

Je vous propose de vous accompagner pas à pas dans la réalisation d’un formulaire de contact qui vous permettra de voir en passant un peu de html, un soupçon de css, une pincée de javascript et trois grains de php.

Ingrédients :
 Un éditeur de texte : Notepad pour windows, Subethaedit sur mac, et Kedit ou Vi avec Linux.
 Les bases du html en référence.
 Les bases des css en référence.
 Les bases de javascript en référence.
 Les bases de php en référence.

Temps de cuisson : deux heures ? plus ou moins longues mais ça doit le faire.

Prenez votre éditeur de texte et ouvrez y un document vierge.

Placez y une entête valide comme par exemple :

La première partie, appelée Doctype explique au navigateur quelles seront les normes selon lesquelles il lira votre page web. Nous avons déjà abordé ce sujet dans un autre article. Puis le document html commence par le marqueur html et il se terminera par </html>. A l’intérieur du document html il y a deux parties : la tête (head) et le corps (body).

L’ entête (head) contient des informations techniques comme le premier « meta » qui indique au navigateur quel jeu de caractère alphabétique il doit utiliser pour lire cette page. L’utf-8 est l’encodage international qui sera de plus en plus usité car couvrant le plus d’alphabets possibles. Vous pouvez lui préférer si vous vous adressez à des occidentaux le jeu « iso-8859-15 » qui comporte l’alphabet latin et les caractères accentués.

C’est également dans l’entête que l’on indique le titre du document : entre deux balises « title » et c’est toujours dans l’entête que l’on va insérer les codes des langages associés dont nous parlerons tout à l’heure et qui sont le CSS (cascading style sheet) et le javascript (langage dynamique réalisé côté client).

Revenons en à notre formulaire :

Le formulaire fait partie du corps du document. Il est délimité par les balises suivantes « <form></form>.

Cette balise accepte différents attributs :

Action : elle est obligatoire et elle dit au formulaire quoi faire des données qu’il y aura dans le formulaire. Dans notre cas, ce sera l’envoi de ces données à un petit programme php qui mettra en forme toutes ces données mais cela pourrait tout à fait être simplement un « mailto :johnny johnny.com » qui ferait que les données seraient envoyées par mail, sans mise en forme, à l’email indiquée. L’inconvénient serait que cela passerait par un logiciel de mail et que votre adresse email deviendrait publique en paraissant ainsi dans le code. Notre action appellera donc « traitement.php ».

Method : elle a deux possibilités « get » et « post », ces techniques envoient les données de manières différentes.

Enctype et Charset : peu d’intérêt dans notre cas, nous ne souhaitons pas crypter le contenu à l’envoi ni utiliser un autre jeu d’alphabet que celui mentionné dans l’entete de la page html.

Name : le nom de l’objet formulaire. Il est indispensable de nommer cet élément si l’on veut pouvoir le vérifier avec un autre langage comme par exemple javascript. Nous appellerons notre formulaire : formulaire.

Comme ça, c’est clair.

Cela nous donne donc :

Bon, visuellement ça ne rend rien : d’accord, mais c’est déjà bien avancé vous savez ?

Un formulaire comprend toujours deux parties lui aussi.

Une partie de données sur l’envoyeur et une partie d’information qui constituent le contenu du recueil. Dans le cadre d’un formulaire de contact, vous aurez besoin de savoir comment s’appelle la personne qui veut vous contacter, son adresse et ce qu’elle vous veut.

Voyons quelles sont les possibilités (type) que nous offre le html en champs de formulaire (input) :

 Les champs de texte simple : text
 Les mots de passe : password
 Les cases à cocher : checkbox
 Les boutons radio : radio
 Les boutons de soumission : submit
 Les boutons d’annulation : reset
 Les champs de fichier : file
 Les champs cachés : hidden
 Les champs image : qui créent un bouton de soumission graphique
 Les champs « bouton » : button qui créent un bouton poussoir.

Il y a aussi les champs spéciaux textarea et les champs à option préselectionnés, les derniers ne seront pas utilisés ici et je vous invite à regarder la documentation pour leur usage.

Les champs spéciaux de type textarea sont des champs texte à plusieurs rangées et colonnes. Leur syntaxe est simple : <textarea name="" cols="50" rows="20" ce qui fera un champ texte à 50 colonnes et 20 rangées (lignes).

Dans notre formulaire nous allons avoir besoin de champs de texte simples et textarea, de boutons radio, d’un bouton d’annulation et d’un bouton de soumission.

En html, cela va donc nous donner :

Et voilà ! le formulaire est fait :

la première partie permet d’identifier l’envoyeur, la deuxième partie nous construit un mail comme on les aime : avec un sujet et un texte et pas de pièce jointe (si vous le souhaitez vous pourrez compléter tout cela ultérieurement avec les liens que je vous donne au fur et à mesure de l’article).

Bon, c’est pas mal comme ça mais euh. Visuellement, c’est moche. Si si. Et puis on y comprend rien : comment savoir quoi mettre dans quelle case ?

Sémantiquement, ce formulaire, c’est un tableau avec des rangées et des colonnes que nous souhaitons pouvoir reprendre ailleurs. Pourquoi ne pas insérer ce formulaire dans un tableau pour améliorer son aspect.

C’est partiiiiiiiiiiiiiii :

le formulaire

voilà un formulaire mis en page dans un tableau

Voilà pour la première partie : nous avons réalisé un formulaire html qui envoie des données à une page php appelée traitement.php que nous ferons dans le 4e article.

Passons maintenant à l’article 2 : il est austère non ce formulaire, vous ne trouvez pas que nous pourrions le rendre plus visuel ?