HTML Attributs du formulaire d'entrée*
Ce chapitre décrit les différents attributs de formulaire* pour l'élément HTML <input> .
L'attribut form
L'attribut form de l'élément <input> spécifie le formulaire auquel il appartient.
La valeur de cet attribut doit correspondre à l'attribut id de l'élément <form> auquel il est associé.
Exemple
Un champ d'entrée situé en dehors du formulaire HTML (mais faisant toujours partie du formulaire) :
<form action="/action_page.php" id="form1">
<label for="fname">Prénom:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Soumettre">
</form>
<label for="lname">Nom de famille:</label>
<input type="text" id="lname" name="lname" form="form1">
L'attribut formaction
L'attribut formaction de l'élément <input> spécifie l'URL du fichier qui traitera les données lorsque le formulaire sera soumis.
Remarque : Cet attribut remplace l'attribut action de l'élément <form> .
L'attribut formaction fonctionne avec les types d'entrée suivants : submit et image.
Exemple
Un formulaire HTML avec deux boutons de soumission, ayant des actions différentes :
<form action="/action_page.php">
<label for="fname">Prénom:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Nom de famille:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Soumettre">
<input type="submit" formaction="/action_page2.php" value="Soumettre en tant qu'Admin">
</form> L'attribut formenctype
L'attribut formenctype de l'élément <input> spécifie comment les données du formulaire doivent être encodées lors de la soumission (uniquement pour les formulaires avec method="post").
Remarque : Cet attribut remplace l'attribut enctype de l'élément <form> .
L'attribut formenctype fonctionne avec les types d'entrée suivants : submit et image.
Exemple
Un formulaire avec deux boutons de soumission. Le premier envoie les données du formulaire avec l'encodage par défaut, le second envoie les données du formulaire encodées en tant que "multipart/form-data" :
<form action="/action_page_binary.asp" method="post">
<label for="fname">Prénom:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Soumettre">
<input type="submit" formenctype="multipart/form-data"
value="Soumettre en tant que Multipart/form-data">
</form> L'attribut formmethod
L'attribut formmethod de l'élément <input> définit la méthode HTTP pour envoyer les données du formulaire à l'URL d'action.
Remarque : Cet attribut remplace l'attribut method de l'élément <form> .
L'attribut formmethod fonctionne avec les types d'entrée suivants : submit et image.
Les données du formulaire peuvent être envoyées en tant que variables d'URL (method="get") ou en tant que transaction HTTP post (method="post").
Remarques sur la méthode "get" :
- Cette méthode ajoute les données du formulaire à l'URL sous forme de paires nom/valeur.
- Cette méthode est utile pour les soumissions de formulaires où un utilisateur souhaite mettre en signet le résultat.
- Il y a une limite à la quantité de données que vous pouvez placer dans une URL (varie selon les navigateurs), par conséquent, vous ne pouvez pas être sûr que toutes les données du formulaire seront correctement transférées.
- N'utilisez jamais la méthode "get" pour transmettre des informations sensibles ! (le mot de passe ou d'autres informations sensibles seront visibles dans la barre d'adresse du navigateur).
Remarques sur la méthode "post" :
- Cette méthode envoie les données du formulaire en tant que transaction HTTP post.
- Les soumissions de formulaires avec la méthode "post" ne peuvent pas être mises en signet.
- La méthode "post" est plus robuste et sécurisée que "get", et "post" n'a pas de limitations de taille.
Exemple
Un formulaire avec deux boutons de soumission. Le premier envoie les données du formulaire avec method="get". Le second envoie les données du formulaire avec method="post" :
<form action="/action_page.php" method="get">
<label for="fname">Prénom:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Nom de famille:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Soumettre en utilisant GET">
<input type="submit" formmethod="post" value="Soumettre en utilisant POST">
</form> L'attribut formtarget
L'attribut formtarget de l'élément <input> spécifie un nom ou un mot-clé qui indique où afficher la réponse reçue après la soumission du formulaire.
Remarque : Cet attribut remplace l'attribut target de l'élément <form> .
L'attribut formtarget fonctionne avec les types d'entrée suivants : submit et image.
Exemple
Un formulaire avec deux boutons de soumission, ayant des fenêtres cibles différentes :
<form action="/action_page.php">
<label for="fname">Prénom:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Nom de famille:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Soumettre">
<input type="submit" formtarget="_blank" value="Soumettre dans une nouvelle fenêtre/onglet">
</form> L'attribut formnovalidate
L'attribut formnovalidate de l'élément <input> spécifie qu'un élément <input> ne doit pas être validé lors de la soumission.
Remarque : Cet attribut remplace l'attribut novalidate de l'élément <form> .
L'attribut formnovalidate fonctionne avec les types d'entrée suivants : submit.
Exemple
Un formulaire avec deux boutons de soumission (avec et sans validation) :
<form action="/action_page.php">
<label for="email">Entrez votre email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Soumettre">
<input type="submit" formnovalidate="formnovalidate"
value="Soumettre sans validation">
</form> L'attribut novalidate
L'attribut novalidate est un attribut de l'élément <form> .
Lorsqu'il est présent, novalidate spécifie que toutes les données du formulaire ne doivent pas être validées lors de la soumission.
Exemple
Spécifiez qu'aucune donnée de formulaire ne doit être validée lors de la soumission :
<form action="/action_page.php" novalidate>
<label for="email">Entrez votre email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Soumettre">
</form> Éléments de formulaire et d'entrée HTML
| Tag | Description |
|---|---|
| <form> | Définit un formulaire HTML pour l'entrée utilisateur |
| <input> | Définit un contrôle d'entrée |
Pour une liste complète de tous les tags HTML disponibles, visitez notre Référence des tags HTML .