Formulaires HTML
Un formulaire HTML est composé d'éléments de formulaire, qui sont différents types d'éléments de saisie, tels que des cases à cocher, des champs de texte, des boutons de soumission, des boutons radio, etc.
L'élément HTML <input>
L'élément <input> est un élément de formulaire essentiel qui, selon l'attribut type, peut s'afficher de différentes manières.
Parlons de certains types de saisie.
Saisie de texte
L'élément <input type="text"> spécifie un champ de saisie sur une seule ligne pour la saisie de texte.
Exemple de saisie de texte :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Text Input Example</h2>
<form>
Name:<br />
<input type="text" name="name" />
<br />
Surname:<br />
<input type="text" name="surname" />
</form>
</body>
</html>Saisie par bouton radio
L'élément <input type="radio"> spécifie un bouton radio qui permet de sélectionner une option parmi plusieurs.
Exemple de saisie par bouton radio
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Radio Button Example</h2>
<form>
<input type="radio" name="game" value="football" checked /> Football
<input type="radio" name="game" value="basketball" /> Basketball
</form>
</body>
</html>Bouton de soumission
L'élément <input type="submit"> envoie les données du formulaire à un gestionnaire de formulaire.
Le gestionnaire de formulaire est une page serveur contenant un script pour traiter les données saisies, défini dans l'attribut action du formulaire.
Exemple de bouton de soumission
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>HTML Form Example</h2>
<form action="/form/submit" method="POST">
Name:<br />
<input type="text" name="firstname" value="Tom" />
<br />
Surname:<br />
<input type="text" name="lastname" value="Brown" />
<br />
Age:<br />
<input type="text" name="Age" value="21" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>Click the "Submit" button to send the form data to the action page.</p>
</body>
</html>L'attribut action
L'attribut action spécifie l'action qui doit être effectuée lors de la soumission du formulaire.
Lorsque l'utilisateur clique sur le bouton de soumission, les données du formulaire sont envoyées à une page web sur le serveur.
Formulaires HTML
<form action="/form/submit">L'attribut target
L'attribut target définit si le résultat du formulaire sera ouvert dans un nouvel onglet du navigateur, dans un cadre ou dans la fenêtre actuelle.
La valeur par défaut de cet attribut est _self. L'utilisation de cette valeur ouvrira le résultat du formulaire dans la fenêtre actuelle.
La valeur _blank ouvrira le résultat du formulaire dans un nouvel onglet du navigateur.
Formulaires HTML
<form action="/form/submit" target="_blank">L'attribut method
L'attribut method définit la méthode HTTP (GET ou POST) qui sera utilisée lors de la soumission des données du formulaire.
Exemple de la méthode GET :
Exemple de la méthode GET
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the GET Method</h2>
<form action="/form/submit" target="_blank" method="GET">
Name:<br />
<input type="text" name="name" value="Tom" />
<br />
Surname:<br />
<input type="text" name="Surname" value="Brown" />
<br />
Age:<br />
<input type="number" name="age" value="21" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p> Here we used the "_blank" value, which will open the form result in a new browser tab.</p>
</body>
</html>Exemple de la méthode POST :
Exemple de la méthode POST :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the Post Method</h2>
<form action="/form/submit" target="_blank" method="POST">
Name:<br />
<input type="text" name="name" value="Tom" />
<br />
Surname:<br />
<input type="text" name="surname" value="Brown" />
<br />
Age:<br />
<input type="number" name="age" value="21" />
<br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Quand utiliser la méthode GET
GET est la méthode par défaut lors de la soumission des données du formulaire, et lors de l'utilisation de cette méthode, les données du formulaire sont visibles dans la barre d'adresse de la page.
DANGER
N'utilisez pas la méthode GET pour envoyer des données sensibles, car elles seront visibles dans l'URL.
TIP
La méthode GET est utile pour les soumissions de formulaire où l'utilisateur souhaite ajouter le résultat aux favoris.
DANGER
La longueur d'une URL est limitée (maximum 2048 caractères).
Quand utiliser la méthode POST
Si les données du formulaire contiennent des informations sensibles ou personnelles, utilisez toujours la méthode POST, car elle n'affiche pas les données soumises dans la barre d'adresse de la page.
TIP
Comme il n'y a pas de limitations de taille lors de l'utilisation de la méthode POST, elle peut être utilisée pour envoyer de grandes quantités de données.
Les soumissions de formulaire avec la méthode POST ne peuvent pas être ajoutées aux favoris.
Autres attributs
Vous trouverez ci-dessous d'autres attributs <form> :
| Attribut | Description |
|---|---|
| accept-charset | Cet attribut définit le jeu de caractères utilisé dans le formulaire soumis (par défaut : le jeu de caractères de la page). |
| autocomplete | Cet attribut définit si le navigateur doit remplir automatiquement le formulaire ou non (par défaut : activé). |
| enctype | Cet attribut définit l'encodage des données soumises (par défaut : url-encoded). |
| name | Cet attribut définit un nom utilisé pour identifier le formulaire. |
| novalidate | Cet attribut définit que le navigateur ne doit pas valider le formulaire. |
Pratique
Quels sont les attributs essentiels que chaque élément de saisie d'un formulaire HTML devrait inclure ?