4/ HTML: Les formulaires

Un champ qui permet de saisir une adresse électronique, il ressemble à un champ de type text, mais possède des fonctionnalités de validation et l'adaptation du clavier pour les navigateurs et appareils qui ont des claviers dynamiques.

<label for="email">Email: </label>

<input type="email"  
    name="email" 
    id="email"
    placeholder="exemple@exemple.com" />

Resultat:

Un champ texte sur une seule ligne dont la valeur est masquée et qui affichera une alerte si le site n'est pas sécurisé.

<label for="password">Mot de passe: </label>

<input type="password"  
    name="password" 
    id="password"
    placeholder="Entrez un mot de passe" />

Resultat:

Un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année mais sans heure).

Cela ouvre un sélecteur de date ou des roues numériques pour la sélection du jour/mois/année dans les navigateurs qui le prennent en charge.

<label for="password">Date: </label>

<input type="date"  
    name="date" 
    id="date"/>

Resultat:

Une case à cocher qui permet de sélectionner/désélectionner une valeur.

<fieldset>
    <legend>Sélectionnez des cours:</legend>

    <input type="checkbox" id="html" name="html" value="html" checked/>
    <label for="html">HTML</label>

    <br/>

    <input type="checkbox" id="css" name="css" value="css"/>
    <label for="css">CSS</label>
        
    <br/>
        
    <input type="checkbox" id="javascript" name="javascript" value="javascript"/>
    <label for="javascript">Javascript</label>
</fieldset>

Resultat:

• checked: Un attribut booléen qui indique si la case est cochée. Cet attribut n'indique pas si la case est actuellement cochée : si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification.

  À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut value qui est envoyé.

• value: L'attribut value est partagé par l'ensemble des éléments <input> mais il a un rôle spécifique pour les champs de type checkbox:

  lorsqu'un formulaire est envoyé, seules les cases à cocher qui sont cochées sont envoyées. Si l'attribut value n'est pas renseigné, ce sera la chaîne de caractères "on" qui sera envoyée par défaut.

Les éléments <input> dont l'attribut type vaut radio sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur.

Les « boutons radio » sont représentés par des cercles remplis lorsqu'ils sont sélectionnés.

<fieldset>
    <legend>Sélectionnez votre cours préféré:</legend>

    <input type="radio" id="html" name="cours" value="html" />
    <label for="html">HTML</label>

    <br/>

    <input type="radio" id="css" name="cours" value="css"/>
    <label for="css">CSS</label>
        
    <br/>
        
    <input type="radio" id="javascript" name="cours" value="javascript"/>
    <label for="javascript">Javascript</label>
</fieldset>

Resultat:

Il est possible d'avoir autant de groupes que nécessaire, il suffit que chaque groupe ait un nom (l'attribut name) unique.

Lorsqu'on envoie le formulaire précédent avec une option sélectionnée, les données du formulaire contiendront une valeur sous la forme cours=valeur.

Les éléments <input> dont l'attribut type vaut "file" permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les uploader vers un serveur via un formulaire ou grâce à du code JavaScript.

<label for="avatar">Choisissez une image:</label>

<input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg">

Resultat:

• value: L'attribut contient une chaîne de caractères (DOMString) qui représente le chemin du/des fichier(s) sélectionné(s).
• accept: Un ou plusieurs identifiants de type de fichier décrivants les types de fichier autorisés.

Les éléments <input> dont l'attribut type vaut range permettent à l'utilisatrice ou l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes.

<label for="volume">Volume:</label>

<input type="range"
       id="volume"
       name="volume"
       min="0" 
       max="10"/>

Resultat:

• min: La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut value) est inférieure à ce seuil, la validation échouera (en-US).
• max: La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut value) dépasse ce seuil, la validation échouera (en-US).

Autres attributs:

• step: L'attribut step est un nombre qui définit la granularité à laquelle la valeur doit obéir.