Attributs form* d'Entrée HTML

Cours recommandé : <input> Ce chapitre présente HTML Les différences des éléments Attribut.

form*

de input Attribut form form <input> Cet attribut spécifie

Formulaire auquel appartient l'élément.

Exemple

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

Champ d'entrée situé à l'extérieur du formulaire HTML (mais reste une partie du formulaire):
  <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：</label>
<form action="/action_page.php" id="form1">

Essayer vous-même

<input type="text" id="lname" name="lname" form="form1">

de input formaction Attribut formaction

Remarque :Cet attribut spécifie l'URL du fichier à traiter lors de la soumission du formulaire. <form> Cet attribut remplacera l'attribut Attribut.

formaction L'attribut s'applique aux types d'entrée suivants : submit et image.

Exemple

Formulaire HTML avec deux boutons de soumission, chacun ayant une action (action) différente:

<form action="/action_page.php">
  <label for="fname">Prénom：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nom：</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'administrateur">
</form>

Essayer vous-même

Attribut formenctype

de input formenctype Cet attribut spécifie comment encoder les données du formulaire lors de la soumission (seulement applicable aux formulaires avec method="post").

Remarque :Cette propriété va couvrir <form> l'attribut enctype de l'élément.

formenctype L'attribut s'applique aux types d'entrée suivants : submit et image.

Exemple

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 avec l'encodage "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 avec l'encodage Multipart/form-data">
</form>

Essayer vous-même

Attribut formmethod

de input formmethod Cet attribut définit la méthode HTTP à utiliser pour envoyer les données du formulaire à l'URL d'action.

Remarque :Cette propriété va couvrir <form> l'attribut method de l'élément.

formmethod L'attribut s'applique aux types d'entrée suivants : submit et image.

Les données du formulaire peuvent être envoyées en tant que variables de l'URL (method="get") ou en tant que transaction HTTP POST (method="post").

Remarques sur GET :

  • Ajoutez les données du formulaire à l'URL sous forme de paires de nom/valeur
  • Ne jamais utiliser GET pour envoyer des données sensibles ! (Les données du formulaire soumis sont visibles dans l'URL !)
  • La longueur de l'URL est limitée (2048 caractères)
  • Très utile pour les soumissions de formulaires où l'utilisateur souhaite ajouter les résultats comme signet
  • GET est utilisé pour des données non sécurisées, telles que les chaînes de recherche de Google

Remarques sur POST :

  • Ajoutez les données du formulaire à la corp du requête HTTP (les données du formulaire soumis ne s'affichent pas dans l'URL)
  • POST n'a pas de limite de taille, il peut être utilisé pour envoyer de grandes quantités de données.
  • Les soumissions de formulaires avec POST ne peuvent pas ajouter de signets

Avis :Si les données du formulaire contiennent des informations sensibles ou personnelles, veuillez utiliser POST !

Exemple

Formulaire avec deux boutons de soumission. Le premier envoie les données du formulaire en utilisant method="get". Le second envoie les données du formulaire en utilisant 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：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Soumettre avec GET">
  <input type="submit" formmethod="post" value="Soumettre avec POST">
</form>

Essayer vous-même

L'attribut formtarget

de input formtarget L'attribut spécifie un nom ou un mot-clé, qui détermine où afficher la réponse reçue après la soumission du formulaire.

Remarque :Cette propriété va couvrir <form> l'attribut target de l'élément.

formtarget L'attribut s'applique aux types d'entrée suivants : submit et image.

Exemple

Formulaire avec deux boutons de soumission et 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：</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>

Essayer vous-même

l'attribut formnovalidate

de input formnovalidate Les propriétés ne doivent pas vérifier l'élément <input> lors de la soumission.

Remarque :Cette propriété va couvrir <form> L'attribut novalidate de l'élément.

formnovalidate L'attribut s'applique aux types d'entrée suivants : submit.

Exemple

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>

Essayer vous-même

Attribut novalidate

novalidate L'attribut est <form> Attribut.

Si l'attribut novalidate est défini, il stipule que toutes les données de formulaire ne doivent pas être vérifiées lors du soumission.

Exemple

Définir que les données de formulaire ne doivent pas être vérifiées lors du 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>

Essayer vous-même

Éléments Form et Input HTML

Balise Description
<form> Définir des formulaires HTML pour les entrées utilisateur.
<input> Définir les contrôles d'entrée.

Pour obtenir une liste complète de toutes les balises HTML disponibles, veuillez visiter notre Manuel de référence des balises HTML.