balise fieldset, balise légende

Dans le formulaire, nous pouvons regrouper et classer les informations du formulaire. Par exemple, dans le formulaire d'inscription, nous pouvons regrouper les informations d'inscription en
Informations de base (généralement requises)
Détaillées. information ( Généralement facultative)
Alors, comment pouvons-nous mieux y parvenir ? On peut envisager d'ajouter les deux balises suivantes au formulaire :
Fieldset : Regrouper les formulaires. Un formulaire peut avoir plusieurs jeux de champs.
Légende : Décrivez la description du contenu de chaque groupe.

Regardons le code suivant :

Exemple de code source [www.52css.com]

Basic Register

Prénom :

...

Registre détaillé

Intérêt : < / p>
...

...

L'ensemble de champs est bordé par défaut, tandis que la légende est normal par défaut Affiché dans le coin supérieur gauche. Mais sur certaines pages, nous ne voulons pas que les styles ou les dispositions par défaut des jeux de champs et des légendes affectent l'esthétique de la conception. La solution consiste à définir la bordure du jeu de champs sur 0 et l'affichage de la légende sur aucun en CSS.

◆ Étiquette d'étiquette

Tout le monde devrait être familier avec les étiquettes d'étiquette Nous attribuons une étiquette d'étiquette à l'étiquette de texte dans le formulaire et utilisons l'attribut for pour la créer. Les composants de formulaire sont associés, et l'effet est que lorsque vous cliquez sur l'étiquette de texte, le curseur s'affiche dans le composant de formulaire correspondant.

Regardons le code suivant :

Exemple de code source [www.52css.com]

Basic Register

Prénom :

...

Registre détaillé

Intérêt :

...

...

En plus aux méthodes ci-dessus. De plus, nous pouvons également utiliser des balises d'étiquette pour imbriquer l'intégralité du composant de formulaire et l'étiquette de texte, voir le code suivant :

Exemple Code source [ www.52css.com]

Prénom :

Selon la spécification, le texte sera automatiquement associé aux composants de formulaire adjacents, mais malheureusement le navigateur grand public IE6 ne prend pas en charge cette fonctionnalité.

◆ attribut accesskey, attribut tabindex

Le site Web doit prendre en compte une utilisation normale dans davantage d'environnements de navigation. Par exemple, lorsqu'il n'y a pas de dispositif de curseur (comme un. souris), le site Web doit Vous pouvez également remplir le formulaire à l'aide des opérations du clavier. Pour l'instant, cliquer n'a aucune signification pour eux. À ce stade, nous choisissons la clé d'accès de l'étiquette (touche de raccourci, valeur de l'attribut alt+accesskey sous IE, valeur de l'attribut alt+shift+accesskey sous FF) et l'attribut tabindex (touche Tab, la valeur de l'attribut tabindex est une séquence) à ajouter à l'étiquette du formulaire. . Tels que l'étiquette, l'entrée, etc.
Regardons le code suivant :

Exemple de code source [www.52css.com]

Prénom :

◆ balise optgroup

Le rôle de la balise optgroup est défini dans la sélection list Un ensemble d'options. Nous pouvons utiliser la balise optgroup pour classer les options de l'élément select et utiliser l'attribut label. La valeur de l'attribut sera affichée sous la forme d'un titre en retrait non sélectionnable dans la liste déroulante (sélectionner). Veuillez noter que les optgroups ne prennent pas en charge l'imbrication.

Regardons le code suivant :

Exemple de code source [www.52css.com]

Nanjing
Suzhou


Hangzhou< ; /option>
Wenzhou

Il y en a un dans IE6 Petit bug (pas de problème dans FireFox) : lors de l'utilisation des touches fléchées du clavier pour sélectionner, dans IE, lorsque l'élément sélectionné passe d'une option d'un optgroup à une option d'un autre optgroup, la modification ne sera pas déclenchée. La solution consiste à ajouter des événements onkeydown ou onkeyup pour aider à résoudre le problème.

◆balise de bouton

Nous la définissons comme un bouton de soumission. Dans l'élément bouton, vous pouvez placer du contenu, tel que du texte ou des images. C'est la différence entre cet élément et le bouton de l'élément d'entrée.

Exemple de code source [www.52css.com]

Cliquez-moi !

La balise bouton offre plus de fonctions et contenu plus riche. Le bouton sépare le texte du bouton et vous pouvez ajouter des images dans le bouton, donnant au texte et aux images plus de styles parmi lesquels choisir, rendant le bouton rigide plus vif et flexible. Et l'utilisation de la balise bouton sera plus sémantique que le bouton de saisie, et elle peut être comprise simplement à partir du sens littéral.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!