Box HTML
Objectif des cases à cocher dans HTML
Les cases à cocher et les boutons radio sont tous deux utilisés pour fournir plusieurs options à choisir pour l'utilisateur. Cependant, on pourrait se demander où diffèrent ces deux éléments HTML? Eh bien, un bouton radio est toujours utilisé dans des situations où vous souhaitez restreindre l'utilisateur à choisir exactement une option et non plus que cela. D'un autre côté, une case à cocher est utilisée lorsque vous souhaitez permettre à l'utilisateur de choisir même plus d'une option. Par conséquent, chaque fois que vous souhaitez retirer le maximum de choix possibles de la liste donnée, vous utilisez toujours les cases à cocher dans HTML. Pour comprendre cette utilisation en détail, vous devrez lire la section suivante de ce tutoriel.
Code HTML pour créer des cases à cocher
Vous pouvez créer des cases à cocher dans HTML très rapidement. Tout ce que vous avez à faire est de suivre les deux exemples ci-dessous pour apprendre ce hack:
Exemple 1: récupérer l'occupation d'une personne
Nous avons déjà mentionné que les cases à cocher en HTML et toute autre langue sont toujours utilisées chaque fois que vous avez la liberté de choisir plus d'une option. Par conséquent, dans ce scénario, nous concevrons un script HTML pour récupérer l'occupation d'une personne. Maintenant, cette personne peut être un «élève», un «enseignant», soit les deux. Dans le cas de la dernière option, nous voulons donner à la personne la liberté de sélectionner les deux cases à la fois. Pour concevoir de telles fonctionnalités, nous avons conçu le script HTML suivant:
Après avoir utilisé l'instruction de déclaration de type de document, nous avons utilisé les balises «» et «» afin que nous puissions écrire notre script HTML. Ensuite, nous avons utilisé le «
”Indicateur d'en-tête pour spécifier le titre de notre page Web. Ceci est suivi par l'indicateur «Type d'entrée» que nous avons utilisé pour informer que nous allons créer une case à cocher dans HTML. Ensuite, nous avons créé un «ID» et un «nom» pour cette case à cocher. Nous avons également attribué une étiquette à cette case à cocher. Après cela, nous avons utilisé la balise «étiquette» pour mentionner l'étiquette contre chacune de nos cases HTML. De la même manière, nous avons conçu l'autre case à cocher. Après cela, nous avons également créé un bouton «soumettre» juste pour faire l'apparence de notre page Web Nice.
Après avoir enregistré et exécuté ce script HTML avec Google Chrome, la page Web affichée dans l'image ci-dessous est apparue sur notre navigateur:
Maintenant, vous êtes autorisé à sélectionner autant d'options dans cette page Web que vous le souhaitez. Dans l'image suivante, nous n'avons sélectionné qu'une seule des deux cases.
Dans l'image indiquée ci-dessous, nous avons sélectionné les deux cases.
Pour améliorer les fonctionnalités de ce script HTML, vous pouvez même concevoir une page d'action en utilisant PHP afin que lorsque vous appuyez sur le bouton «Soumettre» après avoir sélectionné la case à cocher souhaitée, une action pertinente est prise contre elle.
Exemple 2: Sélection de sa saveur préférée de Milkshake:
Parfois, vous pouvez même choisir de concevoir une page Web très simple tout en utilisant les cases HTML sans boutons d'action. Par exemple, vous voudrez peut-être simplement présenter quelques cases à l'utilisateur pour avoir choisi sa saveur préférée de Milkshake. Cependant, vous ne voulez pas qu'il fasse quoi que ce soit plus après avoir fait cette sélection. De tels cas sont très rares. Normalement, vous demandez à l'utilisateur de prendre des mesures après avoir sélectionné, comme cliquer sur un bouton. Néanmoins, nous aimerions toujours vous montrer un tel exemple. Pour illustrer cet exemple, nous avons conçu le script HTML suivant pour vous:
Dans ce script HTML, les éléments essentiels du script sont: la déclaration de type de document, les balises «» et «» sont les mêmes et leurs objectifs sont également exactement les mêmes que nous avons décrit dans notre premier exemple. Ensuite, nous avons utilisé une étiquette de paragraphe pour afficher un message à l'utilisateur lui demandant de choisir sa saveur préférée de Milkshake. Un utilisateur peut facilement choisir plus d'une saveur de son choix s'il souhaite. Ensuite, nous avons défini les étiquettes de ces cases à cocher suivie de la déclaration respective des cases à cocher. Vous devez remarquer ici que cette fois, nous n'avons pas utilisé la balise HTML "Label" pour spécifier l'étiquette. Nous venons plutôt de définir les étiquettes telles qu'elles sont. Cela signifie que c'est une autre façon dont vous pouvez créer des étiquettes pour vos cases à cocher juste pour simplifier votre script HTML. Après avoir complètement écrit ce script, nous avons simplement enregistré ce fichier de blocs-notes avec le «.Extension html ”afin qu'il puisse être exécuté facilement avec n'importe quel navigateur de notre choix.
Nous avons exécuté ce script HTML tout en utilisant Google Chrome et il a affiché la page Web affichée dans l'image ci-dessous sur notre navigateur:
Maintenant, vous pouvez facilement sélectionner autant de ces cases que vous le souhaitez. Ceci est montré dans l'image suivante:
Conclusion
Avec ce tutoriel, nous voulions partager avec vous l'utilisation des cases HTML de la manière la plus simple. Pour ce faire, nous vous avons d'abord présenté le but de base de cet élément HTML. Après cela, nous vous avons expliqué deux exemples différents qui ont utilisé cet élément HTML. En passant par ces explications, vous pouvez facilement commencer à utiliser les cases HTML chaque fois que vous souhaitez offrir à vos utilisateurs la flexibilité de choisir plus d'une option dans une liste donnée d'options.