Explication détaillée de l'utilisation des balises option et optgruop dans le menu d'options du formulaire HTML

Utilisez la balise option pour définir chaque élément dans un formulaire contrôle . Le navigateur affiche le contenu de la balise comme élément du menu ou de la liste déroulante de la balise . De cette manière, son contenu ne peut être que du texte brut, sans aucune décoration. Attribut
value

Utilisez l'attribut value pour définir une valeur pour chaque option Lorsque l'utilisateur sélectionne l'option, le navigateur l'enverra au serveur. Si l'attribut value n'est pas spécifié, la valeur de l'option sera définie sur le contenu de la balise Jetez un œil aux options HTML dans l'exemple suivant :

coption value=dog>dog <option>dog

Les deux ont la même valeur. Le premier affiche la valeur définie dans la balise , et le second est défini par défaut sur le contenu de la balise elle-même : "dog"

attribut sélectionné

Par défaut, toutes les options des balises à sélection multiple sont décochéesstate, donc lorsque le client envoie le formulaire au serveur, ces options ne sont pas incluses dans la liste des paramètres. En incluant l'attribut sélectionné dans la balise , une ou plusieurs options peuvent être présélectionnées puis désélectionnées par l'utilisateur.

La version HTML de l'attribut sélectionné n'a aucune valeur. La version XHTML a la valeur selected=selected. Si aucune option n'est explicitement présélectionnée, la balise

de la radio présélectionnera la première option.

attribut label

Normalement, lorsque l'élément est affiché à l'utilisateur, le contenu de la balise Mais si l'attribut label est fourni, sa valeur doit être utilisée comme étiquette.

Balise

Les menus d'options dans les formulaires peuvent être très longs, ce qui les rend difficiles à afficher et à utiliser. Dans ce cas, il peut être utile de regrouper certaines options associées, puis de présenter ces groupes à l'utilisateur sous la forme d'un ensemble imbriqué de menus en cascade. est une balise nouvellement introduite dans HTML 4.0. Bien que son utilisation soit limitée, elle fournit cette fonctionnalité pour les formulaires HTML et XHTML.

Seule la balise , et elle ne peut contenir que la balise < Le navigateur génère des sous-menus pour chaque balise dans le menu principal Par exemple, en HTML, vous pouvez utiliser pour afficher un menu de formulaire organisé par nom de lieu !

<select name=state>
 <optgroup label=龙岗区>
      <option>布吉镇
      <option>坂田镇
</optgroup>
<optgroup label=宝安区>
      <option>龙华镇
      <option>西乡镇
</optgroup>
</select>

Copier après la connexion

Étant donné qu'aucun navigateur ne prend encore entièrement en charge la balise

(les navigateurs généraux les afficheront simplement sous forme de menu déroulant), nous ne sommes pas en mesure de la fournir à nos lecteurs. Montrez à quoi ressemblerait un tel menu. Cependant, ils peuvent être très similaires aux menus déroulants familiers, qui sont une fonctionnalité

courante pour la plupart des interfaces utilisateur graphiques. Lorsqu'il est sélectionné avec la souris ou le clavier,

mène à un ou plusieurs menus. Par exemple, dans notre exemple « État », il peut y avoir des sous-menus intitulés « Nord-Est » et « Sud », et chaque sous-menu affichera une liste des États qu'il contient.

Malheureusement, le plus gros obstacle de la balise

est qu'elle ne peut pas être imbriquée, ce qui se limite là à une seule couche de sous-menus. Cependant, dans les futures versions de XHTML, cette limitation pourrait être dépassée. Utilisez l'attribut label pour définir le titre d'un sous-menu

Organise les éléments liés à

dans le menu

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!

Étiquettes associées：

html option 菜单

source：php.cn

Article précédent：html : utilisation de la balise optgroup, regroupée, en lecture seule et affichée sous forme d'arborescence Article suivant：HTML Chine prend en charge la balise Optgroup de la catégorie Sélectionner la liste déroulante

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

• Matériel vidéo sur la création de votre propre framework PHP à partir de zéro
  2023-03-15 16:54:01
• Exemple d'analyse de la façon dont PHPMailer utilise la boîte aux lettres QQ pour compléter la fonction d'envoi d'e-mails
  2023-03-15 12:26:02
• Introduction à la façon de recevoir des e-mails en IMAP en php
  2023-03-14 18:58:01
• Exemple de mise en œuvre rapide de la déduplication de tableau en PHP
  2023-03-14 11:30:01
• Résumé de l'utilisation de tous les attributs de la balise en html
  1970-01-01 08:00:00
• Résumé des connaissances de base de PHP (nécessaire aux débutants pour débuter)
  2023-03-16 15:20:01
• Introduction à l'utilisation de typeof en JavaScript
  1970-01-01 08:00:00
• Introduction à l'utilisation de la méthode confirm() en JavaScript
  1970-01-01 08:00:00
• Une introduction détaillée à l'attribut HTML5 Placeholder
  1970-01-01 08:00:00
• Comment implémenter la sélection unique, la sélection multiple et la sélection inversée dans les formulaires dans ReactJS
  1970-01-01 08:00:00

Derniers numéros

Modifier le style matSelect lors de l'affichage des options Comment modifier les propriétés de mat-select lorsque l'option est activée ? <mat-selec...

Depuis 2024-04-05 09:23:19

0

1

1374

Ajouter le nombre (.length) de chaque élément dans les options de v-select Je souhaite ajouter course.length de l'API à chaque option d'élément sur v-select et affic...

Depuis 2024-03-31 21:05:16

0

1

377

Rubriques connexes

Plus>

• symbole de droit d'auteur HTML
• éditeur HTML en ligne
• réalisation de pages web html
• espace HTML
• qu'est-ce que le HTML
• Comment définir la taille de la police HTML
• html en txt
• Comment écrire du code de zone de texte HTML

Recommandations populaires

• Que signifie l'URL ?
• Que signifie DOM ?
• Comment changer la taille de l'image
• Comment mettre la police en gras en HTML
• Comment définir la taille des images HTML

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1414538
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4252587
• 
  Tutoriel vidéo JAVA pour débutants

  2458354
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  502382
• 
  Tutoriel d'introduction PHP base zéro

  842338

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1414538 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2458354 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  502382 temps d'étude
• 
  Introduction rapide au développement web front-end

  215134 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  872353 temps d'étude

• 
  [Web front-end] Démarrage rapide de Node.js

  6044 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  4609 temps d'étude
• 
  Aller au langage pratique GraphQL

  3975 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  595 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  20145 temps d'étude

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

À propos de nous Clause de non-responsabilité Sitemap

Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！