Formularios en HTML

Gua prctica de como disear los formularios HTML para tu sitio.

Los formularios
Los formularios son usados para que el usuario ingrese datos.

Esos datos son enviados a un documento, que se encuentra en un servidor, para que
los procese (por ej., a un servidor web, a un servidor de email, etc.).

La etiqueta form
La etiqueta <form> se utiliza para definir un formulario.
El atributo action es obligatorio y nos indica el documento que procesar los datos del
formulario enviado.
Tambin contamos con el atributo method que nos define el mtodo por el cual se
enviarn los datos del usuario al servidor.
Sintaxis
<form action="URL" method="valor">
...
</form>

La etiqueta input
Nos define el registro donde el usuario puede ingresar los datos.
Los usuarios interaccionan con los formularios a travs de las llamados controles.
Tipos de controles:
Botones (buttons)
Casillas de verificacin (checkboxes)
Radiobotones (radio buttons)
Menes (menus)
Entrada de texto (text input)
Seleccin de ficheros (file select)
Controles ocultos (hidden controls)
Controles tipo objeto (object controls)
El atributo type especifica el tipo de control a crear.
Sintaxis
</form>
<input type="control" atributo="valor">
</form>
El control "text"
Crea un control que nos permite ingresar un texto en una lnea.
Ejemplo

Cdigo
<form action="datos.php" method="get">
Nombre: <input type="text" name="nombre">
Apellido: <input type="text" name="apellido">
</form>
Resultado
Nombre:
Apellido:

Nota: la propiedad name le asigna un nombre al elemento que luego puede ser usado en scripts
o en hojas de estilo
El control "radio"
Se usa cuando queremos que el usuario elija una sola opcin de entre una serie de
posibilidades.
Ejemplo

Cdigo
<form action="edades.asp" method="post">
Edad?
<input type="radio" name="edad" value="menor">menor de 17
<input type="radio" name="edad" value="adulto">entre 18 y 60
<input type="radio" name="edad" value="mayor">mayor de 61
</form>
Resultado
Edad?
menor de 17
entre 18 y 60
mayor de 61

Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de radio.
La propiedad value asigna un valor al elemento que ser utilizado por el documento que
procese el formulario.
El control "checkbox"
Permite al usuario elegir varias opciones entre todas las posibilidades.
Ejemplo

Cdigo
<form action="hobbie.php" method="get">
Pasatiempos?
<input type="checkbox" name="pasa" value="tv">TV
<input type="checkbox" name="pasa" value="libros">Libros
<input type="checkbox" name="pasa" value="musica">Msica
<input type="checkbox" name="pasa" value="otros">Otros
Resultado
Pasatiempos?
TV
Libros
Msica
</form>
Otros

Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de checkbox.
La propiedad value asigna un valor al elemento que ser utilizado por el documento que
procese el formulario.
El control "password"
Funciona igual que text, pero el texto introducido se presenta mediante una serie de
puntitos. Es utilizado generalmente para ingresar contraseas.
Ejemplo

Cdigo
<form action="verificacion.php" method="post">
Nombre: <input type="text" name="nombre">
Password: <input type="password" name="pass">
</form>
Resultado
Nombre:
Password:

El control "submit" y el control "reset"
El control submit es el botn de envio de datos del formulario y el control reset es el
botn de reinicializacin. Al ser pulsado reinicializa todos los controles a sus valores
iniciales.
Ejemplo

Cdigo
<form action="datos_personales.php" method="post">
Nombre: <input type="text" name="nombre">
Contrasea: <input type="password"
name="secreto">
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>
Resultado
Nombre:
Contrasea:
Enviar

Borrar


Nota: el valor de la propiedad value define el texto dentro del botn.
El control "file"
El control file nos permite enviar archivos por medio de un formulario.
Ejemplo

Cdigo
<form action="archivo.php" method="post">
Ingrese la foto: <input type="file" name="foto">
</form>
Resultado
Ingrese la foto:

El control "hidden"
El control hidden nos permite enviar informacin oculta a los ojos del usuario.
Ejemplo

Cdigo
<form action="oculto.php" method="post">
Nombre: <input type="text" name="nombre">
Contrasea: <input type="password" name="contra">
<input type="hidden" value="cookie">
</form>
Resultado
Nombre:
Contrasea:

El control "image"
El control image nos permite utilizar una imagen personalizada como botn de un
formulario.
Ejemplo

Cdigo
<form action="archivo.php" method="post">
Nombre: <input type="text" name="nombre">
Contrasea: <input type="password" name="contra">
<input type="image" src="/enviar.jpg">
</form>
Resultado
Nombre:
Contrasea:



