MEILLEUR SITE POUR LES DÉVELOPPEURS WEB
HTML5 Cours pour débutants

En Ua Es De

HTML Formulaire de saisie* Attributs


Ce chapitre décrit les différents attributs form* pour l'élément HTML <input>.


L'attribut form

L'attribut input form spécifie le formulaire auquel appartient l'élément <input>.

La valeur de cet attribut doit être égale à l'attribut id de l'élément <form> auquel il appartient.

Exemple

Un champ de saisie situé en dehors du formulaire HTML (mais faisant toujours partie du formulaire) :

<form action="/action_page.html" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
Try it Yourself »

L'attribut formaction

L'attribut input formaction spécifie l'URL du fichier qui traitera l'entrée lors de la soumission du formulaire.

Remarque : Cet attribut remplace l'attribut action de l'élément <form>.

L'attribut formaction fonctionne avec les types d'entrée suivants : soumettre et image.

Exemple

Un formulaire HTML avec deux boutons de soumission, avec des actions différentes :

<form action="/action_page.html">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_page2.html" value="Submit as Admin">
</form>
Try it Yourself »

L'attribut formenctype

L'attribut d'entrée formenctype spécifie comment les données du formulaire doivent être codées lors de leur 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 : soumettre et image.

Exemple

Un formulaire avec deux boutons de soumission. Le premier envoie les données du formulaire avec le codage par défaut, le second envoie les données du formulaire codées comme "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>
Try it Yourself »

L'attribut formmethod

L'attribut d'entrée formmethod définit la méthode HTTP pour envoyer les données du formulaire à l'URL de l'action.

Remarque : Cet attribut remplace l'attribut méthode 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 sous forme de variables URL (method="get") ou sous forme de post-transaction HTTP (method="post").

Notes sur la méthode "get" :

  • Cette méthode ajoute les données du formulaire à l'URL par paires nom/valeur
  • Cette méthode est utile pour les envois de formulaires où un utilisateur souhaite ajouter le résultat à ses favoris
  • Il existe 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)

Notes sur la méthode "post" :

  • Cette méthode envoie les données du formulaire sous forme de post-transaction HTTP
  • Les envois de formulaires avec la méthode "post" ne peuvent pas être ajoutés aux favoris
  • La méthode "post" est plus robuste et sécurisée que "get", et "post" n'a pas de limite 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.html" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>
Try it Yourself »

L'attribut formtarget

L'attribut d'entrée formtarget 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 : soumettre et image.

Exemple

Un formulaire avec deux boutons de soumission, avec des fenêtres cibles différentes :

<form action="/action_page.html">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
Try it Yourself »

L'attribut formnovalidate

L'attribut input formnovalidate spécifie qu'un élément <input> ne doit pas être validé lors de sa 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.html">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>
Try it Yourself »

L'attribut novalidate

L'attribut novalidate est un attribut <form>.

Lorsqu'il est présent, novalidate spécifie que toutes les données du formulaire ne doivent pas être validées lors de leur soumission.

Exemple

Précisez qu'aucune donnée de formulaire ne doit être validée lors de la soumission :

<form action="/action_page.html" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself »

HTML Éléments de formulaire et de saisie

Étiquette Description
<form> Définit un formulaire HTML pour la saisie de l'utilisateur
<input> Définir un contrôle d'entrée

Pour une liste complète de toutes les balises HTML disponibles, visitez la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.



Commentaires