Home-theater-designers
La collecte de données auprès d'un utilisateur de site Web peut se faire de plusieurs manières différentes. Les formulaires sur les sites Web peuvent avoir une fonction simple, telle que l'inscription d'un utilisateur à une newsletter, ou un objectif plus complexe, comme servir de formulaire de demande d'emploi.
Cependant, une chose que tous ces formulaires simples à complexes ont en commun est le HTML et plus précisément le HTML étiqueter.
Utilisation de la balise de formulaire
Les tag est un élément HTML utilisé comme conteneur pour enfermer d'autres éléments pouvant être considérés comme des blocs de construction pour les formulaires. Certains de ces éléments fondamentaux comprennent la étiquette, le étiquette, et le étiqueter.
Les tag a un attribut important qui contribue à sa fonctionnalité. Cet attribut est appelé action et est utilisé pour identifier le fichier vers lequel les données saisies dans le formulaire seront transmises.
Utilisation de l'exemple de balise
L'exemple ci-dessus montre comment utiliser la balise form dans vos projets. L'un des principaux points à retenir est que si vous ouvrez une balise de formulaire, vous devez vous rappeler de la fermer. Cela créera une structure de formulaire et garantira également que les données saisies dans le formulaire sont traitées correctement.
Utilisation de la balise
Les La balise est utilisée pour décrire les données de chaque champ de saisie d'un formulaire. Cette balise a un pour attribut, qui est utilisé pour améliorer la fonctionnalité d'un formulaire.
En rapport: Les meilleurs éditeurs HTML en ligne gratuits pour tester votre code
Si l'identifiant affecté au champ de saisie correspondant correspond au pour valeur dans le tag, alors ce champ de saisie sera automatiquement mis en surbrillance lorsque vous cliquez sur l'étiquette.
Utilisation de l'exemple de balise
First Name:
Dans l'exemple ci-dessus, vous pouvez voir que le pour l'attribut reçoit la valeur fnom . Par conséquent, si vous créez un champ de saisie avec le fnom id, ce champ sera mis en surbrillance à chaque fois que vous cliquerez sur le D'abord Nom étiqueter.
Utilisation de la balise
Dans sa forme la plus basique, le La balise peut être vue comme une zone de texte. Les La balise capture les données de l'utilisateur et l'une de ses caractéristiques les plus cruciales est la taper attribut. Les taper L'attribut indique le type de données que cette zone de texte peut collecter.
En rapport: Comment créer un formulaire empilé en CSS
Il existe plusieurs valeurs différentes que vous pouvez affecter au taper attribut, mais certains des plus populaires sont les suivants.
- Texte
- Nombre
- Image
- Date
- Case à cocher
- Radio
- Mot de passe
Utilisation de la balise Exemple
First Name:
Les tag dans le code ci-dessus a trois attributs différents qui ont chacun une fonction unique. Les taper L'attribut se voit attribuer une valeur de texte, ce qui signifie que la zone de texte n'acceptera que des caractères.
Les identifiant L'attribut est un identifiant unique pour la zone de texte, et il est important car il permet d'accéder à cet élément à partir d'un fichier CSS. Les Nom l'attribut est également un identifiant unique ; cependant, l'attribut name est utilisé pour interagir avec un élément du côté serveur du développement.
Les identifiant et Nom les attributs reçoivent généralement la même valeur car l'un donne accès à un élément du côté client et l'autre du côté serveur.
Utilisation de l'élément Checkbox
L'élément checkbox est très unique par rapport aux autres éléments que vous pouvez utiliser avec le étiqueter. Il permet à un utilisateur de sélectionner une ou plusieurs options dans une liste de choix connexes. Les cases à cocher sont facilement identifiables car elles sont représentées par de minuscules cases carrées qui contiennent une coche lorsqu'elles sont sélectionnées.
Utilisation de l'exemple d'élément de case à cocher
Programming Languages:
Java
JavaScript
Python
Dans l'exemple ci-dessus, chacun des éléments de case à cocher a un attribut de valeur, ce qui est important car il permet de distinguer chaque option de case à cocher de la collection. Par conséquent, si un utilisateur sélectionne « Java » parmi les options ci-dessus, les données le refléteront.
Utilisation de la balise et des éléments radio
Les tag et les éléments radio sont similaires dans le sens où ils ne permettent à un utilisateur de sélectionner qu'une seule valeur à la fois ; par conséquent, on peut dire qu'ils ont la même fonction. Cependant, ils sont très différents en apparence.
L'élément radio est plus proche de l'élément case à cocher en apparence, cependant, avec l'élément radio, vous avez des cercles au lieu de carrés.
Les La balise produit ce qui est essentiellement une zone de liste déroulante, qui permet à un utilisateur de sélectionner une seule valeur.
Utilisation de l'exemple de balise et d'élément radio
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Utilisation de l'élément Date
L'élément date produit une petite zone de texte qui génère un calendrier lorsque vous cliquez dessus. À l'aide de Date en tant que type de saisie dans vos formulaires, vous évitez qu'un utilisateur ne saisisse éventuellement une date incorrecte, ce qui peut potentiellement conduire à la collecte de données erronées.
Utilisation de l'exemple d'élément de date
Utilisation de l'élément e-mail et mot de passe
Lorsqu'un développeur attribue les valeurs de l'e-mail ou du mot de passe à l'attribut type d'un tag, ils produisent chacun une zone de texte identique. Cependant, lorsque vous commencez à utiliser ces boîtes, les différences deviennent apparentes.
L'élément e-mail surveille les données saisies dans la zone de texte et garantit que chaque soumission répond aux exigences standard d'une adresse e-mail ; ce qui signifie avoir une partie locale, suivie du symbole @, et se terminant par un domaine.
Utilisation de l'exemple d'élément de courrier électronique
Dans l'exemple ci-dessus, vous êtes présenté à un nouvel attribut appelé espace réservé , et cet attribut prend une valeur de texte qui s'affiche dans la zone de texte en gris délavé. Ce texte est utilisé pour indiquer les données qui doivent être placées dans la zone de texte comme on le voit dans l'exemple ci-dessus.
L'élément de mot de passe transforme les caractères en astérisques au fur et à mesure qu'ils sont entrés dans la zone de texte. Par conséquent, si l'écran de votre ordinateur est visible par d'autres personnes, elles ne verront pas le mot de passe que vous entrez.
Utilisation de l'exemple d'élément de mot de passe
Utilisation de la balise Button
Dans un formulaire, il existe généralement deux types de boutons différents. Le premier est le bouton de soumission, qui soumet les données saisies dans le formulaire à la valeur attribuée à l'attribut d'action (qui se trouve dans le < formulaire> étiqueter).
Exemple de bouton Soumettre
Submit
Le deuxième type de bouton généralement utilisé dans un formulaire est un bouton de réinitialisation, qui efface les données d'un formulaire afin que l'utilisateur puisse saisir de nouvelles données. Les l'étiquette a un taper attribut, qui est utilisé pour indiquer la fonction du bouton. Dans l'exemple ci-dessus, le taper l'attribut est d'attribuer la valeur nous faire parvenir , par conséquent, un bouton qui a un taper valeur de réinitialiser est utilisé pour réinitialiser le formulaire.
Exemple de bouton de réinitialisation
Reset
Création d'un formulaire
Pour créer un formulaire simple en HTML, vous devrez inclure tous les éléments mentionnés ci-dessus dans un étiqueter.
Création d'un exemple de formulaire
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
Le code ci-dessus produira le formulaire suivant :
comment récupérer votre séquence de snaps
Vous pouvez maintenant créer un formulaire simple en HTML
Cet article vous fournit tous les outils pour créer un formulaire HTML fonctionnel. Il identifie les différentes balises HTML utilisées dans la création de formulaires et explore les différents attributs pouvant être utilisés avec ces balises.
Cependant, la plupart des formulaires que vous voyez sur les sites Web ont un composant supplémentaire ; CSS, qui est utilisé pour donner vie à la forme et la rendre plus esthétique.
Partager Partager Tweeter E-mail La feuille de triche des propriétés essentielles CSS3Maîtrisez la syntaxe CSS essentielle avec notre aide-mémoire des propriétés CSS3.
Lire la suite Rubriques connexes- La programmation
- HTML
- Développement web
- Tutoriels de codage
Kadeisha Kean est un développeur de logiciels Full-Stack et un rédacteur technique/technologique. Elle a la capacité distincte de simplifier certains des concepts technologiques les plus complexes; produire du matériel qui peut être facilement compris par tout novice en technologie. Elle est passionnée par l'écriture, le développement de logiciels intéressants et les voyages à travers le monde (à travers des documentaires).
Plus de Kadeisha KeanAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner