Zone de texte du formulaire HTML
Objectif d'une zone de texte sous forme HTML
Une zone de texte ou un champ de texte dans un formulaire HTML est utilisée pour collecter des données textuelles à lignée de l'utilisateur. Généralement, chaque fois que vous souhaitez donner à votre utilisateur la liberté d'entrer le texte en tapant plutôt qu'en le sélectionnant à partir d'une liste prédéfinie, vous utilisez toujours une zone de texte HTML ou un champ de texte. La section suivante décrira la procédure de création d'une zone de texte dans un formulaire HTML.
Création de zones de texte sous des formulaires HTML
Pour apprendre la création de zones de texte sous des formes HTML, vous pouvez considérer les deux exemples expliqués ci-dessous:
Exemple # 1: Création de zones de texte simples dans des formulaires HTML
Dans cet exemple, notre objectif est de créer des zones de texte simples dans des formulaires HTML pour collecter des informations spécifiques. Cependant, nous ne voulons pas prendre d'autres mesures après cela. Nous avons conçu le script HTML suivant pour créer des zones de texte simples dans des formulaires HTML:
Vous pouvez voir que dans ce script, nous avons d'abord fourni une rubrique pour informer l'utilisateur du but de ce script HTML. Ensuite, dans l'étiquette «formulaire» (puisque nous créons un formulaire HTML), nous avons défini trois zones de texte différentes avec des étiquettes «nom», «âge» et «sexe» pour collecter le nom, l'âge et le sexe de l'utilisateur respectivement. Toutes ces étiquettes, ainsi que les zones de texte associées, apparaîtront dans des lignes distinctes. L'utilisateur sera autorisé à saisir les informations qu'il souhaite dans ces zones de texte. Cependant, il ne pourra pas prendre d'autres mesures après avoir saisi ces informations.
Lorsque nous avons exécuté notre script HTML, la page Web qui est apparue sur notre navigateur est affichée dans l'image ci-dessous. Cette page Web contient nos trois zones de texte.
Maintenant, vous êtes libre de saisir toutes les informations aléatoires dans ces zones de texte, comme indiqué dans l'image suivante:
Exemple # 2: Création de zones de texte avec un bouton d'action dans les formulaires HTML
Dans cet exemple, nous modifierons légèrement le script HTML que nous avons créé ci-dessus. Nous voulons apporter cette modification pour introduire un bouton d'action dans notre formulaire HTML. Vous devrez consulter le script HTML ci-dessous pour saisir cette modification:
Ce script HTML est presque le même que nous avons partagé ci-dessus; Cependant, avant de fermer l'étiquette «formulaire», nous avons également créé un bouton «soumettre» dans ce formulaire afin que l'utilisateur puisse appuyer sur ce bouton après avoir entré les informations pertinentes dans le formulaire. Cependant, nous n'avons créé aucune page d'action. Par conséquent, cliquer sur ce bouton ne vous naviguera pas vers une nouvelle page.
La page Web modifiée selon ce script HTML est affichée dans l'image suivante:
Maintenant, nous allons saisir certaines informations dans chacune de ces zones de texte, comme indiqué dans l'image ci-dessous:
Après avoir saisi ces informations, lorsque nous avons appuyé sur le bouton «Soumettre», seule l'URL de notre page Web a changé, montrant le nom, l'âge et le sexe que nous venions d'entrer. Ceci est illustré dans l'image suivante. Cependant, après cela, nous avons simplement été redirigées vers un formulaire HTML vide car nous n'avons créé aucune page d'action en premier lieu.
Conclusion
Cet article a été écrit en gardant à l'esprit la nécessité d'utiliser des zones de texte sous des formulaires HTML. Par conséquent, il a d'abord expliqué l'objectif de cet élément HTML, suivi de la méthode de création de zones de texte sous forme HTML. Une fois que vous aurez appris cette méthode, ce sera un morceau de gâteau pour créer autant de zones de texte dans vos formulaires HTML au besoin.