Bienvenue à ce nouveau tuto 🙂 . Dans cette partie , nous allons apprendre comment ajouter des inputs avancés dans un formulaire HTML.

accès rapide

• La démo
• Input : Date
• Input : Time
• Input : Datetime-local
• Input : Month
• Input : Week
• Input : Range
• Input : Color
• Input : File

La démo

mettre ici la vidéo de la démonstration

Input : Date

La valeur date va être utilisée pour créer des champs de formulaire devant recevoir une date.

Ci-dessous un exemple contenant le type Date :

 <form>
    <label>Date de naissance :</label> 
    <input  type="date" name="date">
 </form>

Input : Time

Ce type de champ permet de renseigner une heure, avec plus ou moins de précision.

Ci-dessous un exemple contenant le type Time:

<form>
    <label>heure de réveil :</label> 
    <input  type="time" name="time">
   </form>

Input : Datetime-local

Ce type de champ permet de renseigner la date et l’heure.

Ci-dessous un exemple contenant le type Datetime-local :

  <form>
    <label>Date et heure :</label> 
    <input  type="datetime-local" name="d-r">
 </form>

Input : Month

permet de sélectionner un mois et une année.

Ci-dessous un exemple contenant le type Month :

<form>
    <label>Mois :</label> 
    <input  type="month" name="mois">
 </form>

Input : Week

Ce type de champ permet de renseigner le numéro de la semaine de l’année.

Ci-dessous un exemple contenant le type Week :

<form>
    <label>Semaine :</label> 
    <input  type="week" name="semaine">
</form>

Input : Range

Ce type de champ permet de renseigner une valeur numérique, mais avec un contrôle. L’utilisateur peut naviguer dans un intervalle défini par les attributs min et max avec un pas.

Ci-dessous un exemple contenant le type Range :

<form>
    <label>Volume:</label> 
    <input  type="range" name="volume">
</form>

Input : Color

Ce type permet de transformer le champ pour  sélectionner un code couleur à partir d’une palette. La valeur attendue est une couleur sous format héxadécimal .

Ci-dessous un exemple contenant le type Color :

<form>
    <label>Couleur:</label> 
    <input  type="color" name="color">
</form>

Input : File

Le <input type= »file »> spécifie un contrôle de sélection de fichier .

Cet élément est rendu avec un bouton et une étiquette , bien que dans chaque navigateur, il semble différent.

En cliquant sur le bouton, une boîte de dialogue de sélection de fichier s’ouvre et l’étiquette affichera le(s) nom(s) de fichier sélectionné(s).

Dans le cas où nous voulons sélectionner plusieurs fichiers dans la boîte de dialogue, nous pouvons utiliser l’attribut multiple.

Ci-dessous un exemple contenant le type file :

<form>
    <label>Importer:</label> 
    <input  type="file" name="file" multiple>
</form>

Dans cette partie , nous avons appris comment ajouter des inputs avancés dans un formulaire HTML.

Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons commencer créer insérer des zones de texte dans un formulaire HTML.