Otros elementos de formulario

Explicamos la sintaxis y el funcionamiento de las cajas y listas de selección, casillas de verificación y botones de radio.
En el Manual de HTML de DesarrolloWeb.com ya hemos publicado artículos sobre la creación de formularios y sobre los campos de texto en todas sus modalidades. Seguramente hayamos percibido que los textos son un manera muy practica de hacernos llegar la información del navegante. No obstante, en muchos casos, permitir al usuario que escriba cualquier texto permite demasiada libertad y puede que la información que éste escriba no sea la que nosotros estamos necesitando. Por otra parte, para determinados casos, los textos libres son difícilmente adaptables a programás que puedan procesarlos debidamente. Es por ello que, en determinados casos, puede resultar más efectivo proponer una elección al navegante a partir del planteamiento de una serie de opciones disponibles y definidas por nosotros.

Por ejemplo, pensemos que queremos que el usuario indique su país de residencia. En ese caso podríamos ofrecer una lista de países para que seleccione el que sea. Este mismo caso se puede aplicar a gran variedad de informaciones, como el tipo de tarjeta de crédito para un pago, la puntuación que da a un recurso, si quiere recibir o no un boletín de novedades, etc...

Este tipo de opciones predefinidas por nosotros pueden ser expresadas por medio de diferentes campos de formulario. Veamos a continuación cuales son:

Listas de opciones

Las listas de opciones son ese tipo de menús desplegables que nos permiten elegir una (o varias) de las múltiples opciones que nos proponen. Para construirlas emplearemos una etiqueta <select>, con su respectivo cierre:

Como para los casos ya vistos, dentro de esta etiqueta definiremos su nombre por medio del atributo name. Cada opción será incluida en una línea precedida de la etiqueta <option>.

Podemos ver, a partir de estas directivas, la forma más típica y sencilla de esta etiqueta:

<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>

El resultado es:

Esta estructura puede verse modificada principalmente a partir de otros dos atributos:

size
Indica el número de valores mostrados a la vez en la lista. Lo típico es que no se incluya ningún valor en el atributo size, en ese caso tendremos un campo de opciones desplegable, pero si indicamos size aparecerá un campo donde veremos las opciones definidas por size y el resto podrán ser vistos por medio de la barra lateral de desplazamiento.

multiple
Permite la selección de más varios elementos de la lista. La elección de más de un elemento se hace como con el explorador de Windows, a partir de las teclas ctrl o mayúsculas (la flecha hacia arriba, también llamada shift). Este atributo se expresa sin valor alguno, es decir, no se utiliza con el igual: simplemente se pone para conseguir el efecto, o no se pone si queremos una lista desplegable común.

Consejo: Si es posible, no uses multiple

No recomendamos especialmente la puesta en practica de esta opción ya que el manejo de las teclas ctrl o shift para elegir varias opciones puede ser desconocido para el navegante. Evidentemente, siempre cabe la posibilidad de explicarle como funciona aunque no dejara de ser una complicación para más para el visitante.

Veamos cual es el efecto producido por estos dos atributos cambiando la línea:
<select name="estacion">

por:
<select name="estacion" size="3" multiple>

La lista quedara de esta forma:

La etiqueta <option> puede asimismo ser matizada por medio de otros atributos

selected
Del mismo modo que multiple, este atributo no toma ningún valor sino que simplemente indica que la opción que lo presenta esta elegida por defecto.

Así, si cambiamos la línea del código anterior:
<option>Otoño</option>

por:
<option selected>Otoño</option>

El resultado será:

value
Define el valor de la opción que será enviado al programa o correo electrónico si el usuario elige esa opción. Este atributo puede resultar muy útil si el formulario es enviado a un programa para su procesamiento, puesto que a cada opción se le puede asociar un número o letra, lo cual es más fácilmente manipulable que una palabra o texto. podríamos así escribir líneas del tipo:

<option value="1">Primavera</option>

De este modo, si el usuario elige primavera, lo que le llegara al programa (o correo) es una variable llamada estacion que tendrá com valor 1. En el correo electrónico recibiríamos:

estacion=1

Botones de radio

Existe otra alternativa para plantear una elección, en este caso, obligamos al internauta a elegir únicamente una de las opciones que se le proponen.

La etiqueta empleada en este caso es <input> en la cual tendremos el atributo type ha de tomar el valor radio. Veamos un ejemplo:

<input type="radio" name="estacion" value="1">Primavera
<br>
<input type="radio" name="estacion" value="2">Verano
<br>
<input type="radio" name="estacion" value="3">Otoño
<br>
<input type="radio" name="estacion" value="4">Invierno

Nota: Hay que fijarse que la etiqueta <input type="radio"> sólo coloca la casilla pinchable en la página. Los textos que aparecen al lado, así como los saltos de línea los colocamos con el correspondiente texto en el código de la página y las etiquetas HTML que necesitemos.

El resultado es el siguiente:

Primavera
Verano
Otoño
Invierno

Como puede verse, a cada una de las opciones se le atribuye una etiqueta input dentro de la cual asignamos el mismo nombre (name) para todas las opciones y un valor (value) distinto. Si el usuario elige supuestamente Otoño, recibiremos en nuestro correo una línea tal que esta:

estacion=3

Cabe señalar que es posible preseleccionar por defecto una de las opciones. Esto puede ser conseguido por medio del atributo checked:

<input type="radio" name="estacion" value="2" checked>Verano

Veamos el efecto:

Primavera
Verano
Otoño
Invierno

Cajas de validación

Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic sobre la caja en cuestión. La sintaxis utilizada es muy similar a las vistas anteriormente:

<input type="checkbox" name="paella">Me gusta la paella

El efecto:

Me gusta la paella

La única diferencia fundamental es el valor adoptado por el atributo type.

Del mismo modo que para los botones de radio, podemos activar la caja por medio del atributo checked.

El tipo de información que llegara a nuestro correo (o al programa) será del tipo:

paella=on (u off dependiendo si ha sido activada o no)

Autor

Rubén Alvarez

Redactor de DesarrolloWeb.com

Compartir

Comentarios

Luis Alberto D'Ardis

26/10/2002
Hola a todos desde Argentina, la explicación me parece fantastica y super detallada de hecho yo al lado de la persona que redactó este articulo soy un aprendíz, pero como aprendíz me topé con un error en el formulario que yo estaba redactando en mi pc y no entendía a que se debía y sería bueno comentarlo para que no se encuentren con el mismo error, es el siguiente :

En el elemento de formulario radio si por error preferimos usar diferentes nombres en el atributo name y alguno de los componentes radio se encuentra acompañado por el atributo checked nos vamos a encontrar con la sorpresa de que a la hora de seleccionar las diferentes opciones de caracter radio todas ellas quedarán marcadas. por eso en un grupo de elementos radio es preferible usar un mismo nombre para todas. Desde ya un 10 para este site.

Luis Alberto D'Ardis Buenos Aires Capital Federal Argentina.

Knopfler

11/7/2004
En primer lugar, y lo siento si suena típico, pero Desarrollo Web está siendo una gran ayuda para mí, porque antes de descubrir esta página yo no sabía nada de HTML, lo único que sabía de programación era Dreamweaver. Querría sugeriros, además, que os diéseis más a conocer.
Mi duda es si en las Listas de Opciones, en los Botones de Radio y en las Cajas de Validación es necesario usar la etiqueta <form>.
Muchas gracias por todo, y solo os pido que no os convirtáis en una página de pago, ni pongáis de pago vuestro contenido, porque en ese caso muchos no podríamos aprovechar vuestros conocimientos.
Saludos,
Knopfler

Rodrigo

