Formulaires
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
<form method="POST" action="/actions/submit.php"> ... </form>
- method correspond à la méthode HTTP qui sera utilisée lors de la soumission, et laisse le choix entre :
- GET, par défaut si non précisé ⇒ envoi en query string dans l'url
- POST, envoi dans le body de la requête
- action permet de spécifier la ressource côté serveur qui recevra la requête et effectuera son traitement.
Label
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.
Fieldset
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>
|
Champs
Input
Ce sont les champs de saisie, dont le plus commun est le champ de type text :
Propriétés communes
| 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 |
Contrôles natifs
| 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"> |
Extensions HTML5
| 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"> |
Autres champs
| 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> | |
jcheron