Introduction aux contrôles de formulaire HTML
HTML est le langage de balisage pour la création de pages Web. Il définit la structure et le comportement de la page Web. HTML se compose de balises et d'éléments qui aident à structurer les pages Web. Ces éléments peuvent être regroupés dans un formulaire pour collecter les données d'un utilisateur de manière conviviale. Cependant, notez que HTML est un protocole sans état qui signifie qu'il ne peut rien stocker et que vous perdrez les données lors d'une actualisation de page.
Contrôle de formulaire HTML
Il existe différents types de contrôle de formulaire qui sont définis dans le code HTML, ces contrôles sont responsables d'accepter l'entrée utilisateur d'une manière spécifiée. Jetons un coup d'œil aux différents types de contrôles de formulaire disponibles en HTML.
1) Contrôle de saisie de texte
Les contrôles de saisie de texte sont utilisés pour collecter des données utilisateur sous forme de texte libre. Sur la page Web, il formera une boîte rectangulaire dans laquelle les utilisateurs pourront saisir les données.
Il existe différents types de contrôles de saisie de texte qui peuvent être utilisés dans les formulaires HTML. Jetons un coup d'œil aux différents types de contrôles de texte d'entrée.
- Contrôle de saisie de texte sur une seule ligne
Cela permet à l'utilisateur d'entrer une seule ligne de données. Un exemple typique de ces contrôles de saisie de texte est la saisie du nom, du champ de recherche, de la ville, etc.
- Contrôle de texte d'entrée multiligne
Ce type de contrôle d'entrée permet à l'utilisateur d'entrer des données de plusieurs lignes. L'utilisation typique de ces contrôles d'entrée concerne les commentaires, les adresses, la description, etc.
Ici, les lignes indiquent le nombre de lignes dans la zone de texte et col indique le nombre de colonnes.
- Contrôle de saisie de mot de passe
Comme son nom l'indique, cela est généralement utilisé pour le champ de mot de passe. Cela fonctionne de la même manière que le champ de texte d'entrée, mais le texte est masqué pour des raisons de sécurité.
2) Type d'entrée Soumettre
Lorsque le type d'entrée est de soumission, il exécute l'action définie dans l'action de formulaire et envoie les données du formulaire au serveur.
Ici, les valeurs de nom d'utilisateur et de mot de passe seront soumises au serveur sur l'événement de clic de bouton du bouton Soumettre. L'action dans le formulaire est la méthode serveur qui accepte l'entrée.
3) Type d'entrée Radio
Les boutons radio sont utilisés lorsque vous vous attendez à ce que les utilisateurs remplissent des données sous forme de valeur booléenne ou que vous n'attendez qu'une seule entrée comme vraie parmi plusieurs options. Certains cas d'utilisation courants des boutons radio sont la détermination du sexe, le type d'employé (régulier / temporaire), etc.
4) Case à cocher Type d'entrée
Une case à cocher permet à l'utilisateur de sélectionner toutes les informations qui sont vraies dans son cas. C'est un moyen très pratique d'accepter les données lorsque l'entrée possible est déjà connue.
Par exemple, si vous souhaitez collecter le type d'assurance qu'une personne détient, vous pouvez facilement le faire avec les cases à cocher car les options seraient limitées.
5) Liste déroulante Type d'entrée
La liste déroulante permet à l'utilisateur de sélectionner une option parmi plusieurs options possibles. C'est un moyen très convivial d'obtenir les détails de l'utilisateur car il fournit une liste exhaustive des options possibles qui aide l'utilisateur à identifier l'option qui lui convient le mieux.
Par exemple, une liste déroulante pour répertorier la ville à laquelle un employé peut appartenir
6) Type d'entrée Optgroup
Optgroup fonctionne de la même manière que dans la liste déroulante, la seule différence est que l'optgroup vous permet de regrouper logiquement certaines options sous un même parapluie. Il aide l'utilisateur à identifier rapidement l'option pertinente à l'aide de l'étiquette optgroup.
Par exemple, des listes déroulantes pour répertorier les villes des différents États de l'Inde regroupées par États.
7) Fieldset
Fieldset est une autre balise utile dans le formulaire Html qui permet au développeur de regrouper logiquement certains contrôles sous une légende, cela aide le développeur à donner à l'utilisateur une instruction claire sur ce à quoi s'attendre dans cette section.
Par exemple, fieldset pour la page de connexion
8) Balise de sortie HTML
Cette balise de sortie est introduite dans HTML5. Il vous permet d'afficher instantanément la sortie d'un calcul. Ceci est très utile lorsque l'utilisateur doit faire un calcul instantanément et voir les résultats. Un exemple typique de tels cas est lorsque l'utilisateur souhaite vérifier la somme de tous les articles présents dans le panier.
Dans l'exemple ci-dessus, nous avons défini la fourchette de prix de l'article comme 0 à 100 et peut être modifiée lors de l'exécution, l'autre zone de texte qui a une valeur 12 est la taxe prélevée sur cet article, elle peut également être modifiée lors de l'exécution. Le résultat de sortie 58 est la somme des deux valeurs.
Remarque: cette balise n'est pas prise en charge sur Edge 12 ou Internet Explorer d'une version antérieure.
9) Type d'entrée Couleur
Il est souvent nécessaire dans le formulaire d'afficher simplement la couleur au lieu de tout texte. La couleur du type d'entrée dans HTML 5 vous permettra de le faire. Il montre la couleur que vous souhaitez afficher dans le formulaire. Le scénario type dans lequel il est utilisé consiste à afficher l'état d'un projet ou d'une phase.
Remarque : la couleur n'est pas prise en charge dans certaines versions d'Internet Explorer et Edge.
10) Type d'entrée Date
La date de type d'entrée est couramment utilisée lorsqu'un champ de type de date comme entrée est attendu par l'utilisateur, il peut s'agir d'une date de naissance, d'une date d'embauche, d'une date de fin, etc. Il est introduit en HTML 5 et le format de la date varie un peu avec le changement de navigateur.
Conclusion
- Avec l'introduction de HTML 5, le nombre de contrôles HTML pris en charge a considérablement augmenté. Ces contrôles de formulaire HTML peuvent recevoir différents effets et couleurs à l'aide de CSS 3 et JavaScript / jQuery / Angular JS.
- Dans cet article, nous avons couvert tous les contrôles de formulaire HTML couramment utilisés. Il existe de nombreux contrôles tels que caché, réinitialisation, semaine, URL, heure, e-mail, fichier, DateTime-local, image, tel qui n'ont pas été traités dans cet article. Il est très important de vérifier la compatibilité du navigateur de ces contrôles avant de l'implémenter dans le projet car de nombreuses versions de navigateur ne prennent pas en charge les contrôles de formulaire HTML 5.
Articles recommandés
Cela a été un guide pour les contrôles de formulaire HTML. Nous discutons ici de l'introduction et des différents types de contrôle de formulaire définis dans le code HTML. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus -
- Attributs HTML
- Balises au format HTML
- Feuilles de style HTML
- Carrière en HTML
- Cadres HTML
- Blocs HTML
- Nouveaux éléments Html5
- Définir une couleur d'arrière-plan en HTML avec l'exemple