Créer des formulaires

En HTML, un formulaire est délimité par le couple de balises :<form>...</form>.

Cette balise est associée à 2 attributs qui déterminent la façon dont va être traité le formulaire :

• action : indique la page de traitement et/ou la page qui doit s’afficher après la validation

• method : méthode de transmission des données du formulaire. GET pour envoyer les données dans l’URL, POST pour récupérer les données dans un tableau

<form method=''POST'' action=''http://www.monsite.com/page-de-traitement.php'' >
// contenu du formulaire
</form>

Ce cours présente le code HTML pour créer un formulaire dans une page HTML, mais n’aborde pas la récupération et le traitement des informations saisies par les internautes, car ce n’est pas l’objectif de cette formation.
Pour plus d’informations sur le sujet, vous pouvez faire des recherches sur internet ou bien suivre notre formation PHP/mySQL.

Champ de saisie de type texte

Un formulaire peut contenir un champ de texte, d’une seule ligne.

<input type= ”text ” name= ”nom_du_champ ” value= ”valeur par défaut ” />

 

L’attribut name permet de donner un nom au champ ; ce nom servira à récupérer la saisie du visiteur au cours du traitement. L’attribut value (facultatif) permet quant à lui de pré-remplir le champ avec un texte par défaut.

 

Vous pouvez éventuellement plafonner la longueur maximale du texte saisi par les internautes en précisant un nombre maximum de caractères :

<input type= ”text ” name= ”nom_du_champ ” value= ”valeur par défaut ” maxlength='''10'' />

Champ crypté, pour les mots de passe

Un champ de formulaire peut être “ crypté ” : au cours de la frappe, les lettres sont remplacées par des étoiles ou des points. Ce type de champ est utile pour les mots de passe.

<input type= ”password ” name= ”nom_du_champ ” value= ”valeur par défaut ” />

Cases à cocher (plusieurs choix possibles)

 

Pour ajouter une ou plusieurs cases à cocher, utilisez le code :

<input type= ”checkbox ” name= ”nom_du_champ ” /> Première proposition
<input type= ”checkbox ” name= ”nom_du_champ2 ” /> Seconde proposition

Boutons radio (un seul choix possible)

Un ensemble de boutons radio permet aux visiteurs de choisir un élément parmi plusieurs. Lorsque qu’un internaute clique sur un élément, les autres boutons de la liste sont automatiquement décochés.

<input type= ”radio” name= ”nom_liste_radio ” value= ”choix1 ” /> Choix n°1
<input type= ”radio” name= ”nom_liste_radio ” value= ”choix2 ” /> Choix n°2

Liste déroulante

Pour créer une liste déroulante, utilisez le code :

<select name= ”nom_liste_deroulante ”>
<option value= ”valeur1 ”> Choix 1
<option value= ”valeur2 ”> Choix 2
<option value= ”valeur3 ”> Choix 3
</select>

Zone de texte, pour rédiger un message plus long

Un formulaire peut également contenir une zone de texte multiligne. En HTML, cette zone de texte est crée grâce à la balise <textarea>.

<textarea name=''nom_zone'' rows= ”xx ” cols= ”xx ”>Texte par défaut</textarea>

 

Les attributs rows et cols définissent la taille de la zone de texte, en fixant respectivement le nombre de lignes et le nombre de colonnes. Ces 2 attributs sont optionnels, tout comme le texte par défaut.

Pour définir les dimensions d’une zone de texte, vous pouvez également utiliser les propriétés CSS width et height.

Les champs cachés

Le langage HTML donne la possibilité aux développeurs de sites internet de transmettre des données invisibles à l’écran : ce sont les données de type hidden.

<input type=”hidden” name=”nom_champ_invisible” value=”valeur_transmise” />

Le bouton de validation pour envoyer les réponses

Enfin, pour valider le formulaire et déclencher l’envoi des données, l’internaute doit cliquer sur un bouton de validation :

<input type= ”submit ” value= ”texte du bouton ” />

Pour plus d'informations, vous pouvez nous contacter par mail.