Ils permettent à l'utilisateur de faire des choix, puis de les envoyer vers le serveur.
Ils nécessitent donc d'utiliser une technologie backend.
<form method="POST" action="/actions/submit.php"> ... </form>
Les labels sont les étiquettes donnant une indication textuelle sur un champ, et permettant d'y accéder (par un click) :
<label for="nom">Votre nom :</label> <input type="text" id="nom" placeholder="Entrez votre nom"> |
L'attribut for du label doit correspondre à l'id du champ relatif.
Les fieldsets permettent de regrouper visuellement un ensemble de champs dans une zone, la balise legend lui attribue un titre :
<fieldset>
<legend>Connexion</legend>
<label for="login">Login :</label>
<input type="text" id="login" placeholder="Entrez votre login">
<label for="pwd">Mot de passe :</label>
<input type="password" id="pwd" placeholder="Entrez votre mot de passe">
</fieldset>
|
Ce sont les champs de saisie, dont le plus commun est le champ de type text :
| Propriété | Description |
|---|---|
| id | Identifiant, utilisé côté client |
| name | Nom, utilisé côté serveur pour la récupération des données |
| value | Valeur, valeur à l'initialisation |
| placeholder | Contenu d'aide à la saisie affiché |
| type | Pour un input, défini le type du champ : text par défaut |
| autofocus | Permet de donner le focus à l'un des champs |
| disabled | Désactive le champ |
| form | Permet de spécifier l'id de la form associée si le champ n'est pas un enfant DOM de la form |
| Type | Définition | Résultat |
|---|---|---|
| texte | <input type="text" placeholder="Saisir votre nom"> | |
| Nombre | <input type="number" value="2" min="0" max="5"> | |
| Mot de passe | <input type="password"> | |
| Champ caché | <input type="hidden" value="12352"> | Ne se voit pas... |
| Case à cocher | <input type="checkbox" checked> | |
| Bouton radio | <input type="radio" name="radio"> | |
| Fichier | <input type="file"> | |
| Reset | <input type="reset" value="Reset"> | |
| Bouton | <input type="button" value="Afficher"> | |
| Submit | <input type="submit" value="Valider"> |
| Type | Définition | Résultat |
|---|---|---|
<input type="email" value="mail@provider.com"> | ||
| Téléphone | <input type="tel" placeholder="Téléphone ?"> | |
| Recherche | <input type="search" placeholder="Rechercher..."> | |
| URL | <input type="url" id="url" name="url"> | |
| Curseur | <input type="range" min="0" max="10" step="2" value="4"> | |
| Date & heure | <input type="datetime-local" name="datetime" id="datetime"> | |
| Mois | <input type="month"> | |
| Heure | <input type="time"> | |
| Semaine | <input type="week"> | |
| Couleur | <input type="color" value="#79ACFF"> |
| Type | Définition | Résultat |
|---|---|---|
| Zone de saisie multilignes | <textarea rows="5">Valeur initiale</textarea> | |
| Liste déroulante | <select id="simple" name="simple"> <option>Banane</option> <option selected>Cerise</option> <option>Citron</option> </select> | |
| Liste standard | <select id="standard" name="standard" size="4">
<option>Banane</option>
<option selected>Cerise</option>
<option>Citron</option>
</select> | |
| Liste multiple | <select id="multi" name="multi" multiple size="3">
<option selected>Banane</option>
<option selected>Cerise</option>
<option>Citron</option>
</select> | |
| Liste avec groupes d'options | <select id="grp" name="grp" multiple size="8">
<optgroup label="fruits">
<option>Banane</option>
<option selected>Cerise</option>
<option>Citron</option>
</optgroup>
<optgroup label="legumes">
<option selected>Carotte</option>
<option>Aubergine</option>
<option>Pomme de terre</option>
</optgroup>
</select> | |
| Autocomplétion | <label for="monFruit">Quel est votre fruit préféré ?</label> <input type="text" name="monFruit" id="monFruit" list="fruits-list"> <datalist id="fruits-list"> <option>Pomme</option> <option>Banane</option> <option>Cassis</option> <option>Myrtille</option> <option>Citron</option> <option>Litchi</option> <option>Pêche</option> <option>Poire</option> </datalist> | |
| Progressbar | <progress max="100" value="75">75/100</progress> | |
| Jauge | <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter> | |