24/7/2005
Creo que no hay error en el articulo, sino en la interpretación que le diste, te pongo un ejemplo, ¿Qué pasa si en una página quieres poner mas de una consulta, en la que tendrás mas de un resultado y obviamente necesitas mas de un conjunto de objetos "radio". Necesitas nombrar mas de un Radio. Si , jústamente, por cada objeto con multiples opciones tienes que usar el mismo nombre.

Luis Alberto D'Ardis

31/10/2005
Estimado Rodrigo...

No se de donde sacas que haya dicho algo sobre un error en el artículo, me parece que lees apurado, se lee bien clarito.. el error lo he cometido yo mismito..... en el año....... a sí ya lo veo, 2002. salu2.

Comentario de Rodrigo 24/7/05
Creo que no hay error en el articulo, sino en la interpretación que le diste, te pongo un ejemplo, ¿Qué pasa si en una página quieres poner mas de una consulta, en la que tendrás mas de un resultado y obviamente necesitas mas de un conjunto de objetos "radio". Necesitas nombrar mas de un Radio. Si , jústamente, por cada objeto con multiples opciones tienes que usar el mismo nombre.

Genaro

13/12/2005
me podrian ayudar a realizar una encuesta con option button en una pagina y que muestre el resultado de la encuesta en numeros, graficos y porcentajes?...gracias...saludos

Gloria Ferrero

14/4/2006
Felicitaciones, DesarrolloWeb !!!!
Soy estudiante de la Carrera de Analista de Sistemas. Estoy viendo una materia que es Programación de Páginas y ustedes siempre amplían los conceptos de los cuales tengo dudas, de una manera muy didáctica, simple y entendible.
MUCHAS GRACIAS !!!!!
Gloria
SACANTA - CÓRDOBA - ARGENTINA

Evaristo Castañeda

24/7/2006
Tengo este problema. de una base de datos tomo un valor y este no se muestra completo en el input. y en el text area si. Sera que el input tiene un limite de caracteres para mostrar.

carlos

28/10/2007
solo queria saber si hay forma de tener value en <input type="checkbox">
como por ejemplo:
<input type="checkbox" name="interes" value="cine">cine

fancisco

12/3/2008
ya tengo hecho el formulario pero como le hago para enviarlo a una direccion de correo electronico

sdf

20/12/2008
sdfsdf

Ana

13/2/2009
Hola a todos,
Esto es una caca!!!!!

ana

13/2/2009
vaia xustilla de tema
me aburro!!!!!

Marco

10/3/2010
Lista de opciones
estoy apenas haciendo mi sitio web y como mi sitio web es de una escuela de idiomas , mi vision poder que se me vea la informacion en 4 idiomas utilizando la "lista de Opciones" ya tengo la paginas echas , ya incertada la lista de opciones solamente me falta poder como quien dice darle utilidad a la lista ya que solamente me cirve de diseño para que se vea mas bonita ... xD si e pueden ayudar

Juan

28/4/2010
Una pregunta
Ya se que esto no viene muxo a cuento en un tutorial pero veras os cuento lo que intento hacer aver si alguien me puede ayudar

estoy intentando que una variable me salga en un cuadro de texto de un formulario el error me lo da aqui document.form.b.value=$conectado;
uso php y javascript os dejo aqui el codigo si alguien sabe algo por favor envienme un mail a Juan_Gp_14@hotmail.com
muxas gracias


<html>
<head>
<?php
$conectado=" ";
function variables() {
$cmd=shell_exec("ping -n 1 -w 1" + document.form.a.value);
$cmd=explode(",",$cmd);
$cmd=$cmd[1];
if ($cmd==" recibidos = 1") {
$conectado="online";
document.form.b.value=$conectado;
}
else {
$conectado="offline";
document.form.b.value=$conectado;
}
}
?>
</head>
<body>
<form name="form">
Introduzca IP: <input type="text" name="a"><br>
Estado: <input type="text" name="b"><br>
<input type="button" name="envio" value="Cambiar IP" onClick=variables();>
</form>
</body>
</html>