Attributs de formulaire HTML

Ce chapitre présente HTML <form> Différents attributs de l'élément.

Attribut Action

action Les attributs définissent l'opération à exécuter lors de la soumission du formulaire.

Généralement, lorsque l'utilisateur clique sur le bouton "Soumettre", les données du formulaire sont envoyées à un fichier sur le serveur.

Dans l'exemple suivant, les données du formulaire sont envoyées à un fichier nommé "action_page.php". Ce fichier contient un script côté serveur pour traiter les données du formulaire:

Exemple

Après soumission, les données du formulaire sont envoyées à "action_page.php":

<form action="/action_page.php">
  <label for="fname">Prénom:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Nom de famille:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Soumettre">
</form>

Essayez-le vous-même

Avis :Si l'attribut action est omis, l'action est définie comme la page actuelle.

Attribut Target

target L'attribut spécifie où afficher la réponse après la soumission du formulaire.

target L'attribut peut être configuré avec l'une des valeurs suivantes :

Valeur Description
_blank La réponse s'affiche dans une nouvelle fenêtre ou un nouvel onglet.
_self La réponse s'affiche dans la fenêtre actuelle.
_parent La réponse s'affiche dans le cadre parent.
_top La réponse s'affiche dans tout le body de la fenêtre.
framename La réponse s'affiche dans le nommé iframe.

La valeur par défaut est _self, ce qui signifie que la réponse s'ouvrira dans la fenêtre actuelle.

Exemple

Dans ce cas, le résultat de la soumission sera ouvert dans un nouvel onglet du navigateur :

<form action="/action_page.php" target="_blank">

Essayez-le vous-même

Attribut 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 utilisées comme variables de l'URL (en utilisant method="get") ou comme transaction HTTP POST (en utilisant method="post")envoyé.

La méthode HTTP par défaut lors de la soumission des données du formulaire est GET.

Exemple

Dans cet exemple, la méthode GET est utilisée pour soumettre les données du formulaire :

<form action="/action_page.php" method="get">

Essayez-le vous-même

Exemple

Dans cet exemple, le méthode POST est utilisée pour soumettre les données du formulaire :

<form action="/action_page.php" method="post">

Essayez-le vous-même

Points à retenir concernant GET :

  • Ajoutez les données du formulaire sous forme de paires de nom/valeur à l'URL
  • 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 signets
  • GET s'applique aux données non sécurisées, telles que les chaînes de recherche dans Google

Points à retenir concernant POST :

  • Ajoutez les données du formulaire au corps de la requête HTTP (les données du formulaire soumis ne s'affichent pas dans l'URL)
  • POST n'a pas de limite de taille et peut être utilisé pour envoyer de grandes quantités de données.
  • La soumission de formulaires avec POST ne peut pas ajouter de signets

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

Attribut Autocomplete

autocomplete L'attribut spécifie si le formulaire doit ouvrir la fonction de complétion automatique.

Lorsque la fonction de complétion automatique est activée, le navigateur remplira automatiquement les valeurs en fonction des valeurs précédemment saisies par l'utilisateur.

Exemple

Activer le remplissage automatique des formulaires :

<form action="/action_page.php" autocomplete="on">

Essayez-le vous-même

Attribut Novalidate

novalidate C'est un attribut booléen.

Si défini, il définit que les données du formulaire ne doivent pas être vérifiées lors de la soumission.

Exemple

Formulaire sans attribut novalidate :

<form action="/action_page.php" novalidate>

Essayez-le vous-même

Liste de tous les attributs <form>

Attribut Description
accept-charset Définir le codage de caractères utilisé pour soumettre le formulaire.
action Définir où envoyer les données du formulaire lors de la soumission du formulaire.
autocomplete Définir si le formulaire doit ouvrir la fonction d'auto-complétion (remplissage) ou non.
enctype Définir comment encoder les données du formulaire avant de les soumettre au serveur (uniquement pour method="post").
method Définir la méthode HTTP à utiliser pour envoyer les données du formulaire.
name Définir le nom du formulaire.
novalidate Définir que le formulaire ne doit pas être vérifié lors de la soumission.
rel Définir la relation entre la ressource de lien et le document actuel.
target Définir où afficher la réponse reçue après soumission du formulaire.