Unidad 8. Formularios (XV)

8.26. Etiquetas <select> y <option>

Esta etiqueta sirve para crear listas desplegables. Entre la etiqueta de apertura <select> y la de cierre </select> podemos utilizar la etiqueta <option>, </option> para crear las opciones de la lista desplegable. La etiqueta select tiene el atributo size para indicar cuántos elementos de la lista se muestran inicialmente, por defecto es uno. Por defecto, sólo se puede seleccionar un elemento de la lista, pero si aparece el atributo multiple="multiple", se podrán seleccionar más de un elemento.

En cada elemento de la lista definido con option podemos añadir el atributo value para indicar el valor que se enviará, si no lo indicamos se enviará el texto de la opción. Este texto se indica entre <option> y </option>. Es bastante común utilizar un código para cada opción (mediante el atributo value), en lugar de enviar el texto que suele ser más largo y puede llevar acentos que luego suelen dar problemas. Si queremos que un valor aparezca seleccionado utilizaremos el atributo selected.

Por ejemplo:

<select name="pais">
  <option value"es" > España</option>
  <option value"mx" selected="selected"> México</option>
  <option value"co"> Colombia</option>
</select>

Puesto que el usuario puede pulsar el botón enviar sin fijarse bien qué opción está enviando, suele ser útil colocar una opción informativa en primera posición para forzar al usuario que realmente elija una opción de forma explícita, como vamos a ver en el siguiente punto.

8.27. Etiqueta <optgroup>

La etiqueta optgroup sirve para englobar un conjunto de opciones y darles un nombre informativo con el atributo label. La etiqueta optgroup se utiliza dentro de la etiqueta select . El atributo disabled hace que las opciones queden desactivadas, aunque pueden verse en color atenuado.

Por ejemplo:

<select name="pais" size="1">
  <option value="xx" > Elija un pais ...</option>
<optgroup label="América">
  <option value="ar"> Argentina</option>
  <option value"mx"> México</option>
  <option value"co"> Colombia</option>
</optgroup>
<optgroup label="Europa" disabled>
  <option value="es"> España</option>
  <option value="fr"> Francia</option>
  <option value="it"> Italia</option>
</optgroup>
</select>

 Cursos Informática Gratuitos