English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Manual de referencia HTML

大全 de etiquetas HTML

HTML: <optgroup> etiqueta

La etiqueta HTML <optgroup> crea un grupo de opciones en la lista desplegable del control <select>. Estos valores desplegables se definen por una serie de etiquetas <option> y se agrupan con la etiqueta <optgroup>. El valor de label <optgroup> se mostrará como el título gris del grupo de items en el control <select>. Este etiqueta también se conoce como elemento <optgroup>.

Ejemplo en línea

Combinar opciones relacionadas con la etiqueta <optgroup>:

!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Uso del etiqueta HTML <optgroup> (Tutoriales básicos en la web oldtoolbag.com)</title>
</head>
<body>
  <label for="tutorial_choice">Tutoriales: </etiqueta>
  <select id="tutorial_choice">
    <optgroup label="Web">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
    </optgroup>
    <optgroup label="Base de datos">
      <option value="sql">SQL</option>
      <option value="oracle">Oracle</option>
    </optgroup>
  </select>
</body>
</html>
Prueba para ver ‹/›

En este HTML5En el ejemplo de documento, usamos la etiqueta <optgroup> para crear dos grupos de opciones en la lista desplegable. El título del primer grupo de opciones es Web, y contiene dos valores desplegables-HTML y CSS. El título del segundo grupo de opciones es "Base de datos", y contiene dos valores desplegables-SQL y Oracle.

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

La mayoría de los navegadores principales admiten la etiqueta <optgroup>.

Definición y explicación de uso de la etiqueta

La etiqueta <optgroup> organiza un grupo de etiquetas <option> en un grupo de opciones con un título de grupo.

El valor de label <optgroup> se mostrará como un título en gris. Todos los elementos del grupo se mostrarán como una lista de opciones con sangría debajo del título.

Por defecto, la primera opción del marcador <select> se mostrará como el elemento seleccionado. El usuario puede seleccionar otra opción en la lista desplegable.

Si tiene muchos grupos de opciones, puede usar la etiqueta <optgroup> para combinar opciones relacionadas de manera sencilla.

Atributo

AtributoValorDescripción
deshabilitadodeshabilitadoEspecifica que el grupo de opciones esté deshabilitado.
EtiquetaTextoEspecifica una descripción para el grupo de opciones.

Atributos globales

La etiqueta <optgroup> admite atributos globales, consulte la tabla de atributos completa Atributos globales HTML.

Atributos de eventos

La etiqueta <optgroup> admite todos Atributos de eventos HTML.