Las etiquetas select y option
La etiqueta <select> es usada para crear un men desplegable.
Cada opcin ofrecida por el men se representa con la etiqueta <option>
Ejemplo

Cdigo
<form action="continentes.php" method="get">
<select name="continente">
<option value="america">Amrica</option>
<option value="asia">Asia</option>
<option value="europa">Europa</option>
<option value="oceania">Oceana</option>
<option value="africa">Africa</option>
</select>
</form>
Resultado



La etiqueta textarea
Se usa para crear un control de entrada de texto multilnea.
Los atributo rows y cols nos indican la cantidad de filas y columnas que tendr el
recuadro del rea de texto.
Ejemplo

Cdigo
<form action="texto.php" method="post">
<textarea name="eltexto" rows="5" cols="30">
Aqu podemos ingresar un texto introductorio si lo
deseamos.
</textarea>
</form>
Resultado



Etiquetas y atributos de los formularios

Etiquetas Atributos Valor Descripcin Ej
<form> Define un formulario para el ingreso de
datos.

action
Obligatorio
URL Especifica un archivo procesador del
formularios.

accept Lista de tipos de
contenido
Especifica una lista de tipos de
contenido separados por comas, que
un servidor procesador de formularios
manejar correctamente.

accept-charset Lista de
codificacin de
caracteres
Especifica la lista de codificacin de
caracteres para los datos introducidos
que son aceptados por el servidor que
procesa este formulario.

enctype tipo de contenido Especifica el tipo de contenido usado
para enviar el formulario al servidor.

method Especifica que mtodo HTTP se usar
para enviar el conjunto de datos del
formulario.

get Debera usarse cuando los datos del
formulario no tienen efectos
secundarios.

