Formations aurelearn

La balise input

Cette balise permet d’insérer un champ de formulaire d’une multitude de types différents. Vous avez ici un aperçu de l’ensemble des types disponibles pour cette balise.

input[type="text"]

source ↗

Permet d’afficher un champ basique, destiné à être rempli avec seulement quelques mots.

index.html

<form>
<label for="firtsname">Prénom</label>
<input type="text" name="firstname" id="firstname" value="John" />
</form>

input[type="email"]

source ↗

Permet d’afficher un champ destiné à être rempli avec une adresse mail, dont la forme est validée côté navigateur.

index.html

<form>
<label for="email">Prénom</label>
<input type="email" name="email" id="email" value="john.doe@email.com" />
</form>

input[type="tel"]

source ↗

Permet d’afficher un champ destiné à être rempli avec un numéro de téléphone, dont la forme est validée côté navigateur.

index.html

<form>
<label for="phone">Prénom</label>
<input type="tel" name="phone" id="phone" value="+330123456789" />
</form>

input[type="radio"]

source ↗

Permet d’afficher un choix à choix multiples, mais avec seulement une réponse possible (contrairement à une checkbox). Une fois qu’une réponse est sélectionnée, il est impossible de revenir à l’état initial du champ.

index.html

<form>
<label><input type="radio" name="fruit" value="Fraise" />Fraise</label>
<label><input type="radio" name="fruit" value="Framboise" />Framboise</label>
<label><input type="radio" name="fruit" value="Raisin" />Raisin</label>
</form>

input[type="checkbox"]

source ↗

Permet d’afficher une cache à cocher qui peut être cochée ou non. Sa spécificité est, lorsque l’attribut name est partagé, de permettre une réponse multiple.

index.html

<form>
<label><input type="checkbox" name="fruits" value="Banane" />Banane</label>
<label><input type="checkbox" name="fruits" value="Pomme" />Pomme</label>
<label><input type="checkbox" name="fruits" value="Orange" />Orange</label>
<label><input type="checkbox" name="fruits" value="Citron" />Citron</label>
</form>

input[type="color"]

source ↗

Affiche un sélecteur de couleur, l’UI dépendant du navigateur utilisé. La référence de la couleur sera toujours en hexadécimal (#123456).

index.html

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

input[type="date"]

source ↗

Affiche un sélecteur de date, l’UI dépendant du navigateur utilisé. Ce champ ne prend pas en charge la gestion des heures.

index.html

<form>
<label for="date">Date</label>
<input type="date" name="date" id="date" />
</form>

Vous pouvez facilement récupérer la valeur de ce champ sous forme de timestamp avec l’attribut .valueAsNumber.

input[type="time"]

source ↗

Affiche un sélecteur d’heure, l’UI dépendant du navigateur utilisé. Ce champ ne prend pas en charge la gestion des dates.

index.html

<form>
<label for="time">Heure</label>
<input type="time" name="time" id="time" />
</form>

input[type="datetime-local"]

source ↗

Affiche un sélecteur complet de date et d’heure, l’UI dépendant du navigateur utilisé. Pratique si vous voulez gérer des créneaux (date et heure) dans un même champ.

index.html

<form>
<label for="datetime_local">Date et Heure</label>
<input type="datetime-local" name="datetime_local" id="datetime_local" />
</form>

input[type="number"]

source ↗

Affiche un sélecteur de nombre, qu’il soit entier ou flottant.

index.html

<form>
<label for="number">Nombre</label>
<input type="number" name="number" id="number" />
</form>

Vous pouvez facilement récupérer la valeur de ce champ sous forme de timestamp avec l’attribut .valueAsNumber.

input[type="file"]

source ↗

Permet d’afficher un sélecteur de fichiers, avec la possibilité d’accepter ou non plusieurs fichiers en même temps. Ce champ est un des plus difficiles à styliser sans utiliser de JS.

index.html

<form>
<label for="file">Fichier</label>
<input type="file" name="file" id="file" />
</form>

input[type="password"]

source ↗

Affiche un champ destiné à écrire un mot de passe, permettant de ne pas divulguer l’information sur l’écran de l’utilisateur.

index.html

<form>
<label for="password">Mot de passe</label>
<input type="password" name="password" id="password" />
</form>

input[type="search"]

source ↗

Affiche un champ destiné à recevoir une reqête de recherche. Ce champ affiche nativement une croix à droite du champ pour le vider simplement.

index.html

<form>
<label for="search">Recherche</label>
<input type="search" name="search" id="search" />
</form>

input[type="url"]

source ↗

Affiche un champ destiné à recevoir une URL. Le format de la valeur du champ est validé par le navigateur.

index.html

<form>
<label for="url">URL</label>
<input type="url" name="url" id="url" />
</form>

© 2023 • Aurélien Devaux