Table des matières:
Vidéo: Cours complet HTML -Créer un fichier html et visualisation sur un navigateur web 2025
La façon la plus courante d'obtenir des entrées utilisateur pour un programme JavaScript consiste à utiliser des éléments de formulaire HTML. La dernière version de HTML, HTML5, a plusieurs nouveaux éléments et attributs de formulaire.
Entrées de texte
Les entrées de texte sont le type le plus basique du champ de formulaire HTML. Ils sont utilisés pour donner à l'utilisateur du site Web une entrée vide où elle peut entrer n'importe quelle valeur. Voici un exemple du code utilisé pour créer une entrée de texte:
Voici à quoi ressemble ce champ dans un navigateur:
Texte d'espace réservé
Un texte d'espace réservé apparaît dans le champ de saisie avant qu'un utilisateur ne commence à taper. C'est utile pour indiquer à l'utilisateur ce que vous attendez d'eux.
Voici un exemple d'utilisation de texte d'espace réservé dans une entrée de texte:
Voici à quoi ressemble ce champ dans un navigateur Web.
Autofocus
Lorsque le champ de saisie est sélectionné et que vous pouvez voir votre curseur à l'intérieur, il "a la mise au point. "Si vous voulez qu'un certain champ (tel que le champ Prénom) ait un" focus "dès qu'une page web se charge, vous pouvez utiliser l'attribut autofocus. Voici à quoi cela ressemble:
Le champ de saisie e-mail ressemble à une entrée de zone de texte et fonctionne aussi comme un champ de saisie de texte dans la plupart des cas. Mais, parfois, le navigateur Web traite le champ de saisie de courrier électronique différemment d'un champ de saisie de texte. Par exemple, lorsqu'un champ de saisie d'e-mail est "en cours" sur un iPhone, un clavier spécial affiche les raccourcis de fonctionnalités pour la saisie d'adresses e-mail.
Voici un exemple d'utilisation du champ de saisie email:
Entrée curseur
Une entrée curseur est un champ de saisie qui permet à l'utilisateur de sélectionner un nombre dans une plage de nombres, en utilisant un glisser-déposer contrôle.
Voici le code pour créer un curseur:
Voici à quoi ressemble un curseur dans un navigateur Web.
Obligatoire
Si vous souhaitez forcer votre utilisateur à entrer une valeur dans un champ avant qu'il ne puisse soumettre le formulaire, HTML5 a un attribut appelé required.
Pour créer un champ de formulaire, il suffit d'ajouter le nouvel attribut dans un champ de saisie, comme ceci:
Lorsqu'un utilisateur tente de soumettre ce formulaire sans remplir le champ phoneNumber, il reçoit un message demandant Pour le remplir:
Au moment d'écrire ces lignes, tous les navigateurs Web ne prennent pas en charge l'attribut requis, mais il est pris en charge par Chrome, Firefox, Internet Explorer et Opera.
En savoir plus
Pour plus d'informations sur les éléments et les attributs et sur la façon de les utiliser en JavaScript, consultez le guide des formulaires HTML sur Mozilla Developer Network.
