Le tag <form> est utilisé pour créer un formulaire sur une page Web. La tâche principale du formulaire HTML consiste à recevoir des informations de l'utilisateur et à les envoyer au serveur pour traitement.

Pour envoyer des informations au serveur, on utilise le bouton submit. Si ce bouton n'est pas disponible, le formulaire peut être envoyé au serveur en appuyant sur la touche Enter.

Syntaxe

L’élément <form>est apparié, donc le contenu est placé entre le tag ouvrant (<form>) et le tag fermant (</form>).

L’élément <form> contient d’autres tags HTML, qui définissent comment saisir des données.

  • Tag <input>-spécifie le champ personnalisé pour la saisie d’informations.
  • Tag <textarea> - spécifie le champ de formulaire pour créer une zone de saisie multi-lignes.
  • Tag <button> -utilisé pour placer le bouton dedans le formulaire.
  • Tag <select> - définit le contrôle pour créer une liste déroulante.
  • Tag <option> - définit les points de la liste déroulante définie par le tag <select>.
  • Tag <optgroup> - utilisé pour regrouper les données liée dans la liste déroulante, définie par le tag <form>.
  • Tag <label> - définit le libellée pour l’élément <input>.
  • Tag <legend>- définit le titre pour l’élément <fieldset>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <form action="server-script-url-here" method="GET or POST" >
      <label for="fname">Prénom</label>
      <input type="text" name="FirstName" id="fname" value="Mary"/><br/><br/>
      <label for="lname">Nom</label>
      <input type="text" name="LastName"id="lname" value="Thomson"/><br/><br/>
      <input type="submit" value="Envoyer"/>
    </form>
  </body>
</html>

Résultat

Formulaire

Attributs

Attribut Valeur Description
accept file_type Définit une liste de types de fichiers séparés par des virgules que le serveur accepte (la liste peut être représentée par le téléchargement de fichiers).
Non supporté en HTML5.
accept-charset character_set Définit l'encodage, en que le serveur peut recevoir et traiter des données.
action URL Spécifie l'adresse où les données sont envoyées à partir du formulaire rempli et où elles seront traitées.
autocomplete on
off
Active / désactive les champs de formulaire à remplir automatiquement. La valeur par défaut est activée.
enctype application/x-www-form-urlencoded multipart/form-data text/plain Spécifie comment encoder les données de formulaire lors de leur envoi. (La valeur par défaut est application / x-www-form-urlencoded). (Utilisé uniquement avec la méthode POST).
method
Spécifie La méthode HTTP de l’envoi des données du formulaire. (on utilise par défaut la méthode GET)
get - transfère les données du formulaire dans la barre d'adresse ("nom = valeur"), qui sont ajoutées à l'URL de la page après le point d'interrogation et sont séparées par une esperluette (&). (http://example.ru/doc/?name=Ivan&password=vanya)
post - le navigateur se connecte au serveur et envoie les données à traiter.
name text Spécifie le nom du formulaire.
novalidate novalidate Définit que les données saisies dans le formulaire ne seront pas vérifiées avant l'envoi.
target
Spécifie, où afficher la réponse, reçue après l’envoi du formulaiire.
_blank -afficher dans la nouvelle fenêtre.
_self -afficher dans la fenêtre courante.
_parent - afficher dans le cadre parental.
_top - ouvrir en plein largeur de la fenêtre.
framename - ouvrir en iframe (le nom doit être affiché en tant que la valeur).

Le tag <form> supporte également les Attributs globaux et les Attributs d'événements.

Support de Navigateurs

chrome edge firefox safari opera

Pratiquez vos connaissances

Quels sont les attributs qui peuvent être utilisés avec la balise <form> en HTML ?
Trouvez-vous cela utile?