HTML Attributs du formulaire
Ce chapitre décrit les différents attributs de l'élément HTML <form>.
L'attribut d'action
L'attribut action définit l'action à effectuer lors de la soumission du formulaire.
Habituellement, les données du formulaire sont envoyées dans un fichier sur le serveur lorsque l'utilisateur clique sur le bouton soumis.
Dans l'exemple ci-dessous, les données du formulaire sont envoyées dans un fichier appelé "action_page.html". Ce fichier contient un script côté serveur qui gère les données du formulaire :
Exemple
Lors de la soumission, envoyez les données du formulaire à "action_page.html":
<form action="/action_page.html">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Astuce : Si l'attribut action est omis, l'action est définie sur la page actuelle.
L'attribut target
L'attribut target spécifie où afficher la réponse reçue après l'envoi du formulaire.
L'attribut target peut avoir l'une des valeurs suivantes :
| Valeur | Description |
|---|---|
| _blank | La réponse est affichée dans une nouvelle fenêtre ou un nouvel onglet |
| _self | La réponse est affichée dans la fenêtre actuelle |
| _parent | La réponse est affichée dans le cadre parent |
| _top | La réponse est affichée dans tout le corps de la fenêtre |
| framename | La réponse est affichée dans une iframe nommée |
La valeur par défaut est _self ce qui signifie que la réponse s'ouvrira dans la fenêtre actuelle.
Exemple
Ici, le résultat soumis s'ouvrira dans un nouvel onglet de navigateur :
<form action="/action_page.html" target="_blank">
Try it Yourself »
L'attribut de method
L'attribut method spécifie la méthode HTTP à utiliser lors de la soumission des données du formulaire.
Les données du formulaire peuvent être envoyées sous forme de variables URL (avec method="get") ou sous forme de transaction HTTP post (avec method="post").
La méthode HTTP par défaut lors de la soumission des données du formulaire est GET.
Exemple
Cet exemple utilise la méthode GET lors de la soumission des données du formulaire :
<form action="/action_page.html" method="get">
Try it Yourself »
Exemple
Cet exemple utilise la méthode POST lors de la soumission des données du formulaire :
<form action="/action_page.html" method="post">
Try it Yourself »
Remarques sur GET :
- Ajoute les données du formulaire à l'URL, par paires nom/valeur
- N'utilisez JAMAIS GET pour envoyer des données sensibles ! (les données du formulaire soumis sont visibles dans l'URL !)
- La longueur d'une URL est limitée (2 048 caractères)
- Utile pour les envois de formulaires où un utilisateur souhaite ajouter le résultat à ses favoris
- GET convient aux données non sécurisées, comme les chaînes de requête dans Google
Remarques sur le POST :
- Ajoute les données du formulaire dans le corps de la requête HTTP (les données du formulaire soumises ne sont pas affichées dans l'URL)
- POST n'a aucune limite de taille et peut être utilisé pour envoyer de grandes quantités de données.
- Les envois de formulaires avec POST ne peuvent pas être ajoutés à vos favoris
Conseil : Utilisez toujours POST si les données du formulaire contiennent des informations sensibles ou personnelles !
L'attribut autocomplete
L'attribut autocomplete spécifie si la saisie semi-automatique doit être activée ou désactivée pour un formulaire.
Lorsque la saisie semi-automatique est activée, le navigateur complète automatiquement les valeurs en fonction des valeurs que l'utilisateur a saisies auparavant.
Exemple
Un formulaire avec saisie semi-automatique sur :
<form action="/action_page.html" autocomplete="on">
Try it Yourself »
L'attribut novalidate
L'attribut novalidate est un attribut booléen.
Lorsqu'il est présent, il spécifie que les données du formulaire (entrée) ne doivent pas être validées lors de leur soumission.
Exemple
Un formulaire avec un attribut novalidate :
<form action="/action_page.html" novalidate>
Try it Yourself »
HTML Exercices
Liste de tous les attributs <form>
| Attribut | Description |
|---|---|
| accept-charset | Spécifiez les codages de caractères utilisés pour la soumission du formulaire |
| action | Spécifiez où envoyer les données du formulaire lorsqu'un formulaire est soumis |
| autocomplete | Spécifiez si la saisie semi-automatique doit être activée ou désactivée pour un formulaire |
| enctype | Spécifiez comment les données du formulaire doivent être codées lors de leur soumission au serveur (uniquement pour method="post") |
| method | Spécifiez la méthode HTTP à utiliser lors de l'envoi de données de formulaire |
| name | Précisez le nom du formulaire |
| novalidate | Préciser que le formulaire ne doit pas être validé lors de sa soumission |
| rel | Spécifie la relation entre une ressource liée et le document actuel |
| target | Spécifiez où afficher la réponse reçue après l'envoi du formulaire |
