Jusqu'à présent, nous n'avons envisagé que la posssibilité d'afficher des pages simples (contenant du texte et des images). HTML permet bien plus que le simple affichage de texte, d'images, de liens, ...
Un serveur HTML peut également récupérer des données introduites par l'utilisateur au travers de pages HTML affichées dans son navigateur.
Le formulaire HTML permet de récupérer des informations que va saisir l'internaute sur une page HTML. L'internaute saisit ses informations soit en remplissant des champs texte (input), soit en sélectionnant un élément dans une liste déroulante (select) ou en sélectionnant une case à cocher (radio, checkbox). Une fois les informations saisies, l'internaute valide en cliquant sur un bouton de soumission (submit). Alors les informations sont transmises soit à une adresse e-mail (mailto) soit à un cgi (Common Gateway Interface), soit à une page dynamique de type php, node.js, asp, jsp...
Toutes les informations transmises lors de la soumission du formulaire sont rassemblées dans une requête, on parle de requête HTTP.
L'exemple ci-contre montre un formulaire d'inscription sur un site.
Un formulaire se définit par les balises <form>...</form> .
Tous les champs d'input du formulaire doivent se trouver à l'intérieur de cet élément, entre les balises <form> et </form>.
Cette balise requière 2 attributs :
<form action = "URL/script" method = "get">
Donnez votre accord en cochant la boîte ci-dessous et en soumettant votre réponse.<br/>
Oui, j'accepte cette proposition: <input type = "checkbox" name = "acceptation"/><br/>
<input type = "submit" value = "soumettre" />
</form>
Voici ce qu'affiche le browser :
Le HTTP est donc un protocole qui reçoit deux types de requêtes : get et post.
Avec un post , le navigateur empaquette les variables de la requête avant de l'envoyer au serveur alors que le get ajoute les variables à la fin de l'URL, dans la barre d'adresse du navigateur, au moment d'envoyer la requête au serveur. En bref, avec post les données sont envoyées dans la requête de façon invisible tandis qu'avec get , les données sont ajoutées à l'URL à la vue de l'internaute.
| GET | POST |
|---|---|
| Les variables sont ajoutées à la fin de l'URL dans la barre d'adresse du navigateur. | Les variables sont invisibles pour l'utilisateur car elles sont empaquetées. |
| Les requêtes get sont limitées à X caractères (souvent 1024). | Les requêtes post sont de longueur illimitée. |
| On peut placer des signets sur des pages générées par des get. | Il est impossible de mettre un signet (un marque-page) pour une page générée par un post. |
| On utilise la méthode get pour laisser la possibilité à l'utilisateur d'accéder à la page générée via un signet (sans retour préalable au formulaire), pour des petits paquets, ... | On utilise la méthode post pour des données confidentielles, pour des gros paquets, ... |
En tant que programmeur, vous devrez choisir dans vos formulaires entre la méthode GET ou POST. Il est donc essentiel de bien connaître et comprendre les différences entre ces 2 méthodes.
Abordons maintenant le contenu d'un formulaire.
L'élément input permet d'introduire dans une page HTML différents types d'entrée qui offrent, à l'utilisateur, différents moyens d'encoder des données. Dans cet élément, on peut préciser différents attributs :
L'attribut name spécifie le nom de l'attribut dans la requête. Ce nom doit être significatif ; il ne comportera ni virgule, ni accent, ni espace, ...
Quand on soumet le formulaire, la requête est envoyé avec les différents attributs du formulaire. Ces attributs correspondent aux input du formulaire. Ils sont transmis comme liste de nom=valeur (name=value).
Par exemple, dans un formulaire, j'ai:
Si l'utilisateur entre les valeurs de login "toto" et de password "super" et soumet le formulaire, alors la requête contiendra les informations suivantes:
login=toto
password=super
propose à l'utilisateur d'introduire une ligne de texte
En HTML :
<input type = "text" value = "exemple de capture de ligne" name = "exemple_text" size = "50"/>
propose à l'utilisateur d'introduire une ligne de texte dissimulé,
par exemple un mot de passe, (les caractères introduits par
l'utilisateur sont remplacés par des "*".
En HTML :
<input type = "password" name = "exemple_password" placeholder="Entrez un mot de passe" "size = "8"/>
propose des cases à cocher, l'utilisateur peut choisir ou non la valeur proposée; ce type d'élément permet de choisir plusieurs options comme dans l'exemple suivant
Marquez votre choix
choix 1:
choix 2 :
choix 3
:
En HTML :
Marquez vore choix
choix 1: <input type = "checkbox" name = "choix[]" value = "choix1"/>
choix 2 : <input type = "checkbox" name = "choix[]" value = "choix2"/>
choix 3 : <input type = "checkbox" name = "choix[]" value = "choix3"/>
propose un bouton d'option, la valeur est envoyée si le bouton est
sélectionné.
Si plusieurs boutons sont rassemblés sous le
même nom, le choix de l'utilisateur est exclusif
Marquez votre choix
choix 1:
choix 2 :
choix 3 :
En HTML :
Marquez vore choix
choix 1: <input type = "radio" name = "choix" value = "choix1"/>
choix 2 : <input type = "radio" name = "choix" value = "choix2"/>
choix 3 : <input type = "radio" name = "choix" value = "choix3"/>
propose un bouton de soumission des données
En HTML :
<input type = "submit" value = "soumettre" />
propose un bouton de rétablissement (effacer le contenu des différents champs et les remplacer par les valeurs par défaut)
En HTML :
<input type = "reset" value = "abandon" />
propose à l'utilisateur d'introduire l'emplacement d'un fichier
En HTML :
<form action = "URL/script" method = "post" enctype="multipart/form-data">
<input type = "file" name = "un_fichier" />
<input type = "hidden" name = "MAX_FILE_SIZE" value="100000" />
Remarquez que pour envoyer un fichier un champ caché(hidden) doit être spécifié.
Celui-ci indique la taille maximale du fichier qui pourra être envoyé.
Remarquez également l'ajout du paramètre enctype="multipart/form-data" dans la balise form.
propose un champs caché, pour forcer une valeur
En HTML :
<input type = "hidden" name = "champ_cache" />
propose un bouton illustré
En HTML :
<input type = "image" src = "images/bouton.jpg" name = "image" />
Il s'agit d'une nouveauté HTML5 permettant d' entrer une adresse email. Toujours dans cette idée de sémantique, il est conseillé d'utiliser ce champ pour les adresses emails des formulaires.
Cet élément possède un attribut pattern utile pour renseigner une expression régulière.
Ceci aura pour effet d'avertir l'utilisateur si son adresse email ne correspond pas à l'expression régulière.
Voici un lien vers plus d'informations sur les expression régulières.
Vous aurez l'occasion d'approfondir ce sujet au cours de vos études.
Entrez un email :
En HTML :
<input type="email" pattern="(^[a-z0-9]+)@([a-z0-9])+(\.)([a-z]{2,4})" name="exemple_email"/>
Il s'agit d'une nouveauté HTML5 permettant d'entrer un numéro de téléphone. Toujours dans cette idée de sémantique, il est conseillé d'utiliser ce champ pour les numéros de téléphone dans les formulaires.
Cet élément possède un attribut pattern utile pour renseigner une expression régulière.
Ceci aura pour effet d'avertir l'utilisateur si son numéro de téléphone ne correspond pas à l'expression régulière.
Voici un lien vers plus d'informations sur les expression régulières.
Vous aurez l'occasion d'approfondir ce sujet au cours de vos études.
Entrez un tel :
En HTML :
<input type="tel" pattern="^0[0-9]{9}" placeholder="Entrez votre téléphone" name="exemple_tel" />
Il s'agit d'une nouveauté HTML5 permettant d'entrer une date et/ou une heure. Toujours dans cette idée de sémantique, il est conseillé d'utiliser ce champ pour les dates et temps dans les formulaires.Regardez les attributs min et max ainsi que step dans l'exemple suivant. Dans cet exemple, les dates valides seront tous les 7 jours à partir du 15/9/2014 à savoir tous les lundis.
Entrez une date :
En HTML :
<input type="date" name="date" min="2014-09-15" max="2020-09-15" step="7"/>
Il s'agit d'une nouveauté HTML5 permettant d'entrer une couleur.
Une couleur préférée ? :
En HTML :
<input type="color" name="color"/>
Il s'agit d'une nouveauté HTML5 permettant d'entrer un texte/mot-clé à rechercher. Toujours dans cette idée de sémantique, il est conseillé d'utiliser ce champ pour les champs de recherches dans les formulaires.
Une recherche ? :
En HTML :
<input type="search" name="search"/>
La balise <textarea>...</textarea> permet à l'utilisateur d'introduire un texte sur plusieurs lignes.
Plusieurs attributs définissent cette balise :
Par exemple, voici l'apparance d'une zone textarea
<textarea name = "commentaire" cols = "50" rows = "10"> Donnez votre commentaire </textarea>
La balise <select>...</select> permet de créer un menu déroulant à l'intérieur d'un formulaire.
Par exemple :
Quelle couleur préférez-vous ?
En HTML :
<select name="couleur" size="3">
<option >Blanc</option>
<option>Noir</option>
<option>Rouge</option>
<option>Vert</option>
<option>Bleu</option>
<option>Brun</option>
<option selected = "selected">Jaune</option>
<option>Orange</option>
<option>Parme</option>
</select>
La balise select ouvre la définition du menu, les balises option spécifient les propositions contenues dans le menu et la balise /select termine le menu.
En HTML :
<fieldset> Nom : <input type = "text" name = "nom" /> <br/>
Prénom : <input type = "text" name = "prenom" /></fieldset>
En HTML :
<fieldset> <legend>Identité</legend>
Nom : <input type = "text" name = "nom" /> <br/>
Prénom : <input type = "text" name = "prenom" /></fieldset>
En HTML :
<label for = "prenom"> Direct sur le prénom </label><br/>
Nom : <input type = "text" name = "nom" id = "nom"/> <br/>
Prénom : <input type = "text" name = "prenom" id = "prenom" />
Étant donné que les formulaires ont une allure tabulaire, on utilise souvent les table pour mettre en forme plus facilement ces formulaires. Mais ceci amène souvent plus de lourdeur dans le fichier HTML puisque des balises sont ajoutées. Ceci est la seule exception notoire où on utilise un composant HTML (table) pour effectuer de la mise en forme.