La balise <form> élément
Les formulaires HTML sont utilisés pour collecter les entrées utilisateur.
Le <form> élément définit un formulaire HTML:
<form>
.
Les formulaires HTML contiennent des éléments de formulaire. Les éléments de formulaire sont différents types d'éléments d'entrée, des cases à cocher, boutons radio, boutons d'envoi, et plus encore.
Le <input> élément
Le <input> élément est l'élément de forme la plus importante.
Le <input> élément a beaucoup de variations, en fonction du type attribut.
Voici les types utilisés dans ce chapitre:
Type La description text Définit l'entrée normale du texte radio Définit l' entrée bouton radio (for selecting one of many choices) l' (for selecting one of many choices) submit Définit un bouton d' envoi (for submitting the form)
Vous apprendrez beaucoup plus sur les types d'entrée plus loin dans ce tutoriel.
Saisie de texte
<input type="text"> définit un champ d'entrée d' une ligne de saisie de texte:
Exemple
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Essayez vous - même » Voici comment cela ressemblera dans un navigateur:
Prénom:
Nom de famille:
Note: Le formulaire lui - même est pas visible. Notez également que la largeur par défaut d'un champ de texte est de 20 caractères.
Radio Bouton d' entrée
<input type="radio"> définit un radio de radio bouton.
Radio boutons permettent un utilisateur de sélectionner un d'un nombre limité de choix:
Exemple
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
Mâle
Femelle
Autre
Le bouton Soumettre
<input type="submit"> définit un bouton pour soumettre un formulaire pour un formulaire de gestionnaire.
La forme gestionnaire est typiquement une page de serveur avec un script pour traiter des données d'entrée.
La forme gestionnaire est spécifiée dans le formulaire l' action de l' attribut:
Exemple
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
Prénom:
Nom de famille:
L' Action Attribute
L' ' action attribut définit l'action à exécuter lorsque le formulaire est soumis.
La façon courante de soumettre un formulaire à un serveur, est à l'aide d'un bouton d'envoi.
Normalement, le formulaire est soumis à une page Web sur un serveur web.
Dans l'exemple ci-dessus, un script côté serveur est spécifié pour gérer le formulaire soumis:
<form action="action_page.php ">
Si l' action attribut est omis, l'action est définie sur la page en cours.
La Method Attribut
La method attribut spécifie la méthode HTTP ( GET ou POST ) à utiliser lors de la présentation des formulaires:
<form action="action_page.php" method="get" > ou:
<form action="action_page.php" method="post" >
Quand utiliser GET ?
Vous pouvez utiliser GET (the default method) :
Si la soumission du formulaire est passif (like a search engine query) de (like a search engine query) , et sans informations sensibles.
Lorsque vous utilisez GET , les données du formulaire seront visibles dans l'adresse de la page:
action_page.php?firstname=Mickey&lastname=Mouse GET est le mieux adapté à de courtes quantités de données. Limitations de taille sont définies dans votre navigateur.
Quand utiliser POST ?
Vous devez utiliser POST :
Si la forme est mise à jour des données, ou inclut des informations sensibles (password) .
POST offre une meilleure sécurité parce que les données fournies ne sont pas visibles dans l'adresse de la page.
Le Name d' attribut
Pour être correctement soumis, chaque champ d'entrée doit avoir un name attribut.
Cet exemple ne soumettra le "Last name" champ de saisie:
Exemple
<form action="action_page.php">
First name:<br>
<input type="text"
value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Essayez vous - même »
Formulaire de regroupement de données avec <fieldset>
Les <fieldset> groupes d'éléments de données associés dans une forme.
Le <legend> élément définit une légende pour la <fieldset> élément.
Exemple
<form action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
HTML Form Attributs
Un HTML <form> élément, avec tous les attributs possibles définis, ressemblera à ceci:
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
Testez-vous avec des exercices! Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»
Voici la liste des <form> Attributs:
Attribut La description accept-charset Indique le charset utilisé sous la forme présentée (par défaut: la page charset). action Indique une adresse (url) où soumettre le formulaire (par défaut: la page de soumission). autocomplete Indique si le navigateur doit compléter automatiquement le formulaire (default: on) . enctype Indique le codage des données fournies (default: is url-encoded) . method Spécifie la méthode HTTP utilisée lors de l' envoi du formulaire (default: GET) . name Indique un nom utilisé pour identifier la forme (pour l'utilisation DOM: document.forms.name). novalidate Indique que le navigateur ne doit pas valider le formulaire. target Indique la cible de l'adresse dans l' une action attribut (par défaut: _self).
Vous en apprendrez plus sur les attributs dans les chapitres suivants.
autres exemples
Envoyer un e-mail à partir d' un formulaire
Comment envoyer un courrier électronique à partir d'un formulaire.