Formulaire HTML

Les formulaires HTML sont utilisés pour collecter différents types d'entrées de l'utilisateur.

L'élément <form>

Les formulaires HTML sont utilisés pour collecter les entrées de l'utilisateur.

L'élément <form> définit le formulaire HTML :

Exemple

<form>
 .
form elements
 .
</form>

Les formulaires HTML contiennentÉléments de formulaire.

Les éléments de formulaire font référence à différents types d'éléments input, de cases à cocher, de boutons radio, de boutons de soumission, etc.

Éléments <input>

<input> L'élément le plus importantÉléments de formulaire.

Les éléments <input> ont de nombreuses formes, selon les type Attribut.

Voici les types utilisés dans ce chapitre :

Type Description
text Définir l'entrée de texte régulier.
radio Définir l'entrée bouton radio (sélectionner l'une des options multiples)
submit Définir le bouton de soumission (soumission du formulaire)

Remarque :Vous apprendrez plus sur les types d'entrée plus tard dans ce tutoriel.

Entrée texte

<input type="text"> Définir pourEntrée texteChamps d'entrée en ligne :

Exemple

<form>
 Prénom:<br>
<input type="text" name="firstname">
<br>
 Nom de famille:<br>
<input type="text" name="lastname">
</form>

Essayez-le vous-même

Voici à quoi cela ressemble dans le navigateur :

Prénom :


Nom de famille :

Remarque :Le formulaire lui-même n'est pas visible. Il faut aussi noter que la largeur par défaut des champs de texte est de 20 caractères.

Entrée bouton radio

<input type="radio"> DéfinirBouton radio.

Les boutons radio permettent à l'utilisateur de choisir l'une des options limitées :

Exemple

<form>
<input type="radio" name="sex" value="male" checked>Homme
<br>
<input type="radio" name="sex" value="female">Femme
</form>

Essayez-le vous-même

Les boutons radio ont cette apparence dans le navigateur :

Homme

Femme

Bouton de soumission

<input type="submit"> Définir pourProgramme de traitement du formulaire(form-handler)SoumettreBoutons du formulaire.

Le programme de traitement du formulaire est généralement une page serveur qui contient un script utilisé pour traiter les données d'entrée.

Le programme de traitement du formulaire se situe dans le action Spécifié dans les attributs :

Exemple

<form action="action_page.php">
Prénom:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nom de famille:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Soumettre">
</form>

Essayez-le vous-même

Voici à quoi cela ressemble dans le navigateur :

Prénom :


Nom de famille :


Action Attribute

Action AttributeDéfinir l'action à exécuter lors de la soumission du formulaire.

La pratique habituelle pour soumettre un formulaire au serveur est d'utiliser un bouton de soumission.

Généralement, le formulaire est soumis à une page web sur le serveur web.

Dans l'exemple précédent, un script de serveur spécifique a été désigné pour traiter le formulaire soumis :

<form action="action_page.php">

Si la propriété action est omise, l'action sera définie sur la page actuelle.

Propriété Method

Propriété methodDéfinit la méthode HTTP utilisée lors du soumission du formulaire (GET ou POST) :

<form action="action_page.php" method="GET">

ou :

<form action="action_page.php" method="POST">

Quand utiliser GET ?

Vous pouvez utiliser GET (méthode par défaut) :

Si le soumission du formulaire est passif (par exemple, une recherche de moteur de recherche) et ne contient pas d'informations sensibles.

Lorsque vous utilisez GET, les données du formulaire sont visibles dans la barre d'adresse de la page :

action_page.php?firstname=Mickey&lastname=Mouse

Remarque :GET est le plus approprié pour le soumission de petites quantités de données. Le navigateur définit des limites de capacité.

Quand utiliser POST ?

Vous devriez utiliser POST :

Si le formulaire met à jour des données ou contient des informations sensibles (par exemple, un mot de passe).

POST est plus sécurisé, car les données soumises dans la barre d'adresse de la page ne sont pas visibles.

Propriété Name

Pour être correctement soumis, chaque champ d'entrée doit être configuré avec une propriété name.

Dans cet exemple, seul le champ d'entrée "Nom de famille" sera soumis :

Exemple

<form action="action_page.php">
Prénom:<br>
<input type="text" value="Mickey">
<br>
Nom de famille:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Soumettre">
</form>

Essayez-le vous-même

Utilisez <fieldset> pour regrouper les données du formulaire

<fieldset> Les éléments combinés contiennent des données liées au formulaire

<legend> L'élément <fieldset> définit le titre de l'élément.

Exemple

<form action="action_page.php">
<fieldset>
<legend>Informations personnelles :</legend>
Prénom:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nom de famille:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Soumettre"></fieldset>
</form>

Essayez-le vous-même

Ce code HTML apparaît ainsi dans le navigateur :

Informations personnelles :
Prénom :


Nom de famille :


Attributs du Formulaire HTML

L'élément <form> HTML, avec tous les attributs possibles, est ainsi :

Exemple

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

Voici la liste des attributs de <form> :

Attribut Description
accept-charset Définir le jeu de caractères utilisé dans le formulaire soumis (par défaut : jeu de caractères de la page).
action Définir l'adresse (URL) où le formulaire doit être soumis (page de soumission).
autocomplete Définir si le navigateur doit automatiquement compléter le formulaire (par défaut : activé).
enctype Définir l'encodage des données soumises (par défaut : url-encoded).
method Définir la méthode HTTP utilisée pour soumettre le formulaire (par défaut : GET).
name Définir le nom de l'objet du formulaire (pour DOM : document.forms.name).
novalidate Définir que le navigateur ne vérifie pas le formulaire.
target Définir la cible de l'adresse dans l'attribut action (par défaut : _self).

Remarque :Vous apprendrez davantage sur les attributs dans les sections suivantes.