Former des éléments en HTML
Les éléments de forme HTML aident à créer une forme avec diverses fonctionnalités. Un formulaire d'entrée comprend l'entrée, la sortie, le bouton, la sélection, le textarea, l'étiquette, le datalist, le champ,. Parmi ceux-ci, la balise d'entrée est l'élément le plus utilisé et est considéré comme la partie fondamentale d'une forme HTML. Tandis que d'autres éléments de forme ont leur propre fonctionnalité. Gardant à la vue des éléments de forme, cet article sert les résultats d'apprentissage suivants.
- Informations de base et utilisation de chaque élément de formulaire
- Divers exemples pour chaque élément
Former des éléments en HTML
Cette section fournit une liste de divers éléments de forme qui ont un rôle clé dans la génération de formulaires. Discutons-y un par un:
Élément d'entrée
Cet élément est considéré comme l'élément central des formulaires HTML et il est tout à fait impossible de retracer un formulaire qui ne contient aucun élément d'entrée. La fonctionnalité des éléments d'entrée dépend de l'ensemble des attributs pris en charge par eux. Par exemple, l'attribut de type définit le type (TextBox, Radio-Button, coche) du champ de saisie.
Exemple
À l'aide du code HTML, les lignes de code suivantes créent un champ de texte avec l'élément d'entrée.
À côté de l'élément d'entrée, nous avons utilisé un attribut (espace réservé) de l'élément d'entrée.
Sortir
La sortie montre que le champ de texte est créé à l'aide de l'élément d'entrée. Comme nous avons utilisé l'attribut d'espace réservé, le texte factice s'affiche également dans la zone de texte.
Étiquette d'étiquette
L'élément d'étiquette définit le but de divers éléments de forme aux utilisateurs finaux. Un élément d'étiquette peut être déclaré en utilisant la syntaxe suivante.
Comme la plupart des éléments HTML, l'élément de contenu pour l'étiquette est écrit entre les balises.
Exemple:
L'utilisation de l'élément d'étiquette est élaborée en utilisant le code suivant.
Une étiquette est créée pour l'associer à un champ de texte qui tire le nom de l'utilisateur. Le pour l'attribut (de l'élément d'étiquette) et ID (d'élément d'entrée) Doit avoir les mêmes valeurs pour pouvoir se lier ensemble.
Sortir
La sortie contient une étiquette qui vous ordonne de saisir votre nom dans la zone de texte.
Sélectionner l'élément
L'élément sélectionné crée une liste déroulante de diverses options. L'élément génère plusieurs choix dans une liste déroulante.
Exemple
Le code suivant Pratiquez l'élément sélectionné pour créer une liste déroulante.
Le code ci-dessus est décrit comme,
- Tout d'abord, une étiquette d'étiquette est déclarée (juste pour guider l'utilisateur final).
- La balise de sélection est définie et contient trois étiquettes d'option
Sortir
La sortie montre une étiquette, un menu déroulant et un bouton.
Élément textarea
L'élément TextArea crée un champ de texte qui permet d'écrire plusieurs lignes. Bien que l'élément d'entrée puisse créer un champ de texte, mais il prend en charge les entrées unique.
Exemple
Le code fourni ci-dessous montre l'utilisation de l'élément TextArea
Le code ci-dessus crée une étiquette pour un champ de texte et le champ de texte à l'aide de l'élément TextArea. Initialement, la hauteur et la largeur par défaut de l'élément TextArea sont exercées. Cependant, vous pouvez utiliser l'attribut de hauteur et de largeur pour obtenir la taille personnalisée d'un élément TextArea.
Sortir
Élément boutonné
Un bouton exploitable peut être créé à l'aide de l'élément bouton des formulaires HTML.
Exemple
Le code écrit ci-dessous pratique l'élément bouton
Le code écrit ci-dessus crée deux boutons à l'aide d'éléments de bouton.
Sortir
Élément de champ
Cet élément est utilisé pour regrouper les multiples éléments d'une forme en un seul champ.
Exemple
Le code ci-dessus crée un champ en utilisant l'élément de champ dans HTML et sa légende est définie à l'aide de l'élément légende. L'élément Fieldset contient deux éléments d'entrée qui obtient le nom et l'e-mail de l'utilisateur.
Sortir
Élément de données
L'élément de données de données étend la fonctionnalité de l'élément d'entrée. L'élément de données de données vous fournit une liste des entrées prédéfinies pour choisir l'entrée chez eux (ou vous pouvez également saisir votre propre valeur).
Exemple
Le code fourni ci-dessous pratique l'utilisation de l'élément de datalist
Dans le code ci-dessus,
- Une liste d'entrée est créée, puis l'élément de datalist est déclaré
- À l'intérieur de l'élément de données, la balise est utilisée pour créer des options pour l'élément de données.
Sortir
Élément de sortie
Cet élément est utilisé pour afficher la sortie de toute action (soumission de formulaire).
Exemple
Le code suivant pratique l'attribut de sortie pour obtenir la somme de deux champs numériques.
Dans le code ci-dessus,
- deux types d'entrée = ”nombre"Sont définis avec des identifiants A et B respectivement
- le sortir L'élément considère les deux identifiants pour le traitement
- le se lancer L'événement d'élément de forme ajoute à la fois le nombre (lorsqu'ils sont insérés)
Sortir
En parcourant cet article, vous auriez appris à créer une forme HTML caractéristique.
Conclusion
Les éléments de forme sont les principales parties prenantes pour créer une forme détaillée. Les éléments de formulaire incluent l'entrée, l'étiquette, la textarea, le bouton et bien d'autres. Cet article répertorie les éléments de formulaire en HTML et un exemple de chaque élément est également fourni. Un formulaire HTML simple peut être créé à l'aide de quelques éléments de forme. Cependant, si vous voulez un formulaire avec des fonctionnalités détaillées, de nombreux éléments de formulaire HTML sont fournis pour pratiquer dans ce guide.