Location: Inicio > Tutoriales HTML > Formularios en HTML > Formularios en HTML (página 2)

Formularios en HTML (página 2)

Tabla de contenidos

Páginas:<123 4 >

Elementos de entrada

Opciones

Los autores pueden también dejar que sus visitantes elijan opciones preestablecidas de una lista. Esto puede lograrse usando uno de los tres controles siguientes, que pueden construir diferentes tipos de listas de opciones.

Casillas de verificación

Una casilla de verificación es una opción simple que puede tomar uno de dos valores: "marcado" ó "no marcado" ("checked" ó "unchecked"). Las casillas de verificación pueden ser agrupadas visualmente formando listas de opciones, pero cada una de ellas es tratada individualmente.

Este control es insertado mediante el tag HTML input con el valor "checkbox" en su atributo "type". Inicialmente, la casilla aparece sin marcar a menos que lo especifique de otra forma usando el atributo booleano (verdadero o false) "checked". Recuerda, que para lograr un código correcto en XHTML necesitas definir al atributo booleano con sus nombres como valores (por ejemplo, checked="checked").

Código

<form method="post" action="agente.php">
Selecciona tus intereses:<br />
<input name="cbipeliculas" type="checkbox" />Películas<br />
<input name="cbilibros" type="checkbox" checked="checked" />Libros<br />
<input name="cbiinternet" type="checkbox" />Internet
</form>

Vista

Selecciona tus intereses:
Películas
Libros
Internet

En este caso, el valor pasado será booleano y representará el estado de la opción (marcado o no marcado). Dependiendo del agente procesador puede ser "on/off", "checked/unchecked", "true/false", etc.

Botones radio

Los botones radio trabajan de la misma forma que las casillas de verificación con una pequeña diferencia: los botones radio que comparte el mismo nombre conforman un grupo de opciones donde el usuario no puede seleccionar más de una a la vez. Esto significa que cuando un usuario elige una opción, las demás son automáticamente deseleccionadas.

El valor inicial para el grupo depende del navegador (la mayorñia muestra todos los controles sin marcar). Esto puede ser cambiado usando el atributo booleano "checked".

Código

<form method="post" action="agente.php">
Selecciona tu actividad favorita:<br />
<input name="intereses" type="radio" value="rbipeliculas" />Películas<br />
<input name="intereses" type="radio" value="rbilibros" />Libros<br />
<input name="intereses" type="radio" value="rbiinternet" checked="checked" />Internet
</form>

Vista

Selecciona tu actividad favorita:
Películas
Libros
Internet

Para botones radio el valor pasado al agente procesador es el contenido del atributo "value" de la opción seleccionada, lo que significa que una lista con muchos botones radio solo pasará un valor.

Listas

Estas listas pueden ser construídas utilizando tres elementos: el elemento HTML select (contenedor principal), el elemento HTML option (opción simple) y el elemento HTML optgroup (grupo de opciones). El último elemento es el único prescindible para construir este tipo de listas.

Los controles de lista pueden ser usadas para recolectar información al igual que los botones radio (sólo una opción) o como casillas de verificación (múltiples opciones), dependiendo de la presencia del atributo booleano "multiple". Como en los controles anteriores, el valor inicial de los elementos HTML option puede ser establecido a "seleccionado" usando el atributo booleano "selected".

Código

<form method="post" action="agente.php">
Elije solo una opción, como en los botones radio:
<select name="entradalista">
<optgroup label="Entradas textuales">
<option>Entrada de línea</option>
<option selected="selected">Entrada de contraseña</option>
<option>Entrada multi-línea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
<br />
Elije tantas opciones como quieras, como con casillas de verificación (manteniendo presionada la tecla "Ctrl"):<br />
<select name="entradalista[]" multiple="multiple">
<optgroup label="Entradas textuales">
<option>Entrada de línea</option>
<option>Entrada de contraseña</option>
<option>Entrada multi-línea</option>
</optgroup>
<optgroup label="Opciones">
<option selected="selected">Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
</form>

Vista

Elije solo una opción, como en los botones radio:
Elije tantas opciones como quieras, como con casillas de verificación (manteniendo presionada la tecla "Ctrl"):

Para la primera lista sin el atributo "multiple", el valor pasado al agente procesador será la opción seleccionada, pero para el segundo ejemplo el valor pasado será un arreglo (array) con los valores de las opciones seleccionadas. Es por esto que, para listas con el atributo "multiple" presente, debes agregar los corchetes("[]") al final del nombre del tag HTML select. El valor individual pasado en ambos casos es el contenido del atributo "value" si el mismo está presente, y el contenido del elemento si no (de las opciones seleccionadas).

Páginas:<123 4 >