post Debera usarse cuando el formulario
causa efectos secundarios(p.ej.,
subscripcin a un servicio o modificar
una base de datos.

name cdata Da nombre al elemento de modo que
se pueda hacer referencia a l desde
hojas de estilos o scripts.

target _blank El URL se abrir es una nueva ventana.

_self El URL se abrir en el mismo frame
donde fue apretado.

_parent El URL se abrir en el frameset padre.

_top El URL se abrir en una ventana de
tamao completo.

<input> Define el tipo de control de entrada.
accept Lista de tipos de
contenido
Especifica una lista de tipos de
contenido separados por comas, que
un servidor procesador de formularios
manejar correctamente.
Nota: Usar solo con type="file".

align left Define el alineamiento del texto
siguiente a la imagen.
Nota: Usar solo con type="image".

right

top
texttop
middle
absmiddle
baseline
bottom
absbottom
alt texto Define un texto alternativo para la
imagen.
Nota: Usar solo con type="imagen".

checked Especifica que el botn esta
marcado("on").
Nota: Usar solo con type="radio" o
type="checkbox".

disabled Deshabilita el control para la entrada
de datos por parte del usuario.
Nota: No debe usarse con
type="hidden".

maxlength nmero Nmero mximo de caracteres que
puede introducir el usuario.
Nota: Usar solo con type="text" o
type="password".

name nombre de
control
Asigna el nombre de control.
Nota: Este atributo es requerido para
type="button", type="checkbox",
type="file", type="hidden",
type="image", type="password",
type="text", type="radio".

readonly Indica que el valor no puede ser
modificado por el usuario .
Nota: Usar solo con type="text".

size nmero de
caracteres
Define el tamao del elemento input.
Nota: No debe usarse con
type="hidden".

src URL Define el URL de la imagen a mostrar.
Nota: Usar solo con type="image".

type checkbox Especifica el tipo de control a crear.

file

hidden

image

password

radio

reset

submit

text

value valor Para los botones:
reset y submit: define el texto en el
botn.
checkbox y radio: (requerido) define
el resultado del elemento input cuando
es pulsado.
hidden, password y text: define el
valor por defecto del elemento.

<textarea> Define un rea de texto(multi-lnea).
col
Obligatorio
nmero Nmero de columnas visibles en el
rea de texto.

rows
Obligatorio
nmero Nmero de filas visibles en el rea de
texto.

disabled Deshabilita los controles de entrada.

name nombre del rea
de texto
Especifica un nombre para el rea de
texto.

readonly El usuario no puede modificar el
contenido en el rea de texto.

<label> Adjunta informacin a los controles.

for idref Referencia a una palabra ID definida
por otro atributo.

<fieldset> Dibuja un recuadro alrededor de los
elementos.

<legend> Permite a los autores asignar un ttulo
a un fieldset.

align
Desaprobado
top Especifica la posicin de la leyenda con
respecto al fieldset.Use las
propiedades de ubicacin de CSS en su
lugar.

bottom

left

right

<select> Crea un men desplegable.
disabled Deshabilita el men.

multiple Si est activado permite selecciones
mltiples.

name nombre Define un nico nombre para un men
desplegable.

size nmero Define el nmero visible de Items en el
men desplegable.

<optgroup> Permite a los autores agrupar opciones
logicamente.

label
Obligatorio
texto Especifica el rtulo del grupo de
opcin.

disabled Deshabilita los controles de entrada.No
funciona en IE

<option> Define una opcin en los mens
desplegables.

label texto Permite escribir de forma sintetizada el
conternido del atributo <option>. El
navegador debera mostrar este valor
en lugar del contenido de <option>.

disabled Deshabilita los controles de opcin.No
funciona en IE

selected Especifica que opcin aparecer como
seleccionada.

value texto Especifica el valor inicial del control.

<button> Define un botn.
disabled Deshabilita el botn.

name nombre Especifica un nombre para el botn.

type button Define el tipo de botn.

reset

submit

value valor Asigna un valor inicial al botn.

<isindex>
Desaprobado
Use <input> en su lugar.

Atributos estndard
id, class, title, style, dir, lang, acceskey, tabindex
Si desea una descripcin completa, dirjase a: atributos estndard.



15.14. Ejercicio 14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rellena tu CV</title>
</head>

<body>

<h3>Rellena tu CV</h3>

<form action="/php/insertar_cv.php" method="post" enctype="multipart/form-da
ta">
Nombre <br/>
<input type="text" name="nombre" value="" size="20" maxlength="30" />

<br/>

Apellidos <br/>
<input type="text" name="apellidos" value="" size="50" maxlength="80" />

<br/>

Contrasea <br/>
<input type="password" name="contrasena" value="" maxlength="10" />

<br/>

DNI <br/>
<input type="text" name="dni" value="" size="10" maxlength="9" />

<br/>

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

<br/><br/>

Incluir mi foto <input type="file" name="foto" />

<br/><br/>

<input name="suscribir" type="checkbox" value="suscribir" checked="checked"/
> Suscribirme al boletn de novedades

<br/><br/>

<input type="submit" name="enviar" value="Guardar cambios" />
<input type="reset" name="limpiar" value="Borrar los datos introducidos" />


</form>

</body>

</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo de tabla compleja</title>
</head>

<body>

<h3>Comparativa de reproductores MP3</h3>

<table summary="Tabla comparativa de las caractersticas tcnicas de los rep
roductores MP3">
<caption>Tabla comparativa de las caractersticas tcnicas de los reproduc
tores MP3</caption>
<tr>
<th></th>
<th abbr="Reproductor mini" scope="col" colspan="3">
<img src="imagenes/mp3_pequeno_blanco.png" alt="Imagen del reproductor
MP3 pequeo de color blanco" />
<img src="imagenes/mp3_pequeno_negro.png" alt="Imagen del reproductor
MP3 pequeo de color negro" />
<br/><strong>MP3 mini</strong>
</th>
<th abbr="Reproductor estndar" scope="col" colspan="2">
<img src="imagenes/mp3_grande_blanco.png" alt="Imagen del reproductor
MP3 grande de color blanco" />
<img src="imagenes/mp3_grande_negro.png" alt="Imagen del reproductor M
P3 grande de color negro" />
<br/><strong>MP3 grande</strong>
</th>
</tr>

<tr>
<th scope="row" abbr="Capacidad">Capacidad de almacenamiento</th>
<td>4GB <br/> (1.000 canciones)</td>
<td>8GB <br/> (2.000 canciones)</td>
<td>16GB <br/> (4.000 canciones)</td>
<td>30GB <br/> (7.500 canciones)</td>
<td>80GB <br/> (20.000 canciones)</td>
</tr>

<tr>
<th scope="row" abbr="Colores disponibles">Colores</th>
<td>
<img src="imagenes/color_blanco.png" alt="Color blanco" />
</td>
<td>
<img src="imagenes/color_negro.png" alt="Color blanco" />
<img src="imagenes/color_verde.png" alt="Color verde" />
<img src="imagenes/color_azul.png" alt="Color azul" />
<img src="imagenes/color_rosa.png" alt="Color rosa" />
</td>
<td>
<img src="imagenes/color_negro.png" alt="Color negro" />
</td>
<td colspan="2">
<img src="imagenes/color_blanco.png" alt="Color blanco" />
<img src="imagenes/color_negro.png" alt="Color negro" />
</td>
</tr>

<tr>
<th scope="row" abbr="Tamao de pantalla">Pantalla</th>
<td colspan="3">LCD de 3 cm (diagonal) con retroiluminacin</td>
<td colspan="2">LCD de 6 cm (diagonal) con retroiluminacin</td>
</tr>

<tr>
<th rowspan="2" scope="row" abbr="Tiempo de carga">Tiempo de carga</th>
<td rowspan="2" colspan="3">Unas 3 horas</td>
<td colspan="2">Unas 4 horas</td>
</tr>

<tr>
<td colspan="2">Unas 2 horas para alcanzar el 80% de la capacidad</td>
</tr>
</table>

</body>

</html>



















8.1. Formularios bsicos
Los formularios ms sencillos se pueden crear utilizando solamente dos
etiquetas: <form> y <input>. Si se considera el formulario que muestra la siguiente
imagen:

Figura 8.1 Formulario sencillo definido con las etiquetas form e input
El cdigo HTML necesario para definir el formulario anterior se muestra a
continuacin:
<html>
<head><title>Ejemplo de formulario sencillo</title></head>
<body>

<h3>Formulario muy sencillo</h3>

<form action="http://www.librosweb.es/maneja_formulario.php" method="post">
Escribe tu nombre:
<input type="text" name="nombre" value="" />

<br/>

<input type="submit" value="Enviar" />
</form>

</body>
</html>
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros
de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos
diferentes de elementos (botones y cuadros de texto).
Etiqueta
<form>
Atributos
comunes
bsicos, internacionalizacin y eventos
Atributos
propios
action = "url" - Indica la URL que se encarga de procesar los datos del formulario
method = "POST o GET" - Mtodo HTTP empleado al enviar el formulario
enctype = "application/x-www-form-urlencoded o multipart/form-data" - Tipo
de codificacin empleada al enviar el formulario al servidor (slo se indica de forma
explcita en los formularios que permiten adjuntar archivos)
accept = "tipo_de_contenido" - Lista separada por comas de todos los tipos de
archivos aceptados por el servidor (slo para los formularios que permiten adjuntar
archivos)
Otros: accept-charset, onsubmit, onreset
Tipo de
elemento
Bloque
Descripcin
Se emplea para insertar un formulario en la pgina
La mayora de formularios utilizan slo los atributos action y method. El
atributo action indica la URL de la aplicacin del servidor que se encarga de
procesar los datos introducidos por los usuarios. Esta aplicacin tambin se
encarga de generar la respuesta que muestra el navegador.
El atributo method establece la forma en la que se envian los datos del formulario al
servidor. Este atributo hace referencia al mtodo HTTP, por lo que no es algo
propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST.
De esta forma, casi todos los formularios incluyen el atributo method="get" o el
atributo method="post".
Al margen de otras diferencias tcnicas, el mtodo POST permite el envo de mucha
ms informacin que el mtodo GET. En general, el mtodo GET admite como
mximo el envo de unos 500 bytes de informacin. La otra gran limitacin del
mtodo GET es que no permite el envo de archivos adjuntos con el formulario.
Adems, los datos enviados mediante GET se ven en la barra de direcciones del
navegador (se aaden al final de la URL de la pgina), mientras que los datos
enviados mediantePOST no se pueden ver tan fcilmente.
Si no sabes que mtodo elegir para un formulario, existe una regla general que
dice que el mtodoGET se debe utilizar en los formularios que no modifican la
informacin (por ejemplo en un formulario de bsqueda). Por su parte, el
mtodo POST se debera utilizar cuando el formulario modifica la informacin
original (insertar, modificar o borrar alguna informacin).
El ejemplo ms comn de formulario con mtodo GET es el de los buscadores. Si
realizas una bsqueda con tu buscador favorito, vers que las palabras que has
introducido en tu bsqueda aparecen como parte de la URL de la pgina de
resultados.
Del resto de atributos de la etiqueta <form>, el nico que se utiliza ocasionalmente
es enctype. Como se explica ms adelante, este atributo es imprescindible en los
formularios que permiten adjuntar archivos.


8.2. Elementos de formulario
Los elementos de formulario como botones y cuadros de texto tambin se
denominan "campos de formulario" y "controles de formulario". La mayora de
controles se crean con la etiqueta <input>, por lo que su definicin formal y su lista
de atributos es muy extensa:
Etiqueta
<input>
Atributos
comunes
bsicos, internacionalizacin, eventos y foco
Atributos
propios
type = "text | password | checkbox | radio | submit | reset | file |
hidden | image | button" - Indica el tipo de control que se incluye en el formulario
name = "texto" - Asigna un nombre al control (es imprescindible para que el servidor
pueda procesar el formulario)
value = "texto" - Valor inicial del control
size = "unidad_de_medida" - Tamao inicial del control (para los campos de texto y
de password se refiere al nmero de caracteres, en el resto de controles se refiere a su
tamao en pxel)
maxlength = "numero" - Mximo nmero de caracteres para los controles de texto y de
password
checked = "checked" - Para los controles checkbox y radiobutton permite indicar qu
opcin aparece preseleccionada
disabled = "disabled" - El control aparece deshabilitado y su valor no se enva al
servidor junto con el resto de datos
readonly = "readonly" - El contenido del control no se puede modificar
src = "url" - Para el control que permite crear botones con imgenes, indica la URL
de la imagen que se emplea como botn de formulario
alt = "texto" - Descripcin del control
Tipo de
elemento
En lnea y etiqueta vaca
Descripcin
Se emplean para insertar un control en un formulario
A continuacin se muestran ejemplos para los diez controles que se pueden crear
con la etiqueta<input>.
8.2.1. Cuadro de texto
Se trata del elemento ms utilizado en los formularios. En el caso ms sencillo, se
muestra un cuadro de texto vaco en el que el usuario puede escribir cualquier
texto:

Figura 8.2 Ejemplo de etiqueta input (type=text)
A continuacin se muestra el cdigo HTML correspondiente al ejemplo anterior:
Nombre <br/>
<input type="text" name="nombre" value="" />
El atributo type diferencia a cada uno de los diez controles que se pueden crear
con la etiqueta<input>. Para los cuadros de texto, su valor es text. El
atributo name es el ms importante en los campos del formulario. De hecho, si un
campo no incluye el atributo name, sus datos no se envan al servidor. El valor que
se indica en el atributo name es el nombre que utiliza la aplicacin del servidor para
obtener el valor de este campo de formulario.
Cuando el usuario pulsa el botn de envo del formulario, el navegador enva los
datos a una aplicacin del servidor para que procese la informacin y genere una
respuesta adecuada. En el servidor, la aplicacin que procesa los datos debe
obtener en primer lugar toda la informacin introducida por el usuario. Para ello,
utiliza el valor del atributo name para obtener los datos de cada control del
formulario.
Como el valor del atributo name se utiliza en aplicaciones programadas, es esencial
ponerse de acuerdo con el programador de la aplicacin, no se debe modificar su
valor sin modificar la aplicacin y no se deben utilizar caracteres problemticos en
programacin (espacios en blanco, acentos y caracteres como o ).
El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si
se crea un formulario para insertar datos, los cuadros de texto deberan estar
vacos. Por lo tanto, o no se aade el atributo value o se incluye con un valor
vaco value="". Si por el contrario se crea un formulario para modificar datos, lo
lgico es que se muestren inicialmente los datos guardados en el sistema. En este
caso, el atributo value incluir el valor que se desea mostrar: <input type="text"
name="nombre" value="Juan Prez" />
Si no se especifica un tamao, el navegador muestra el cuadro de texto con un
tamao predeterminado. El atributo size permite establecer el tamao, en
caracteres, con el que se muestra el cuadro de texto. Su uso es imprescindible en
muchos formularios, en los que algunos campos como la direccin deben mostrar
ms caracteres de lo normal (<input size="100" ...) y otros campos como el
cdigo postal deben mostrar menos caracteres de lo normal (<input size="5"...).
Adems de controlar el tamao con el que se muestra un cuadro de texto, tambin
se puede limitar el tamao del texto introducido. El atributo maxlength permite
establecer el mximo nmero de caracteres que el usuario puede introducir en un
cuadro de texto. Su uso es imprescindible para campos como el cdigo postal, el
nmero de la Seguridad Social y cualquier otro dato con formato predefinido y
limitado.
Por ltimo, el atributo readonly permite que el usuario pueda ver los contenidos del
cuadro de texto pero no pueda modificarlos y el atributo disabled deshabilita un
cuadro de texto de forma que el usuario no pueda modificarlo y adems, el
navegador no enva sus datos al servidor.
8.2.2. Cuadro de contrasea
La nica diferencia entre este control y el cuadro de texto normal es que el texto
que el usuario escribe en un cuadro de contrasea no se ve en la pantalla. En su
lugar, los navegadores ocultan el texto utilizando asteriscos o crculos, por lo que
es ideal para escribir contraseas y otros datos sensibles.

Figura 8.3 Ejemplo de etiqueta input (type=password)
Contrasea <br/>
<input type="password" name="contrasena" value="" />
Cambiando el valor del atributo type por password se transforma el cuadro de texto
normal en un cuadro de contrasea. Todos los dems atributos se utilizan de la
misma forma y tienen el mismo significado.
8.2.3. Checkbox
Los checkbox o "casillas de verificacin" son controles de formulario que permiten
al usuario seleccionar y deseleccionar opciones individualmente. Aunque en
ocasiones se muestran varios checkbox juntos, cada uno de ellos es
completamente independiente del resto. Por este motivo, se utilizan cuando el
usuario puede activar y desactivar varias opciones relacionadas pero no
excluyentes.

Figura 8.4 Ejemplo de etiqueta input (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
El valor del atributo type para estos controles de formulario es checkbox. Como se
muestra en el ejemplo anterior, el texto que se encuentra al lado de
cada checkbox no se puede establecer mediante ningn atributo, por lo que es
necesario aadirlo manualmente fuera del control del formulario. Si no se aade
un texto al lado de la etiqueta <input /> del checkbox, el usuario slo ve un
pequeo cuadrado sin ninguna informacin relativa a la finalidad de ese checkbox.
El valor del atributo value, junto con el valor del atributo name, es la informacin
que llega al servidor cuando el usuario enva el formulario.
Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el
atributo checked. Si el valor del atributo es checked, el checkbox se muestra
seleccionado. En cualquier otro caso, el checkboxpermanece sin seleccionar.
Aunque resulta redundante que el nombre y el valor del atributo sean idnticos, es
obligatorio indicarlo de esta forma porque los atributos en XHTML no pueden tener
valores vacos:
<input type="checkbox" checked="checked" ... /> Checkbox seleccionado por de
fecto
8.2.4. Radiobutton
Los controles de tipo radiobutton son similares a los controles de tipo checkbox,
pero presentan una diferencia muy importante: son mutuamente excluyentes.
Los radiobutton se utilizan cuando el usuario solamente puede escoger una
opcin entre las distintas opciones relacionadas que se le presentan. Cada vez
que se selecciona una opcin, automticamente se deselecciona la otra opcin
que estaba seleccionaba.

Figura 8.5 Ejemplo de etiqueta input (type=radio)
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer
El valor del atributo type para estos controles de formulario es radio. El
atributo name se emplea para indicar los radiobutton que estn relacionados. Por lo
tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el
navegador sabe que estn relacionados y puede deseleccionar una opcin del
grupo de radiobutton cuando se seleccione otra opcin.
8.2.5. Botn de envo de formulario
La mayora de formularios dispone de un botn para enviar al servidor los datos
introducidos por el usuario:

Figura 8.6 Ejemplo de etiqueta input (type=submit)
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El navegador
se encarga de enviar automticamente los datos cuando el usuario pincha sobre
este tipo de botn. El valor del atributovalue es el texto que muestra el botn. Si no
se establece el atributo value, el navegador muestra el texto predefinido Enviar
consulta.
8.2.6. Botn de reseteo del formulario
Aunque su uso era muy popular hace unos aos, la mayora de formularios
modernos ya no utilizan este tipo de botn. Se trata de un botn especial que
borra todos los datos introducidos por el usuario y devuelve el formulario a su
estado original:

Figura 8.7 Ejemplo de etiqueta input (type=reset)
<input type="reset" name="limpiar" value="Borrar datos del formulario" />
El valor del atributo type para este control de formulario es reset. Cuando el
usuario pulsa este botn, el navegador borra toda la informacin introducida y
muestra el formulario en su estado original. Si el formulario no contena
originalmente ningn valor, el botn de reset lo vuelve a mostrar vaco. si el
formulario contena informacin, el botn reset vuelve a mostrar la misma
informacin original.
Como es habitual en los botones de formulario, el atributo value permite establecer
el texto que muestra el botn. Si no es utiliza este atributo, el navegador muestra
el texto predefinido del botn, que en este caso es Restablecer.
8.2.7. Ficheros adjuntos
Los formularios tambin permiten adjuntar archivos para subirlos al servidor.
Aunque desde el punto de vista de HTML y del navegador no existe ninguna
limitacin sobre el nmero, tipo o tamao total de los archivos que se pueden
adjuntar, todos los servidores aaden restricciones por motivos de seguridad.

Figura 8.8 Ejemplo de etiqueta input (type=file)
Fichero adjunto
<input type="file" name="adjunto" />
El valor del atributo type para este control de formulario es file. El navegador se
encarga de mostrar un cuadro de texto donde aparece el nombre del archivo
seleccionado y un botn que permite navegar por los directorios y archivos del
ordenador del usuario.
Si se incluye un control para adjuntar archivos, es obligatorio aadir el
atributo enctype en la etiqueta<form> del formulario. El valor del
atributo enctype debe ser multipart/form-data, por lo que la etiqueta <form> de los
formularios que permiten adjuntar archivos siempre es:
<form action="..." method="post" enctype="multipart/form-data">
...
</form>
8.2.8. Campos ocultos
Los campos ocultos se emplean para aadir informacin oculta en el formulario:

Figura 8.9 Ejemplo de etiqueta input (type=hidden)
<input type="hidden" name="url_previa" value="/articulo/primero.html" />
El valor del atributo type para este control de formulario es hidden. Los campos
ocultos no se muestran por pantalla, de forma que el usuario desconoce que el
formulario los incluye. Normalmente los campos ocultos se utilizan para incluir
informacin que necesita el servidor pero que no es necesario o no es posible que
la establezca el usuario.
8.2.9. Botn de imagen
El aspecto de los botones de formulario se puede personalizar por completo, ya
que incluso es posible utilizar una imagen como botn:

Figura 8.10 Ejemplo de etiqueta input (type=image)
<input type="image" name="enviar" src="accept.png" />
El valor del atributo type para este control de formulario es image. El
atributo src indica la URL de la imagen que debe mostrar el navegador en lugar
del botn normal.
Su principal ventaja es que permite personalizar por completo la esttica de los
botones y mostrarlos con un aspecto homogneo en todos los navegadores. El
principal inconveniente es que ralentiza la carga del formulario y que si se quiere
modificar su aspecto, es necesario crear una nueva imagen.
8.2.10. Botn
Algunos formularios complejos necesitan botones ms avanzados que los de
enviar datos (type="submit") y resetear el formulario (type="reset"). Por ese
motivo, el estndar HTML/XHTML define un botn de tipo genrico:

Figura 8.11 Ejemplo de etiqueta input (type=button)
<input type="button" name="guardar" value="Guardar Cambios" />
El valor del atributo type para este control de formulario es button. Si pruebas a
pulsar un botn de este tipo, vers que el navegador no hace nada: no enva los
datos al servidor y no borra los datos introducidos. Este tipo de botones slo son
tiles si se utilizan junto con el lenguaje de programacin JavaScript. Si la pgina
incluye cdigo JavaScript, los botones de este tipo se pueden programar para que
realicen cualquier tarea compleja cuando se pulsa sobre ellos.
Ejercicio 14
Determinar el cdigo HTML necesario para crear el formulario que se muestra en
la siguiente imagen:

Figura 8.12 Formulario con controles de varios tipos
1. Elegir el mtodo ms adecuado para el formulario (GET o POST) y cualquier otro
atributo necesario.
2. La aplicacin que se encarga de procesar el formulario se encuentra en la raz
del servidor, carpeta "php" y archivo "insertar_cv.php" .
3. El nombre puede tener 30 caracteres como mximo, los apellidos 80
caracteres y la contrasea 10 caracteres como mximo.
4. Asignar los atributos adecuados al campo del DNI.
5. Por defecto, debe estar marcada la casilla de suscripcin al boletn de
novedades.
Resumen
HTML
o HTML
o Las etiquetas
o Estructura del documento
o Caracteres especiales
o Estilo
Etiquetas de estilo
o Estructura
Niveles de ttulos
Prrafos
Listas
Tablas
Vnculos de hipertexto
Imgenes
Fondos
Tabla de colores
Formularios
Meta Tags
Marcos
o Ver Tambin:
CSS
RSS
Podcast
Webmastering
Nombre de dominio
Alojamiento Web
Formularios HTML
US ES DE FR IT BR
Octubre 2014
Formularios
Los formularios interactivos permiten a los autores de pginas Web poner elementos interactivos
en sus pginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de
respuestas que se encuentra en algunas revistas.
El lector escribe la informacin rellenando campos o haciendo clic sobre botones, y luego presiona
un botn de envo para enviarla a una direccin URLque se suele dirigir a una direccin de correo
electrnico o a un script dinmico Web como PHP, ASP o CGI.
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 y
separndolos de la direccin con un signo de interrogacin (para aprender ms sobre los
mtodos POST y GET, consulte el artculo sobre protocolo HTTP)
ACTION indica la direccin a la que se enviar la informacin (un script CGI o direccin de
correo electrnico (mailto: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-urlencoded) 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-www-form-urlencoded">
... </FORM>
Aqu hay algunos ejemplos de las etiquetas FORM:
<FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net">

<FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-
bin/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.
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:
La etiqueta INPUT: Todos los botones y casillas de texto
La etiqueta TEXTAREA: una casilla de texto
La etiqueta SELECT: una lista de opciones mltiples
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://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2
La etiqueta INPUT
La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos
elementos interactivos. La sintaxis de esta etiqueta es la siguiente:
<INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre
de elemento">
El atributo name es esencial, ya que permite al script CGI 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: Las casillas de eleccin pueden adoptar uno de dos estados: checked
(seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el par
nombre/valor se enva al CGI.
hidden: Este campo, que el navegador no muestra, es para definir una configuracin nica que
se enviar al CGI como par nombre/valor.
file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que
se enviar con el formulario. Los tipos de archivo que pueden ser enviados deben especificarse
utilizando el atributo ACCEPT de la etiqueta FORM.
image: Un botn de envo personalizado que aparece cuando se ubica una imagen en la
ubicacin definida por el atributo SRC.
password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para
camuflar el texto de entrada.
radio: 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 enviar
al CGI. Al aplicar el atributo checkedpara uno de estos botones se definir como seleccionado
de forma predeterminada.
reset: Un botn de restauracin para quitar todos los elementos en el formulario y restablecer
sus valores predeterminados.
submit: Un botn de envo para enviar el formulario. El texto en el botn puede definirse
usando el atributo value.
text: 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: name: representa el nombre asociado con la casilla de texto, que permite su
identificacin en el par nombre/valor.
disabled: crea un 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 reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista
Ejemplo de formulario
Los formularios pueden ubicarse en una pgina usando tablas (algo recomendable para una
presentacin profesional). Este es un ejemplo que resume los puntos precedentes, mostrndole
cmo disponer un formulario en una pgina Web mediante una tabla:
<FORM method=post action="cgi-bin/script.pl">
Registro de un usuario
<TABLE BORDER=0>
<TR>
<TD>Apellido</TD>
<TD>
<INPUT type=text name="apellido">
</TD>
</TR>

<TR>
<TD>Nombre</TD>
<TD>
<INPUT type=text name="nombre">
</TD>
</TR>

<TR>
<TD>Gnero</TD>
<TD>
Hombre:
Mujer: <INPUT type=radio name="gnero" value="M">
<br>Mujer: <INPUT type=radio name="gnero" value="F">
</TD>
</TR>

<TR>
<TD>Ocupacin</TD>
<TD>
<SELECT name="ocupacin">
<OPTION VALUE="profesor">Profesor</OPTION>
<OPTION VALUE="estudiante">Estudiante</OPTION>
<OPTION VALUE="ingeniero">Ingeniero</OPTION>
<OPTION VALUE="jubilado">Jubilado</OPTION>
<OPTION VALUE="otro">Otro</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Comentarios</TD>
<TD>
<TEXTAREA rows="3" name="comentarios">
Escriba aqu sus comentarios</TEXTAREA>
Enviar
</TD>
</TR>

<TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Enviar">
</TD>
</TR>
</TABLE>
</FORM>
Esto es lo que aparece en la pantalla:
Registro de usuario
Apellido

Nombre

Gnero
Hombre: Mujer:
Mujer:
Ocupacin

Comentarios

Enviar

Atributos de etiquetas FORM y tipos de entrada
Etiqueta Atributo Valor Resultado Efecto visual
<FORM> ...
</FORM>
METHOD
POST
GET

ACTION
Enva a la direccin
mostrada

ENCTYPE
Especifica el tipo de
cdigo

<INPUT> TYPE
submit
realiza la ACTION de
la etiqueta <FORM>
Send


text
lnea simple de
texto cuya longitud
se especifica por el
atributo SIZE


Reset
Elimina el contenido
del formulario
Reset


Radio botn de radio

Checkbox casilla de seleccin

NAME Nombre
SIZE Tamao del texto
<TEXTAREA> ...
</TEXTAREA>
NAME
Casilla de texto


ROWS
COLS
<SELECT>
<OPTION> ...
</OPTION>
</SELECT>
NAME

Opcin 1


MULTIPLE
Mltiples
selecciones posibles

Opcin 1


<OPTION> ...
</OPTION>
SELECTED
Eleccin
predeterminada


Opcin 1
Opcin 2
Opcin 3


VALUE Valor forzado

Consulta este artculo sin tener que estar conectado, descrgalo gratis aqu en