Balise HTML <form>
La balise <form> est utilisée pour ajouter des formulaires HTML à la page web afin de recueillir les saisies de l'utilisateur. Les formulaires servent à transmettre les données soumises par l'utilisateur au serveur. Les données sont envoyées lors de l'appui sur le bouton « Soumettre ». S'il n'y a pas de tel bouton, les informations sont envoyées lorsque la touche « Entrée » est pressée.
TIP
Si les éléments individuels à l'intérieur de la balise <form> sont valides, vous pouvez utiliser la pseudo-classe CSS :valid pour styliser la balise, et la pseudo-classe :invalid dans le cas où ils ne sont pas valides.
Syntaxe
La balise <form> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<form>) et de fermeture (</form>).
L'élément <form> contient d'autres balises HTML, qui définissent la méthode de saisie des données :
- La
<input>balise définit un champ de saisie pour l'utilisateur. - La
<textarea>balise définit un champ de formulaire pour créer une zone de saisie multiligne. - La
<button>balise est utilisée pour placer un bouton à l'intérieur d'un formulaire. - La
<select>balise met en place un contrôle pour créer une liste déroulante. - La
<option>balise définit les éléments de la liste déroulante définie par la balise<select>. - La
<optgroup>balise regroupe les données connexes dans la liste déroulante définie par la balise<select>. - La
<fieldset>balise regroupe visuellement les éléments à l'intérieur du formulaire défini par la balise<form>. - La
<label>balise définit l'étiquette textuelle pour l'élément<input>. - La
<legend>balise définit l'en-tête pour l'élément<fieldset>.
Exemple de la balise HTML <form> :
Exemple de la balise HTML <form>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
<label for="lname">Surname</label>
<input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Résultat
Exemple de la balise HTML <form> avec les balises <input> et <label> :
Exemple de la balise HTML <form> avec les balises <input> et <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="Name" id="fname" value="Mary"/><br /><br />
<label for="number">Phone</label>
<input type="number" name="Phone" id="number"/><br /><br />
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" required /> <br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Exemple de la balise HTML <form> avec la balise <textarea> :
Exemple de la balise HTML <form> avec la balise <textarea> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="/form/submit" method="POST" >
<textarea rows="3" cols="30" placeholder="Type some text here"></textarea><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| accept | file_type | Spécifie une liste de types de fichiers séparés par des virgules que le serveur accepte. Pris en charge dans HTML5 pour <input type="file">. |
| accept-charset | character_set | Spécifie l'encodage dans lequel le serveur peut recevoir et traiter les données. |
| action | URL | Indique l'adresse vers laquelle les données sont envoyées et où elles seront traitées. Lors de l'utilisation de cet attribut, remplacez le "nom du script" par le nom et l'emplacement du fichier script. |
| autocomplete | on off | Active/désactive la saisie semi-automatique des champs de formulaire. La valeur par défaut est on. |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | Détermine comment les données du formulaire sont encodées lors de l'envoi. (La valeur par défaut est application/x-www-form-urlencoded). (Utilisé uniquement avec la méthode POST). |
| method | get post | Spécifie la méthode HTTP pour soumettre les données du formulaire. (la méthode par défaut est GET). Envoie 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 séparées par un esperluette (&). (http://example.ru/doc/?name=Ivan&password=vanya) - Le navigateur se connecte au serveur et envoie les données pour traitement. |
| name | text | Définit le nom du formulaire. |
| novalidate | novalidate | Indique que les données saisies dans le formulaire ne seront pas vérifiées avant l'envoi. |
| target | _blank, _self, _parent, _top, framename | Détermine où afficher la réponse reçue après la soumission du formulaire. |
La balise <form> prend également en charge les attributs globaux et les attributs d'événement.
Pratique
Parmi les méthodes suivantes, lesquelles sont utilisées pour envoyer des données de formulaire en HTML ?