Aprendizaje de HTML, Parte 32: Uso de Tag Select y Optgroup en formularios HTML

¿Sabes cómo hacer un menú?desplegable en formulario HTML? Se crea un menú desplegable en el formulario utilizando una combinación de las etiquetas <select> y <option>. Anteriormente, expliqué en el artículo anterior que hay varias etiquetas utilizadas para crear un formulario, incluidas la etiqueta <form>, la etiqueta <input>, la etiqueta <textarea> y la etiqueta <select>.

En el tutorial anterior discutimossobre el uso de etiquetas <form>, <input> y <textarea>. Bueno, en este tutorial, la etiqueta <select> junto con la etiqueta <option>, los atributos múltiples y las etiquetas optgroup en la etiqueta <select> y el atributo seleccionado en la etiqueta <option> se discuten en este tutorial. Para obtener más detalles sobre estas etiquetas y atributos, veamos el tutorial a continuación:

La etiqueta <select> y la etiqueta <option>

Esta etiqueta se usa para hacer menús olista de opciones Puede especificar el número de opciones que se mostrarán utilizando el atributo de tamaño. Al usar esta etiqueta, los usuarios pueden elegir una de varias opciones proporcionadas.

Las elecciones hechas a la etiqueta <select>escrito en la etiqueta <option>. La etiqueta <option> es una etiqueta que contiene una lista de opciones en forma de elementos que serán seleccionados por el usuario. Esta etiqueta comienza con la etiqueta de apertura <option> y termina con una etiqueta de cierre </option>. A continuación se muestra un ejemplo de escritura y uso de la etiqueta <select> en HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Select pada form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Bulan Lahir Anda :
<select name="bulanlahir">
<option value="Januari">Januari</option>
<option value="Februari">Februari</option>
<option value="Maret">Maret</option>
<option value="April">April</option>
<option value="Mei">Mei</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>

Después de ejecutar el código anterior en el navegador, aparecerá como se muestra a continuación:

La etiqueta <select> y la etiqueta <option> en el formulario HTML

El atributo de valor en el elemento de opción se convierte en el valor que se enviará al servidor cuando haga clic en el botón Enviar.

Múltiples atributos de la etiqueta <select>

Este atributo se usa para determinar quelos usuarios pueden seleccionar más de una opción entre varias opciones proporcionadas. Este atributo se usa en la etiqueta <select>. Usar múltiples atributos será más fácil si agrega el atributo de tamaño. Para seleccionar elementos disponibles, haga clic en los elementos mientras mantiene presionada la tecla Ctrl. A continuación se muestra un ejemplo de escritura y uso de múltiples atributos en HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Multiple</title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Buah Kesukaan Anda :<br>
<select name="namabuah" multiple>
<option value="Apel">Apel</option>
<option value="Manggis">Manggis</option>
<option value="Jeruk">Jeruk</option>
<option value="Nanas">Nanas</option>
<option value="Melon">Melon</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>

Después de ejecutar el código anterior en el navegador, aparecerá como se muestra a continuación:

Múltiples atributos de la etiqueta <select> en el formulario HTML

El atributo seleccionado en la etiqueta <option>

Este atributo se usa en la etiqueta <option> para que la etiquetaLa <opción> que tiene el atributo seleccionado mostrará la selección de etiqueta como el elemento seleccionado (selección predeterminada). En resumen, el atributo seleccionado se usa para determinar el elemento que se selecciona primero cuando la página se ha cargado. A continuación se muestra un ejemplo de escritura de código y uso de atributos seleccionados en HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Selected</title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Hewan Kesukaan Anda :<br>
<select name="namahewan">
<option value="Kucing">Kucing</option>
<option value="Ular">Ular</option>
<option value="Bebek" selected>Bebek</option>
<option value="Kambing">Kambing</option>
<option value="Kelinci">Kelinci</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>

Después de ejecutar el código anterior en el navegador, aparecerá como se muestra a continuación:

Optgroup tags y atributos de etiqueta

Esta etiqueta <outgroup> se usa para agruparalgunas opciones o elementos (elementos <option>) en la lista de selección. El elemento <optgroup> está dentro del elemento <select> y el elemento <option> está ubicado dentro del elemento <optgroup>. Dentro de esta etiqueta hay atributos de etiqueta que puede usar para etiquetar cada grupo con un nombre específico (denominación de grupo), donde los valores en este atributo de etiqueta son texto.

El siguiente es un ejemplo de escritura y uso de la etiqueta <optgroup> y el atributo de etiqueta en HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Optgroup</title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Kelas Anda :
<select>
<optgroup label="Sekolah Menengah Pertama">
<option>Kelas VII</option>
<option>Kelas VIII</option>
<option>Kelas IX</option>
</optgroup>
<optgroup label="Sekolah Menengah Atas">
<option>Kelas X</option>
<option>Kelas XI</option>
<option>Kelas XII</option>
</optgroup>
</select><br><br>
<input type="submit">
</form>
</body>
</html>

Cuando se ejecuta el código HTML, se ve en un navegador como este: