32. Entrées de formulaire avancées (Date, Range, Color)

Le HTML5 a introduit des types d'entrée spécialisés qui offrent des fonctionnalités améliorées et des contrôles d'interface utilisateur natifs, éliminant ainsi le besoin de widgets JavaScript complexes.

32.1 Entrée de date (type="date")

Affiche un widget de sélection de date, facilitant le choix d'une date par les utilisateurs.

html <label for="dob">Date de naissance :</label> <input type="date" id="dob" name="birth_date">

32.2 Entrée de curseur (type="range")

Affiche un contrôle de curseur. Nécessite les attributs min, max et optionnellement step.

html <label for="volume">Volume :</label> <input type="range" id="volume" name="volume_level" min="0" max="100" value="50">

32.3 Sélecteur de couleur (type="color")

Affiche un widget sélecteur de couleur natif.

html <label for="bgcolor">Choisissez une couleur d'arrière-plan :</label> <input type="color" id="bgcolor" name="preferred_color">

32.4 Entrée de nombre (type="number")

Force l'utilisateur à saisir des données numériques et fournit souvent de petites flèches d'incrémentation/décrémentation.

html <label for="quantity">Quantité :</label> <input type="number" id="quantity" name="item_quantity" min="1" max="10">