Curso de creación de sitios web - Lección 6 - Página 2
Controles Radio y Checkbox
Controles Submit e Image
Control Reset
Control File
Control Oculto (hidden)
Controles de Radio y Checkbox
Como ya comentamos anteriormente, Radio permitía mostrar un círculo seleccionable para poder marcarlo y realizar una selección entre varias posibilidades, pudiendo escoger tan solo una de ellas. (Al menos este es su uso mása común). Los atributos son:
Chequed: Marca por defecto el círculo o caja donde esté asignado.
Value: Valor que damos a nuestro Radio o Checkbox. Es muy importante ya que es el factor que lo distingue del resto de Radios o Checkboxes.
Name: Nombre que se le asigna a cada uno de los Radio o Checkbox
Ejemplo de Radio:
<P><I>Dinos el color que más te gusta:</I> </P>
<FORM>
<P><INPUT TYPE="radio" NAME="Color" VALUE="Rojo" CHECKED >Rojo
<P><INPUT TYPE="radio" NAME="Color" VALUE="Verde">Verde
<P><INPUT TYPE="radio" NAME="Color" VALUE="Azul">Azul
<P><INPUT TYPE="radio" NAME="Color" VALUE="Amarillo">Amarillo
</FORM>
Resultado:
Dinos el color que más te gusta:
Vemos que el que hemos definido para que esté marcado por defecto es el "Rojo" y que además, si pulsamos cualquier otra selección, dejará de estar marcado. Pruébalo.
Ejemplo de Checkbox:
<P><I>Dinos el color que más te gusta, puedes escoger varios:</I> </P>
<FORM>
<P><INPUT TYPE="checkbox" NAME="Color" VALUE="Rojo" CHECKED >Rojo
<P><INPUT TYPE="checkbox" NAME="Color" VALUE="Verde">Verde
<P><INPUT TYPE="checkbox" NAME="Color" VALUE="Azul">Azul
<P><INPUT TYPE="checkbox" NAME="Color" VALUE="Amarillo">Amarillo
</FORM>
Resultado:
Dinos el color que más te gusta, puedes escoger varios:
Con este ejemplo, comprobamos la diferencia entre los dos tipos de controles de selección.
¿Qué se envía?
Como ya dijimos cuando estudiamos las cajas de texto, al pulsar "Enter" o el botón de "Submit", enviamos la información contenida en la caja de texto. Pero en el caso de "Radio" o "Checkbox" lo que se envía es el "NAME" y el valor seleccionado.
En los ejemplos anteriores, si no hubieramos modificado nada, el rojo sería el color predefinido. Pues bien, si pudiéramos enviar esa información, quedaría definida por :
Estudiamos los atributos de estos dos controles juntos, ya que son o pueden ser complementarios.
Para enviar los datos de un formulario podemos usar un botón normal:
O bien crear nosotros nuestra propia imagen de envío, que podría dar un aspecto más profesional. La imagen podría ser esta:
y además, podríamos definir otros atributos propios de las imágenes (ya estudiados) como es su tamaño, alineación, etc...
Control de Reset
Como ya dijimos, se trata de un botón que borra lo que hemos insertado en nuestro formulario. La creación de este botón es muy sencilla, tan solo tenemos que insertar lo siguiente:
<INPUT TYPE="reset" VALUE="Borrar" >
Esto provocaría lo siguiente. Imaginemos que tenemos un formulario con una caja de texto y varias selecciones:
Prueba a escribir algo en la caja de texto y a realizar alguna selección de otro color que no sea el rojo. A continuación pulsa el botón "BORRAR". Verás el efecto inmediatamente.
Controles de tipo File
Este tipo de control, muestra una caja de texto y un botón por defecto, que nos permite navegar por nuestro disco duro en busca de un determinado archivo. La caja de texto mostrará la ubicación del mismo.
El uso que daremos a este tipo de control es el de poder transmitir datos en forma de archivos por Internet o una red.
El código a incluir sería el siguiente:
<INPUT TYPE="file">
Resultado:
Como veremos más adelante, el uso de este tipo de control necesita la inclusión de un atributo dentro de la etiqueta inicial Form, para que funcione correctamente.
Control de tipo Oculto (Campos ocultos)
Los campos ocultos de un formulario, tal y como indica su nombre, no muestran ningún tipo de caja, texto, etc. en nuestro formulario, si bien son muy importantes porque definen las características de nuestro formulario. Estas características se enviarán intrínsecamente con los demás datos, que serán procesados por el servidor correspondiente.
Para incluir un "campo oculto", se usa la siguiente nomenclatura:
<INPUT TYPE="hidden" (atributos)>
Los atributos son los más comunes, es decir, VALUE y NAME, que ya hemos estudiado. Por ejemplo, imaginemos que nuestro formulario se envía por correo electrónico y queremos que dicho correo nos llegue con el Asunto: Enviado desde mi sitio web. Pues bien, no tendríamos más que escribir los siguiente:
<INPUT TYPE ="hidden" NAME="asunto" value="Enviado desde mi sitio web">
En este caso, el Servidor que procesará la información, debería tener un script o un programa que al leer "asunto" sepa que eso es lo que tiene que "escribir" en el asunto al enviar el correo electrónico.
|
Estás en: 