HTML ORIENTADO A FORMULARIOS

Los formularios interactivos permiten a los autores de pginas Web

poner elementos especiales llamados controles (casilla de verificacin
(checkbox), radiobotones (radio botones), mens, etc) y rtulos
(labels) en esos controles. Los usuarios normalmente son los que
completan estos formularios modificando sus controles introduciendo
texto, seleccionando objetos de un men, etc.
Todo esto con la finalidad de enviar el formulario a un agente para que
lo procese por ejemplo a un servidor web, a un servidor de correo.
- La etiqueta FORM
Los formularios estn delimitados con la etiqueta <FORM> ...
</FORM>, que permite reunir varios elementos de formulario, como
botones y casillas de texto y que debe poseer los siguientes atributos:
METHOD indica cmo se enviarn las respuestas.
"POST" es el valor que enva los datos al agente de procesamiento
almacenndolos en el cuerpo del formulario, en tanto que "GET"
enva los datos agregndolos a la direccin URL.
ACTION indica la direccin a la que se enviar la informacin (un
script
CGI
o
direccin
de
correo
electrnico
(mail
to:direccin_de_correo_e@equipo).
Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica
cmo se codifican los datos del formulario. De cualquier forma, esto
no necesita especificarse, ya que el
valor predeterminado
(application/x-www-form-url-encoded) es el
nico valor vlido. El
atributo opcional ACCEPT se usa para establecer tipos MIME para los
datos que el formulario puede enviar.
Esta es la sintaxis para la etiqueta FORM:
<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-wwwform-url encoded"> ... </FORM>
Aqu hay algunos ejemplos de las etiquetas FORM:
<FORM
METHOD=POST
ACTION="mail
to:webmaster@yourlive.net">
<FORM
METHOD=GET
ACTION="http://www.yourlive.net/cgibin/script.cgi">

Dentro de la etiqueta FORM

La etiqueta FORM acta como una especie de contenedor para
almacenar elementos que permiten al usuario seleccionar o introducir
datos. Todos los datos se enviarn a la direccin URL indicada en el
atributo ACTION de la etiqueta FORM, por el mtodo indicado en el
atributo METHOD.
- CONTROLES
Los usuarios interaccionan con los formularios a travs de los llamados
controles. Cada control tiene tanto un valor inicial como un valor
actual, que son ambos cadenas de caracteres.
Se puede insertar cualquier elemento HTML en una etiqueta FORM
(como texto, botones, tablas y enlaces), pero los elementos
interactivos son los ms interesantes. Estos elementos interactivos
son:
Botones
Podemos crear tres tipos de botones:
Botones de envo (submit buttons): Cuando se activa un botn
de envo este enva un formulario. Un formulario puede contener
ms de un botn de envo. <input type="submit" name="buscar"
value="Buscar" />

Botones de reinicializacin (reset buttons): Cuando se activa,

un botn de reinicializacin reinicializa todos los controles a
sus valores iniciales.
<input type="reset" name="limpiar"
value="Borrar datos del formulario" />

Botones pulsadores (push buttons): Los botones pulsadores no

tienen un comportamiento por defecto. Cada botn pulsador
puede tener asociados scripts en el lado del cliente a travs del
atributo event del elemento. Cuando ocurre un evento (p.ej., el
usuario aprieta el botn, lo suelta, etc.), se acciona el script
asociado.
Ejemplo sencillo de un formulario:

Casillas de verificacin (checkbox)

Las casillas de verificacin (y los radiobotones) son interruptores
de encendido/apagado que pueden ser cambiados por el usuario.
Una casilla de verificacin est "marcada" cuando se establece el
atributo checked del elemento de control. Cuando se enva un
formulario, solamente pueden tener xito los controles de casillas
de verificacin que estn marcadas.
Varias casillas de verificacin de un formulario pueden compartir
el mismo nombre de control. As, por ejemplo, las casillas de
verificacin permiten a los usuarios elegir varios valores para la
misma propiedad. Para crear un control de casilla de verificacin
se utiliza el elemento INPUT.
Ejemplo: (type=checkbox)

Puestos de trabajo buscados <br>

<input name="puesto_directivo" type="checkbox" value="direccion"/>
Direccin
<input name="puesto_tecnico" type="checkbox" value="tecnico"/>
Tcnico
<input name="puesto_empleado" type="checkbox" value="empleado"/>
Empleado

Radiobotones (radio buttons)

Los radiobotones son como las casillas de verificacin, excepto en
que cuando varios comparten el mismo nombre de control, son
mutuamente exclusivos: cuando uno est "encendido", todos los
dems con el mismo nombre se "apagan". Para crear un control
de radio botn se usa el elemento INPUT.
Si ninguno de los radiobotones de un conjunto que comparten el
mismo nombre tiene un valor inicial de "encendido", el
comportamiento del agente de usuario al elegir cul es el control
que est inicialmente "encendido" queda sin definir.
En cualquier momento, exactamente uno de los radiobotones de
un conjunto est marcado. Si ninguno de los elementos <INPUT>
de un conjunto de radiobotones especifica 'CHECKED', entonces el
agente de usuario debe marcar el primer radiobotn del conjunto
inicialmente.
Al diferir los comportamientos de los agentes de usuario,
deberamos asegurarnos de que en cada conjunto de
radiobotones hay uno que inicialmente est "encendido".
Ejemplo: (type=radio)

Sexo <br/>
<input type="radio" name="sexo" value="hombre"
checked="checked"/>Hombre

<input type="radio" name="sexo" value="mujer" /> Mujer

Mens (mens)
Los mens ofrecen al usuario opciones entre las cuales elegir. El
elemento SELECT crea un men, en combinacin con los
elementos OPTGROUP y OPTION.
Entrada de texto (text input)
Los autores pueden crear dos tipos de controles que permiten a
los usuarios introducir textos. El elemento INPUT crea un control
de entrada de una sola lnea, y el elemento TEXTAREA crea un
control de entrada de varias lneas. En ambos casos, el texto
introducido se convierte en el valor actual del control.
<input type="text" name="nombre" value="" />

Seleccin de ficheros (file select)

Este tipo de control permite al usuario elegir ficheros de modo
que sus contenidos puedan ser enviados con un formulario. Se
usa el elemento INPUT para crear un control de seleccin de
ficheros.
<input type="file" name="adjunto" />

Controles ocultos (hidden controls)

Podemos crear controles que no se muestran pero cuyos valores
se envan con un formulario. Usamos normalmente este tipo de
controles para almacenar informacin entre intercambios
cliente/servidor que de otro modo se perdera debido a la
naturaleza no persistente del protocolo HTTP. Para crear un
control oculto se usa el elemento INPUT.
<input type="hidden" name="url_previa" value="/articulo/primero.html"/>

- Envo de datos
Cuando se enva un formulario (haciendo clic en el botn de envo), los
datos del formulario se envan a un script CGI bajo la forma de pares
nombre/valor, es decir conjuntos de datos representados por el
nombre del elemento formulario, un signo igual ("=") y luego el valor

asociado. Estos pares nombre/valor se separan unos de otros mediante

el smbolo de unin ("&"). Por lo tanto, los datos que se envan al
script se vern as:
campo1=valor1&field2;=valor2&field3;=valor3
Con el mtodo GET (enviar los datos mediante una direccin URL), la
URL ser una cadena como la siguiente:
http://ourweb.net/cgi
campo1=valor1&field2;=valor2

-bin/script.cgi

- La etiqueta INPUT
La etiqueta INPUT es una etiqueta esencial sino la ms importante
para los formularios, ya que se usa para crear muchos elementos
interactivos. La sintaxis de esta etiqueta es la siguiente:
<input type="nombre_del_campo" name="Nombre_del-elemento"
value="valor_predeterminado"/>

El atributo name es esencial, ya que permite al script reconocer qu

campo est asociado con un par nombre/valor, lo que significa que el
nombre del campo estar seguido de un signo igual ("=") seguido de
un valor que el usuario introdujo, o si el usuario no introdujo ningn
valor, por el valor predeterminado de la etiqueta value.
El atributo type se usa para especificar qu tipo de elemento se
representa con la etiqueta INPUT. Estos son los valores posibles:
checkbox

Hidden

File

Image

Las casillas de eleccin pueden adoptar uno de

dos estados: checked (seleccionado) o unchecked
(no seleccionado)
Este campo, que el navegador no muestra, es para
definir una configuracin nica que se pasara al script
como par nombre/valor
Un campo que permite al usuario especificar una ruta de
archivo que lleva al archivo que se enviar con el
formulario. Los tipos de archivos que se pueden enviar
deben especificarse el atributo ACCEPT de la etiqueta
FORM
Un botn de envio personalizado que aparece cuando se
ubica una imagen en la ubicacin definida por el
atributo SRC

Password

Radio

Reset

Submit
Text

Una casilla de texto donde los caracteres escritos

aparecen como asteriscos para camuflar el texto de
entrada.
Un botn que permite al usuario elegir entre varias
opciones. Cada uno de estos botones debe tener el
mismo atributo name. El par nombre/valor del botn
radio seleccionado se pasara al script. Al aplicar el
atributo checked por uno de estos botones de definir
como seleccionado de forma predeterminada
Un botn de restauracin para quitar todos los
elementos introducidos en el formulario y restablecer a
sus valores predeterminados
Un botn de envi para enviar el formulario. El texto en
el botn puede definirse usando el atributo value
Una casilla de texto para escribir una lnea de texto. El
tamao de la casilla puede definirse usando el atributo
size y la extensin mxima del texto con el atributo
maxlength

- La etiqueta TEXTAREA
La etiqueta TEXTAREA se usa para definir un cuadro de texto ms
grande que la lnea simple propuesta por la etiqueta INPUT. Esta
etiqueta tiene los siguientes atributos:
cols: representa el nmero de caracteres que puede contener un lnea
rows: representa el nmero de lneas
name: representa el nombre asociado con el cuadro de texto, que
permite su identificacin en el par nombre/valor.
readonly: impide que el usuario modifique el texto predeterminado
en el campo.
value: representa el valor predeterminado que se enviar al script si
el usuario no ha escrito nada en el cuadro de texto
- La etiqueta SELECT
La etiqueta SELECT sirve para crear una lista desplegable de
elementos (especificados por las etiquetas OPTION dentro de ella). Los
atributos de esta etiqueta son:
name: representa el nombre asociado con la casilla de texto, que
permite su identificacin en el par nombre/valor.
disabled: crea una lista desactivada, que aparece atenuada
size: representa el nmero de lneas de la lista (este valor puede ser
ms grande que el nmero de elementos real es de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista

FORMULARIOS AVANZADOS
Utilizando solamente las etiquetas <form> y <input> es posible
disear la mayora de formularios de las aplicaciones web. Sin
embargo HTML define algunos elementos adicionales para mejorar la
estructura de los formularios creados.

Ejemplo de uso
de las etiquetas
fieldset y legend
La etiqueta <fieldset> agrupa campos del formulario y la
etiqueta <legend>asigna un nombre a cada grupo.
<FIELDSET>