CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML 5 et CSS3 - Tutoriel vidéo avec un expert du Web

Apprenez à créer des formulaires HTML avancés

Retour à la formation
Chapitre 6 Leçon 3
Précédent
Suivant

Découvrez les nouveaux types d'input en HTML pour créer des formulaires plus interactifs et accessibles.

Détails de la leçon

Description de la leçon

Les balises de création de formulaire ont évolué, notamment la balise input qui bénéficie désormais de nombreux nouveaux types. Voici une démonstration pratique des différents types de cette balise :

  • tel : Pour les numéros de téléphone, idéal pour les smartphones.
  • search : Permet de créer un champ de recherche.
  • url : Destiné à l'insertion d'une URL.
  • email : Permet de saisir une adresse email.
  • datetime, date, month, week : Divers champs pour sélectionner des dates.
  • time : Pour l'heure précise.
  • datetime-local : Permet de choisir une date et une heure locale.
  • number : Pour insérer des chiffres avec des incréments.
  • range : Affiche un curseur de sélection de valeurs.
  • color : Permet de choisir une couleur.
Les compatibilités varient selon les navigateurs, par exemple, Opera 10 accepte une large gamme de types, tandis que Firefox est plus limité. Nous illustrerons ci-dessous comment créer ces balises dans un formulaire HTML d'une manière structurée et accessible.

Objectifs de cette leçon

A la fin de cette vidéo, vous serez en mesure de créer des formulaires HTML utilisant divers types de balises input pour une meilleure expérience utilisateur.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé de connaitre les bases du HTML et des formulaires web.

Métiers concernés

Les compétences acquises dans cette vidéo sont particulièrement utiles pour les développeurs front-end, les designer UX/UI et les spécialistes en accessibilité web.

Alternatives et ressources

En plus des balises HTML, des frameworks comme Bootstrap ou des générateurs de formulaires tels que Google Forms peuvent être utilisés pour créer des formulaires complexes sans écrire de code.

Questions & Réponses

Le type de balise input à utiliser pour un numéro de téléphone est tel. Cela permet d'afficher un clavier numérique approprié sur les smartphones.
Les navigateurs comme Opera et Safari supportent le type input range, offrant un curseur pour la sélection de valeurs.
Les balises label associées aux balises input améliorent l'accessibilité en rendant les champs de formulaire plus faciles à identifier et à utiliser pour les personnes utilisant des lecteurs d'écran.