Botones de Opción

Cuando quieras mostrar al visitante una lista de valores de entre los que tiene que elegir uno solo, tienes que usar botones de opción. Dentro del código Html que define este botón de opción tendrás que indicar cada uno de esos valores, claro.

Es importante que recuerdes que con este tipo de formulario el visitante SOLO puede escoger uno de los valores, es decir, es imposible activar dos o más valores. Si lo que quieres es dar la opción de que el visitante pueda seleccionar más de una de las opciones, tendrás que buscar otro modo, que explicaremos más adelante.

Veamos el código de un botón de opción de ejemplo para verlo más claro:

<INPUT type="radio" name="mibotondeopcion" checked value="1">Estudiante<br />
<INPUT type="radio" name="mibotondeopcion" value="2">Astronauta<br />
<INPUT type="radio" name="mibotondeopcion" value="3">Médico<br />
<INPUT type="radio" name="mibotondeopcion" value="4">Webmaster<br>

Las características de los botones de opción son las siguientes:

- Dentro de type hay que indicar "radio" que significa botón de opción (no, no es para escuchar música...)

- Todos han de tener el mismo valor dentro de name para que el navegador sepa que todas estas líneas corresponden a opciones de ese botón.

- checked. Esto se coloca solamente en una de las líneas, en la que tú quieras pero solo en una, pues indica la opción que aparecerá activada por defecto. Si no lo indicas en ninguna no aparece ninguna de esas opciones marcada de antemano. Es opcional.

- Dentro de las comillas de value indicas el valor que quieres que tenga esa opción. Puede ser un número o el texto de esa opción. Está claro que deberian ser distintos esos valores en cada opción.

- El texto que hay antes de <br> es el texto que aparece en el navegador Puedes escribir lo que quieras que el visitante vea como opción, pero el valor que recogerás del formulario una vez que se envíe será el que hay dentro de value, no este.

- Finalmente tenemos la etiqueta Html <br> que como sabes sirve para bajar una línea. La ponemos para que no aparezcan todas las opciones pegadas una tras otra. Esto es opcional y lo puedes hacer de cualquier otro modo, a tu gusto.

El código que te he mostrado arriba para los botones de opción mostraría esto de abajo:

Estudiante
Astronauta
Médico
Webmaster

Fíjate como la opción Estudiante aparece ya marcada por defecto. Esto es porque hemos puesto checked en esa línea.