Formulaire d'éléments HTML
formulaire HTML sur une page Web permet à un utilisateur de saisir des données qui sont envoyées à un serveur pour le traitement. Les formulaires peuvent ressembler à des formulaires papier ou base de données car les internautes remplissent les formulaires à l'aide des cases à cocher, boutons radio, ou des champs de texte.
Par exemple, les formulaires peuvent être utilisés pour entrer des données d'expédition ou de carte de crédit pour commander un produit, ou peuvent être utilisés pour obtenir des résultats de recherche d'un moteur de recherche.
Ce chapitre décrit tous les éléments de formulaire HTML.
Le <input> élément
L'élément de forme la plus importante est la <input> élément.
Le <input> élément peut varier de plusieurs façons, selon le type attribut.
Tous les types d'entrée HTML sont couverts dans le chapitre suivant.
Le <select> Élément (Drop-Down List)
Le <select> élément définit une liste déroulante:
Exemple
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> Essayez vous - même » La <option> éléments définit les options pour sélectionner.
La liste affichera normalement le premier élément tel que sélectionné.
Vous pouvez ajouter un attribut sélectionné pour définir une option prédéfinie.
Le <textarea> Element
Le <textarea> élément définit un champ de saisie à plusieurs lignes ( a text area ) :
Exemple
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea> Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
Le <button> Element
Le <button> élément définit un bouton cliquable:
Exemple
<button type="button" onclick="alert('Hello World!')">Click Me!</button> Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
Forme HTML5 éléments
HTML5 ajoute les éléments de forme suivantes:
- <datalist>
- <keygen>
- <output>
Par défaut, les navigateurs ne présentent pas des éléments inconnus. De nouveaux éléments ne seront pas détruire votre page.
HTML5 <datalist> Element
Le <datalist> élément spécifie une liste d'options prédéfinies pour un <input> élément.
Les utilisateurs verront une liste déroulante des options prédéfinies comme ils les données d'entrée.
La list attribut de la <input> élément, doit se référer à l' id attribut du <datalist> élément.
Exemple
Un <input> élément avec des valeurs prédéfinies dans une <datalist> :
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form> Essayez vous - même » HTML5 <keygen> Element
Le but du <keygen> élément est de fournir un moyen sécurisé pour authentifier les utilisateurs.
Le <keygen> élément spécifie un champ de générateur de clés d'un formulaire.
Lorsque le formulaire est soumis, deux clés sont générées, l'un privé et un public.
La clé privée est stockée localement, et la clé publique est envoyée au serveur.
La clé publique peut être utilisée pour générer un certificat client pour authentifier l'utilisateur à l'avenir.
Exemple
Une forme avec un champ de keygen:
<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form> Essayez vous - même » HTML5 <output> Element
Le <output> élément représente le résultat d'un calcul (tel que celui réalisé par un script).
Exemple
Effectuer un calcul et afficher le résultat dans une <output> élément:
<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form> Essayez vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 »
Formulaire d'éléments HTML
= New en HTML5.
| Marque | La description |
|---|---|
| <form> | Définit un formulaire HTML pour l'entrée utilisateur |
| <input> | Définit une commande d'entrée |
| <textarea> | Définit un contrôle d'entrée multiligne (text area) |
| <label> | Définit une étiquette pour un <input> élément |
| <fieldset> | Groupes éléments liés sous une forme |
| <legend> | Définit une légende pour un <fieldset> élément |
| <select> | Définit une liste déroulante |
| <optgroup> | Définit un groupe d'options connexes dans une liste déroulante |
| <option> | Définit une option dans une liste déroulante |
| <button> | Définit un bouton cliquable |
| <datalist> | Indique une liste d'options prédéfinies pour les contrôles d'entrée |
| <keygen> | Définit un champ de générateur de clé à paire (for forms) les (for forms) |
| <output> | Définit le résultat d'un calcul |