Étiqueter est l'un des éléments de formulaire polyvalents et vous permet de créer différents éléments d'interface et de fournir une interaction avec l'utilisateur. Principalement est conçu pour créer des champs de texte, divers boutons, boutons radio et cases à cocher. Bien que l'élément n'a pas besoin d'être placé à l'intérieur du conteneur
Paramètres
Description des paramètres de la balise
Paramètre ALIGN
Détermine comment aligner le champ d'image avec du texte ou d'autres éléments de formulaire.
Syntaxe
Arguments
- bas- Alignez la bordure inférieure de l'image avec le texte environnant
- la gauche- Aligne l'image à gauche de la fenêtre
- milieu- Alignement du milieu de l'image sur la ligne de base de la ligne courante.
- droite- Aligne l'image sur le bord droit de la fenêtre.
- Haut- La bordure supérieure de l'image est alignée avec l'élément le plus haut de la ligne actuelle.
La valeur par défaut est en bas. Les navigateurs prennent également en charge les arguments en bas, au milieu, ligne de base et dessus de texte qui ne sont pas inclus dans la spécification HTML 4.01.
Paramètre ALT
Le paramètre alt définit le texte alternatif pour le champ d'image. Ce texte vous permet d'obtenir informations textuellesà propos d'une image lors du chargement des images est désactivé dans le navigateur. Étant donné que les images sont chargées après que le navigateur a reçu des informations à leur sujet, le texte remplaçant l'image apparaît plus tôt. Et au fur et à mesure du chargement, le texte sera remplacé par une image. Les navigateurs affichent également un texte alternatif sous forme d'info-bulle qui apparaît lorsque la souris survole l'image.
Syntaxe
La valeur peut être n'importe quelle valeur appropriée chaîne de texte... Il doit être mis entre guillemets simples ou doubles.
Paramètre BORDURE
Les navigateurs gèrent les images ajoutées via la balise comme les images créées avec le tag ... Y compris autour de l'image, vous pouvez ajouter un cadre dont la couleur correspond à la couleur du texte.
Syntaxe
La valeur valide est tout nombre entier positif en pixels. La valeur par défaut est 0.
Paramètre VÉRIFIÉ
Ce paramètre détermine si un élément de formulaire tel qu'une case à cocher ou un bouton radio est pré-coché. Dans le cas de l'utilisation d'un bouton radio, un seul élément du groupe peut être coché ; pour les cases à cocher, il est permis de cocher au moins tous les éléments.
Syntaxe
Paramètre DÉSACTIVÉ
Bloque l'accès et la modification du champ du formulaire. Dans ce cas, il est affiché en gris et indisponible à l'activation par l'utilisateur. De plus, un tel champ ne peut pas recevoir le focus en appuyant sur la touche Tab, avec la souris ou de toute autre manière. Cependant, cet état du champ peut être modifié à l'aide de scripts.
Syntaxe
Paramètre MAXLENGTH
Installe nombre maximal caractères pouvant être saisis par l'utilisateur dans la zone de texte. Lorsque ce numéro est atteint lors de la numérotation, aucune autre saisie n'est possible.
Syntaxe
Le nom du paramètre
Spécifie un nom unique pour l'élément de formulaire. En règle générale, ce nom est utilisé lors de l'envoi de données au serveur ou pour accéder aux données de champ saisies via des scripts.
Syntaxe
Le nom est un ensemble de caractères, dont des chiffres et des lettres. JavaScript est sensible à la casse, donc lorsque vous faites référence à un élément par son nom, utilisez la même orthographe que pour le paramètre name.
Paramètre READONLY
Quand marquer le paramètre readonly est ajouté, le champ de texte ne peut pas être modifié par l'utilisateur, y compris la saisie d'un nouveau texte ou la modification de l'existant. De plus, un tel champ ne peut pas recevoir le focus en appuyant sur la touche Tab, avec la souris ou de toute autre manière. Cependant, l'état et le contenu du champ peuvent être modifiés à l'aide de scripts.
Syntaxe
Paramètre TAILLE
La largeur de la zone de texte, qui est déterminée par le nombre de caractères dans la police à espacement fixe. Autrement dit, la largeur est donnée par le nombre de lettres adjacentes de même largeur horizontale. Si la taille de la police est modifiée à l'aide de styles, la largeur change également en conséquence.
Syntaxe
La valeur valide est n'importe quel entier positif.
Paramètre SRC
L'adresse fichier graphiqueà afficher sur la page Web dans le champ image.
Syntaxe
La valeur est le chemin complet ou relatif du fichier.
paramètre TYPE
Le paramètre type requis indique au navigateur le type de l'élément de formulaire.
Syntaxe
Arguments
- bouton- Bouton.
- case à cocher- Drapeaux. Vous permet de sélectionner plus d'une option parmi celles proposées.
- fichier- Champ de saisie du nom du fichier qui est envoyé au serveur.
- caché- Champ caché. Il n'est en aucun cas affiché sur la page Web.
- image- Champ d'images. Lorsque vous cliquez sur l'image, les données du formulaire sont envoyées au serveur.
- le mot de passe- Champ de texte normal, mais différent de celui-ci en ce que tous les caractères sont affichés avec des astérisques. Il est conçu pour que personne ne puisse voir le mot de passe saisi.
- radio- Commutateurs. Utilisé lorsque vous devez choisir une option parmi plusieurs proposées.
- réinitialiser- Bouton pour remettre les données du formulaire à leur valeur d'origine.
- nous faire parvenir- Bouton d'envoi des données du formulaire au serveur.
- texte- Champ de texte. Conçu pour saisir des caractères à l'aide du clavier.
La valeur par défaut est le texte.
paramètre VALUE
Spécifie la valeur d'un élément de formulaire à soumettre au serveur ou à recevoir à l'aide de scripts client. Une paire "nom = valeur" est envoyée au serveur, où le nom est spécifié par le paramètre name de la balise et la valeur est spécifiée par le paramètre value.
Selon le type de l'élément, le paramètre value joue le rôle suivant :
- pour les boutons (type d'entrée = "bouton | réinitialiser | soumettre") définit une légende de texte sur eux ;
- pour les champs de texte (type d'entrée = "mot de passe | texte") spécifie la chaîne saisie précédemment. L'utilisateur peut effacer le texte et saisir ses caractères, mais lorsqu'il est utilisé sous la forme du bouton Reset, le texte utilisateur est effacé et la saisie dans le paramètre value est restaurée ;
- pour les cases à cocher et les boutons radio (type d'entrée = "case à cocher | radio"), identifie de manière unique chaque élément afin que le programme client ou serveur puisse identifier de manière unique l'élément sélectionné par l'utilisateur.
spécification
Attribut requis
Les valeurs
Tableau 1 répertorie les valeurs possibles de l'attribut type et la forme résultante du champ de formulaire.
| Un type | La description | Vue |
|---|---|---|
| bouton | Bouton. | |
| case à cocher | Cases à cocher. Vous permet de sélectionner plus d'une option parmi celles proposées. | Bière Thé Café |
| fichier | Champ de saisie du nom du fichier qui est envoyé au serveur. | |
| caché | Champ caché. Il n'est en aucun cas affiché sur la page Web. | |
| image | Champ d'images. Lorsque vous cliquez sur l'image, les données du formulaire sont envoyées au serveur. | |
| le mot de passe | Un champ de texte normal, mais différent de celui-ci en ce que tous les caractères sont affichés avec des astérisques. Il est conçu pour que personne ne puisse voir le mot de passe saisi. | |
| radio | Commutateurs. Ils sont utilisés lorsque vous devez choisir une option parmi plusieurs propositions. | Bière Thé Café |
| réinitialiser | Bouton pour remettre les données du formulaire à leur valeur d'origine. | |
| nous faire parvenir | Bouton d'envoi des données du formulaire au serveur. | |
| texte | Champ de texte. Conçu pour saisir des caractères à l'aide du clavier. |
De nouvelles valeurs ont été ajoutées à HTML5 comme indiqué dans le tableau 1. 2.
La prise en charge de ces valeurs par le navigateur est indiquée dans le tableau 1. 3.
| Sens | Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | iOS |
| Couleur | 21.0+ | 11.01+ | |||||
| Date | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| dateheure | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| dateheure-local | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+ | |
| mois | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| numéro | 10.0 | 6.0+ | 10.62+ | 5.0+ | 2.3+ | 4.0+ | |
| gamme | 10.0 | 5.0+ | 10.62+ | 5.0+ | 23.0+ | 5.0+ | |
| chercher | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ | 4.0+ | |
| tél | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ | 3.1+ | |
| temps | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| URL | 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+ |
| la semaine | 5.0+ | 10.62+ | 5.0+ | 5.0+ |
Valeur par défaut
HTML5 IE Cr Op Sa Fx
HTML5 IE Cr Op Sa Fx
De l'auteur : vous devez être conscient de l'attribut type sur le champ de saisie. Cet attribut spécifie le type d'entrée sous la forme que l'utilisateur verra. Si l'attribut est manquant ou si une nouvelle valeur est utilisée dans un ancien navigateur, la balise fonctionnera toujours. Le type par défaut sera défini sur type = "texte". C'est le point principal qui vous permet d'utiliser les formulaires HTML5 aujourd'hui, même si vous supportez des navigateurs plus anciens. Si vous avez de nouveaux types, tels que l'e-mail ou la recherche, une simple zone de texte s'affichera dans les anciens navigateurs.
Notre formulaire d'inscription utilise 4 des 10 types que vous connaissez tous : case à cocher, texte, mot de passe et soumettre. Ci-dessous se trouve le liste complète disponible dans les types de champs de saisie HTML5 :
La spécification HTML5 indique environ 9 types supplémentaires avec lesquels vous pouvez créer des éléments d'interface utilisateur spécifiques, ainsi qu'effectuer une validation des données natives :
Il existe quatre autres types liés à la date inclus dans HTML5.1 et le WHATWG HTML Living Standard, dont trois sont assez bien pris en charge dans les navigateurs modernes :
datetime (non pris en charge dans aucun navigateur)
Examinons de plus près chaque nouveau type et voyons également comment ils peuvent être utilisés.
Chercher
La recherche de type d'entrée (type = "search") est un champ de recherche, une entrée d'une ligne pour saisir un ou plusieurs expressions de recherche... De la spécification:
"La différence entre un type de texte et un type de recherche est purement stylistique : sur les plates-formes où les champs de recherche sont différents des champs de texte normaux, le type de recherche correspondra à l'entrée aux styles de la plate-forme."
De nombreux navigateurs stylisent les champs de recherche pour qu'ils ressemblent aux champs de recherche du navigateur ou du système d'exploitation. Chrome, Safari, Opera et IE ont ajouté une fonction pour supprimer du texte en cliquant sur l'icône « x », qui apparaît dès que vous commencez à taper (voir Figure 4.5). Chrome et Opera effacent également les champs date/heure, et IE11 ajoute une icône "x" à presque tous les types, y compris le texte.
Graphique 4.5. le champ de recherche a le style des champs de recherche du système d'exploitation
Sur les appareils de campagne Apple, les champs de recherche ont des coins arrondis par défaut dans Chrome, Safari et Opera, ce qui duplique apparence champs de recherche dans le système opérateur... Sur les tablettes dotées de claviers dynamiques, le bouton Go apparaît comme une icône de recherche ou la recherche de mots. Tout dépend de l'appareil. Si vous ajoutez un attribut personnalisé, une icône en forme de loupe apparaît dans Chrome et Opera.
Vous pouvez utiliser type = "texte" à l'ancienne, mais le nouveau type de recherche est un indice visuel pour les utilisateurs sur lesquels ils doivent cliquer pour trouver un site. De plus, le nouveau type est très similaire aux champs de recherche standard auxquels les utilisateurs sont habitués. Il n'y a pas de recherche sur le site The HTML5 Herald, mais cela pourrait être comme ceci :
< form id = "search" method = "get" > < label for = "s" >Chercher< / label > < input type = "search" id = "s" name = "s" / > < input type = "submit" value = "Chercher" / > < / form > |
Dans les navigateurs sans prise en charge, le type de recherche apparaît sous la forme d'un champ de texte normal, il n'y a donc aucune raison de ne pas l'utiliser le cas échéant.
Adresses mail
Sans surprise, le type d'email (type = "email") est utilisé pour définir une ou plusieurs adresses email. Il prend en charge l'attribut booléen multiple, qui peut être utilisé pour spécifier plusieurs adresses séparées par des virgules (avec un espace).
Modifions notre formulaire, mettons type = ”email” dans les champs email :
< label for = "email" >Mon adresse e-mail est< / label > < input type = "email" id = "email" name = "email" / > |
Changer le type de texte en e-mail n'apporte aucun changement visuel. L'entrée ressemble toujours à un champ de texte normal. Cependant, ils sont différents.
Les modifications peuvent être visualisées sur l'appareil tactile. Lorsque le champ d'e-mail reçoit le focus, la plupart appareils tactiles(par exemple, iPad ou téléphone Android avec Chromium) affichera un clavier optimisé pour saisir une adresse E-mail... Le clavier affichera un symbole @, un point, un espace, mais pas une virgule, comme le montre la figure 4.6.
Graphique 4.6. un champ de type email avec un clavier personnalisé sur l'appareil sous Contrôle iOS
DANS Navigateurs Firefox, Chrome, Opera et Internet Explorer 10 avec saisie incorrecte mail affiche un message d'erreur. Cela se produit lorsque vous essayez de soumettre un formulaire avec du texte qui n'est pas reconnu comme une ou plusieurs URL. Un message d'erreur typique est illustré à la Figure 4.7.
Graphique 4.7. message d'erreur concernant une adresse e-mail incorrecte saisie dans Navigateur Opera(à gauche) et Firefox (à droite)
Remarque : messages de validation personnalisés
Vous n'aimez pas le message d'erreur par défaut du navigateur ? Définissez le vôtre avec .setCustomValidity (errorMsg). SetCustomValidity ne prend qu'un seul paramètre, le message d'erreur. Si vous avez défini votre propre message de validation, après une saisie correcte, vous devez effacer la ligne avec le message (valeur false) pour que le formulaire soit soumis :
function setErrorMessages (formControl) (var validityState_object = formControl.validity; if (validityState_object.valueMissing) (formControl.setCustomValidity ("Veuillez définir un âge (requis)");) else if (validityState_object.rangeUnderflow) (formControl.setCustomValidity \ "re trop jeune" );) else if (validityState_object.rangeOverflow) (formControl.setCustomValidity ("Tu \" es trop vieux ");) else if (validityState_object.stepMismatch) (formControl.setCustomValidity (" Compter les demi-anniversaires? " );) else (// si l'entrée est valide, elle doit être fausse, ou il y aura une erreur formControl.setCustomValidity ("");))
fonction setErrorMessages (formControl) ( var validiteState_object = formControl. validité; if (validityState_object. valueMissing) ( formControl. setCustomValidity ( "Veuillez définir un âge (obligatoire)") ; ) else if (validityState_object. rangeUnderflow) ( formControl. setCustomValidity ("Vous \" êtes trop jeune "); ) else if (validityState_object. rangeOverflow) ( formControl. setCustomValidity ("Vous \" êtes trop vieux "); ) else if (validityState_object. stepMismatch) ( Salutations à vous, chers lecteurs du site du blog. Aujourd'hui, je veux parler de quelqu'un comme Formulaires HTML... Quel que soit le moteur de votre site (cms), il utilisera à coup sûr des formulaires créés à l'aide des balises Form et Input, ainsi que des attributs et paramètres Bouton, Coché, Valeur, Case à cocher, Radio, Case à cocher, Soumettre... Eh bien, vous pouvez également y ajouter des éléments pour créer des listes déroulantes et des champs de texte - Select, Option, Textarea, Label, Fieldset, Legend. Pourquoi sommes-nous nécessaires et comment fonctionnent les formulaires sur les sites Web modernesLa même chaîne de recherche de site () est créée à l'aide de ces balises, puis la recherche sur votre projet sera obligatoire. Par conséquent, comprendre comment ils sont organisés et comment ils fonctionnent ne vous nuira pas du tout pour un travail réussi sur la conception, et même avec l'auto-promotion et la promotion, ce ne sera pas superflu. Donc, avec la justification de la nécessité d'étudier ces éléments, je pense qu'il ne devrait plus y avoir de questions, il est donc temps de passer directement à l'étude de leurs options possibles. Oui, je tiens également à vous rappeler que nous avons déjà examiné de nombreux documents sur le thème du langage de balisage hypertexte, par exemple, trois) et. À la base, les formulaires sont constitués d'éléments pour la création desquels, à l'intérieur du conteneur principal, à partir des balises Form, diverses balises sont insérées - Checked, Value, Checkbox, Radio, Checkbox, Submit, etc. Il suffit de placer son code à n'importe quel endroit pratique du modèle de site en spécifiant, à l'aide de balises et de leurs attributs, à quoi il doit ressembler. Cela peut être une zone de texte avec un bouton d'envoi pour la requête que vous avez saisie, des choix avec des boutons radio (où vous ne pouvez laisser qu'un seul des boutons fournis enfoncé), plusieurs zones de texte avec un bouton d'envoi (), et bien plus encore. Par exemple, dans le cas de "recherche", à l'aide de l'attribut Valeur, vous pouvez préciser ce qui sera exactement écrit sur le bouton situé à côté du champ de saisie d'une requête. Les données saisies dans les formulaires doivent être traitées ultérieurement d'une manière ou d'une autre. Par exemple, dans le cas retour d'information l'utilisateur, après avoir rempli le champ avec son nom, entre son E-mail et le texte du message, puis clique sur le bouton envoyer, aura le droit d'espérer envoyer des données du formulaire à l'E-mail de l'auteur du site. Mais malheureusement, il n'est pas possible de l'implémenter en utilisant un seul langage de balisage hypertexte (). À ces fins, vous aurez besoin programme spécial un gestionnaire qui, une fois que l'utilisateur a cliqué sur le bouton d'envoi, prendra toutes les données des champs de commentaires et les enverra au propriétaire de la ressource par e-mail. Quel programme fera cela, vous devez vous spécifier à l'aide de l'attribut Action. Typiquement, un programme de traitement est un script écrit en PHP. Par conséquent, dans l'attribut Action de la balise Form, vous devrez spécifier le chemin d'accès au fichier de ce script, qui se trouve sur votre serveur d'hébergement. Je vais donner comme exemple l'abonnement au flux RSS de mon blog via E-mail : Un peu incompréhensible, sans doute, semble-t-il au début, mais je pense que tout deviendra clair au fur et à mesure que l'histoire avancera. Balises Form et Input pour créer des boutons, des cases à cocher et des boutons radioTout formulaire doit être entouré de balises ouvrantes et fermantes Forme... C'est une sorte de conteneur pour leur création. Cette balise a un certain nombre d'attributs obligatoires et facultatifs :
Considérons le reste des balises qui vous permettent de créer une variété de formulaires Web. Le plus polyvalent est Saisir... À l'intérieur, l'attribut Type doit être prescrit, ce qui détermine quel sera exactement le formulaire HTML créé avec cette balise. Les éléments suivants peuvent être créés à l'aide de Input et Type :
L'entrée n'a pas de balise de fin. L'apparence exacte du formulaire Web créé avec celui-ci dépend entièrement du paramètre spécifié dans l'attribut Type. Si Type n'est pas spécifié, un champ de texte sera créé par défaut. Exemples de formulaires créés sur Input avec différentes valeurs pour TypeAutres attributs de la balise Input et exemples de leur utilisationVoyons à quoi servent les autres attributs :
Maintenant, passons en revue tout exemples de formulaire avec Input... L'apparence du champ de texte est similaire à l'apparence du champ de saisie du mot de passe, nous ne considérerons donc que l'option de création de texte, par exemple, pour saisir une adresse e-mail :
(! LANG : Regardons maintenant la création d'un formulaire Web avec des boutons radio (Radio) :
Notez que ce formulaire utilise la balise Input deux fois — une fois pour créer chacun des deux boutons radio. De plus, chacun d'eux contient l'attribut Nom avec la même valeur (rezultat), et la valeur Valeur est différente (OUI et NON). Cela signifie que lors de son traitement, si l'un des boutons radio est sélectionné, une variable sera envoyée dont le nom est écrit dans Nom, mais la valeur de cette variable dépendra du bouton radio sélectionné. Prenons un exemple de création d'un formulaire Web avec des cases à cocher :
Les cases à cocher diffèrent des boutons radio par la possibilité de sélectionner plusieurs options à la fois. Name sert à définir dans le fichier du gestionnaire dans quelle case les cases à cocher sont définies, et Value définit la valeur qui sera envoyée au gestionnaire (si Value n'est pas spécifié, le texte situé à côté de cette case à cocher sera envoyé au gestionnaire) . Select, Option, Textarea, Label, Fieldset, Legend - listes déroulantes, zones de texte et autres éléments de formulaires WebPour commencer, je veux vous rappeler un peu ce que sont en fait les formulaires Web et pourquoi ils sont nécessaires sur les pages du site. Ils sont principalement conçus pour répéter les éléments disponibles dans n'importe quel système d'exploitation de manière conviviale : boutons, champs de saisie de texte, listes déroulantes, cases à cocher, boutons radio, etc. Tous les utilisateurs, sans aucune explication supplémentaire, comprennent le but de ces éléments, et s'ils voient le bouton Html du formulaire, ils comprennent qu'ils doivent cliquer dessus. De plus, tous ses éléments constitutifs (comme Select, Option, Textarea, Label, Fieldset, Legend) sont déjà des pièces finies (conteneurs), à insérer qu'il suffira d'utiliser simplement la balise requise avec les attributs et paramètres nécessaires. Les navigateurs eux-mêmes savent comment afficher un élément particulier d'un formulaire Web. Certes, les options permettant d'afficher le même élément dans différents navigateurs peuvent légèrement différer les unes des autres, mais, en règle générale, pas de manière significative. Ce. il s'avère que les formulaires Web en HTML sont une tentative de transfert de clé éléments utilisés dans n'importe quel système d'exploitation, aux pages du site. Mais pourquoi pourraient-ils être nécessaires sur les pages du site ? En principe, dans le même but pour lequel des éléments similaires sont utilisés dans les systèmes d'exploitation - le transfert de données de l'utilisateur. Dans le cas des formulaires, les données de l'utilisateur sont transmises au serveur, où elles sont traitées par un programme spécial (le langage de balisage hypertexte, malheureusement, ne permet pas le traitement des données). Cependant, les données peuvent être envoyées non seulement au serveur, mais aussi, par exemple, par e-mail à l'adresse spécifiée dans l'attribut Action de la balise Form. Lors de l'envoi de données de Html vers E-mail, l'utilisateur qui remplit les champs, après avoir appuyé sur le bouton d'envoi de données, lancera le programme de messagerie utilisé sur son ordinateur par défaut. Dans ce cas, la balise Form d'ouverture devrait ressembler à ceci :
Les attributs suivants peuvent être utilisés avec Textarea :
Étiquette - à quoi sert cette balise HTML dans le formulaire ?La balise html Label vous permet d'implémenter une fonctionnalité très intéressante dans les formulaires disponibles dans les systèmes d'exploitation. Là, si vous vous en souvenez, pour activer un élément, il n'est pas nécessaire de cliquer dessus, vous pouvez cliquer sur le nom de cet élément - il sera toujours activé. Dans les formulaires Web, cela ne se produit pas par défaut - vous devez cliquer sur l'élément même du formulaire HTML pour l'activer. Par exemple, vous devez cliquer sur une case à cocher pour y mettre une coche. Cliquer sur le texte à côté de la case à cocher n'aura aucun effet. Essayez vous-même : Comme vous pouvez le voir, cliquer sur le texte pour activer cet élément est inutile - vous devez cliquer dessus vous-même. C'est exactement l'état des choses et est destiné à fixer la balise Label. Il vous permet de rendre le texte à côté de l'élément de formulaire Web cliquable, ce qui est sans aucun doute améliorera la convivialité. Mais comment lier l'élément Html du formulaire et le texte ? Pour ce faire, ajoutez un ID avec un paramètre unique à l'attribut et entourez le texte de balises Label d'ouverture et de fermeture. Et ce n'est pas tout. Dans la balise d'ouverture Label, vous devez enregistrer l'attribut For, dont le paramètre doit être exactement le même que l'attribut ID dans la balise Html de l'élément de formulaire. Il s'avère que quelque chose comme ceci:
Comme vous pouvez le voir, grâce à l'utilisation de Label, les éléments du formulaire Web peuvent être activés non seulement en cliquant dessus, mais également en cliquant sur le texte situé à côté. Fieldset et Legend - briser la forme en morceauxVous avez probablement souvent vu que les grands formulaires en HTML sont divisés en groupes (Fieldset), qui sont entourés d'un cadre, et chacun de ces groupes a son propre titre (Legend). Cela se fait avec seulement deux balises : Fieldset et Legend. Ils sont appariés, c'est-à-dire ils doivent avoir une ouverture et une fermeture à coup sûr. Ainsi, pour créer un groupe de composants, vous devez envelopper tous ces composants dans les balises d'ouverture et de fermeture du Fieldset. Et afin de définir un titre (légende) pour ce groupe, vous devez immédiatement après le jeu de champs d'ouverture écrire une structure à partir de la légende d'ouverture et de fermeture, entre laquelle vous devez insérer le texte du titre du groupe. Voici un exemple de création de groupes à l'aide de Fieldset et Legend :
Bonne chance à toi! A bientôt sur les pages du site du blog vous pouvez regarder plus de vidéos en allant sur");">  Vous pouvez être intéressé Select, Option, Textarea, Label, Fieldset, Legend - Balises HTML du formulaire déroulant et de la zone de texte Étiqueter (de l'anglais. saisir- entrée) est l'un des éléments de formulaire polyvalents et vous permet de créer différentes parties de l'interface et de fournir une interaction avec l'utilisateur. Principalement est conçu pour créer des champs de texte, divers boutons, boutons radio et cases à cocher. Attribut principal , définissant le type de l'élément - type. Il permet de paramétrer les éléments de formulaire suivants : un champ de texte (texte), un champ de mot de passe (mot de passe), un bouton radio, une case à cocher, un champ masqué, un bouton, un bouton pour soumettre un formulaire (soumettre), un bouton pour effacer le formulaire (reset), un champ pour envoyer un fichier (fichier), un bouton avec une image (image), etc. Chaque élément a sa propre liste d'attributs qui déterminent son apparence et ses caractéristiques. De plus, plus d'une douzaine de nouveaux attributs ont été ajoutés à HTML5. SyntaxeAucune balise de fermeture requise. WAI ARIAIl n'y a pas de valeur de rôle par défaut. Valeurs valides pour le rôle :
Les attributs
J'accepteDéfinit un filtre pour les types de fichiers que vous pouvez soumettre via le champ de téléchargement de fichier. Le type de fichier est spécifié en tant que type MIME, avec plusieurs valeurs, elles sont séparées par des virgules. Si un fichier ne correspond pas au filtre défini, il n'est pas affiché dans la fenêtre de sélection de fichier. S'applique au champ de téléchargement de fichier ( ). Prise en charge du navigateur Valeur par défaut altL'attribut alt définit un texte alternatif pour le champ d'image. Ce texte permet d'obtenir des informations textuelles sur l'image lorsque le chargement des images est désactivé dans le navigateur, et est également destiné aux moteurs de recherche. Syntaxe
Les valeurs Toute chaîne de texte appropriée. Valeur par défaut Saisie automatiqueCet attribut permet de remplir les champs du formulaire avec le texte qui y a été saisi précédemment. Les valeurs sont stockées et remplacées par le navigateur, tandis que la saisie semi-automatique, pour des raisons de sécurité, peut être désactivée par l'utilisateur dans les paramètres du navigateur et ne peut dans ce cas être contrôlée par l'attribut de saisie semi-automatique. Lorsque vous entrez les premières lettres du texte, une liste de valeurs précédemment enregistrées s'affiche, à partir de laquelle vous pouvez sélectionner celle que vous souhaitez. La saisie semi-automatique d'un champ de formulaire spécifique est liée à son attribut name et est perdue lorsque la valeur est modifiée. Syntaxe
Les valeurs
Valeur par défaut Dépend des paramètres du navigateur. mise au point automatiqueDéfinit automatiquement le focus sur le champ de formulaire. Dans un tel champ, vous pouvez saisir immédiatement du texte sans cliquer explicitement dessus avec le curseur de la souris. Syntaxe
Les valeurs Valeur par défaut L'attribut autofocus n'est pas défini par défaut. vérifiéCet attribut détermine si un élément de formulaire tel qu'une case à cocher ou un bouton radio est pré-coché. Dans le cas de l'utilisation du bouton radio, un seul élément du groupe peut être coché ; pour les cases à cocher, au moins tous les éléments peuvent être cochés. Syntaxe
Les valeurs Valeur par défaut dirnameSi l'attribut dirname est présent, une paire nom/valeur est envoyée au serveur, où le nom est spécifié par l'attribut dirname, et la valeur est remplacée par le navigateur. Pour le texte de gauche à droite, la valeur sera ltr, et pour le texte de droite à gauche (hébreu, par exemple) la valeur sera rtl. Syntaxe
Les valeurs Une chaîne de texte arbitraire qui sert de nom au paramètre. Habituellement, dir est ajouté à la fin de la ligne pour indiquer que ce paramètre spécifie la direction du texte. Valeur par défaut désactivéeBloque l'accès et la modification du champ du formulaire. Dans ce cas, il est affiché en gris et indisponible à l'activation par l'utilisateur. De plus, un tel champ ne peut pas recevoir le focus en appuyant sur la touche Tab, avec la souris ou de toute autre manière. Cependant, cet état du champ peut être modifié à l'aide de scripts. La valeur verrouillée dans le champ n'est pas transmise au serveur. Syntaxe
Les valeurs Valeur par défaut Cet attribut est désactivé par défaut. formeAssocie un champ à un formulaire par son identifiant. Une telle connexion est nécessaire dans le cas où le champ est situé à l'extérieur Les valeurs Identificateur de formulaire (valeur de l'attribut id d'élément |
