Un formulario es un elemento que permite recoger

datos introducidos por el usuario.

Un formulario est formado, entre otras cosas, por
etiquetas, campos de texto, mens desplegables, y
botones.
Es muy recomendable utilizar tablas para organizar
los elementos de los formularios ya que se
consigue una mejor distribucin de sus elementos
facilitando as su comprensin y mejorando su
apariencia.

Contiene el cuerpo (todos los elementos) del

formulario
Sus atributos son:

action = "url" - Indica la direccin URL a la que se enviarn los

datos.
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)
id: indica un nombre del formulario para que pueda ser
personalizado mediante CSS
Otros: accept-charset, onsubmit, onreset

Mtodos de envo:
POST .

Permite el envo de mucha ms informacin.

Permite archivos adjuntos.
Los datos no se pueden ver tan fcilmente.
Se debera utilizar cuando el formulario modifica la
informacin original (insertar, modificar o borrar alguna
informacin).

GET.

Admite como mximo el envo de unos 500 bytes de

informacin.
No permite el envo de archivos adjuntos con el formulario.
Los datos enviados se ven en la barra de direcciones del
navegador (se aaden al final de la URL de la pgina)
Se debe utilizar en los formularios que no modifican la
informacin (por ejemplo en un formulario de bsqueda)

Permite la creacin de la mayora de los controles del

formulario.
Sus atributos son:

type = "text | password | checkbox | radio | submit | reset | file | hidden |

image | button" - Indica el tipo de control
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 (para campos de texto,
nmero de caracteres, en el resto de controles se refiere a su tamao en
pxel)
maxlength = "numero" - Mximo nmero de caracteres
checked = "checked" - Para checkbox y radiobutton. Indica la opcin
preseleccionada
disabled = "disabled" - El control aparece deshabilitado
readonly = "readonly" - El contenido 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

TIPOS DE CONTROLES DE LA
ETIQUETA INPUT

Text. Permite introducir texto

Nombre <br/>
<input type="text" name="nombre" value="" />

Password. Al insertar texto, ste se escribe con

asteriscos o puntos.
Contrasea <br/>
<input type="password" name=pass" value="" />

Checkbox. Permite ver un conjunto de opciones

para que el usuario seleccione o deseleccione una
o varias de stas.
Puestos de trabajo buscados <br/>
<input name="p_directivo"
type="checkbox" value="direccion"/>
Direccin
<input name="p_tecnico"
type="checkbox" value="tecnico"/>
Tcnico
<input name="p_empleado"
type="checkbox" value="empleado"/>
Empleado

Radio. Permiten seleccionar una opcin de las

que se enlistan. Control con opciones
mutuamente excluyentes mediante el atributo
name.
Sexo <br/>
<input type="radio" name="sexo"
value="hombre" checked="checked" />
Hombre
<input type="radio" name="sexo"
value="mujer" /> Mujer

Submit. Permite enviar el contenido del formulario

al servidor para ser procesado.
El valor del atributo value ser el texto que se
muestre en el botn.
<input type="submit" name="buscar" value="Buscar" />

Reset. Borra la informacin del formulario,

devolvindolo a su estado inicial.

<input type="reset" name="limpiar" value="Borrar datos del

formulario" />

File. Al permitir adjuntar archivos es necesario

agregar el atributo enctype en la etiqueta form, con
el valor multipart/form-data
<form action="..." method="post" enctype="multipart/form-data">

Fichero adjunto <input type="file" name="adjunto" />

...
</form>

Hidden. Se utilizan para aadir informacin a los

formularios y que no es necesario que los usuarios
la vean.
<input type="hidden" name="url_previa"
value="/art/primero.html" />

Image. Se puede utilizar una imagen como botn.

Su ventaja es que el aspecto del formulario es ms
llamativo; su desventaja es que se vuelve ms lenta
la carga del formulario.
<input type="image" name="enviar" src="accept.png" />

Button. Son botones que se pueden programar

mediante cdigo JavaScript para realizar alguna
tarea diferente a el envo o borrado de datos.
<input type="button" name="guardar" value="Guardar
Cambios" />

Permite ingresar grandes cantidades de texto en un

rea.
No permite limitar el nmero mximo de caracteres
que se pueden introducir.
Sus atributos:
rows = "numero" - Nmero de filas de texto que mostrar
el textarea
cols = "numero" - Nmero de caracteres que se muestran
en cada fila del textarea
Otros: name, disabled, readonly, onselect, onchange,
onfocus, onblur

Descripcin del producto <br/>

<textarea name="descripcion" cols="40" rows="5">
</textarea>

La etiqueta select permite mostrar listas de

opciones.
Para cada opcin de la lista se requiere la etiqueta
option
Existen tres formas de manejar listas con la
etiqueta select:
Mostrar un valor y desplegar el contenido de la lista al dar
clic sobre ella.
Mostrar todas las opciones de la lista y permitir seleccionar
solamente una opcin
Mostrar todas las opciones de la lista y permitir seleccionar
varias opciones

Los atributos de select son:

size = "numero" - Nmero de filas que se muestran de la
lista (por defecto slo se muestra una)
multiple = "multiple" - Si se incluye, se permite seleccionar
ms de un elemento
Otros: name, disabled, onchange, onfocus, onblur

Los atributos de option son:

selected = "selected" - Indica si el elemento aparece
seleccionado por defecto al cargarse la pgina
value = "texto" - El valor que se enva al servidor cuando el
usuario elige esa opcin
Otros: label, disabled

Sistema operativo <br/>

<select name="so">
<option value="" selected="selected">- selecciona -</option>
<option value="windows">Windows</option>
<option value="mac">Mac</option>
</select>
Sistema operativo <br/>
<select name="so2" size="5">
<option value="windows"
selected="selected">Windows</option>
<option
value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
Sistema operativo<br/>
<select name="so3" size="5" multiple="multiple">
<option value="windows" selected="selected">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>

Se utiliza para establecer un ttulo relacionado a los

controles del formulario.
Su nico atributo es:
for=id_de_elemento- Indica el ID del control del
formulario que se est titulando.

Ejemplo nombrando los campos mediante texto

normal:
Nombre <br/>
<input type="text" name="nombre" value="" />
Apellidos <br/>
<input type="text" name="apellidos" value="" />

Ejemplo utilizando la etiqueta label:

<label for="nombre">Nombre</label> <br/>
<input type="text" id="nombre" name="nombre" value="" />

<label for="apellidos">Apellidos</label> <br/>

<input type="text" id="apellidos" name="apellidos" value="" />

Fieldset. Esta etiqueta permite agrupar campos de

un formulario.
Legend. Para escribir un nombre a un conjunto de
campos creados con fieldset.
<fieldset>
<legend>Datos personales</legend>
Nombre <br/> <input type="text" name="nombre" value="" />
<br/>
Apellidos <br/> <input type="text" name="apellidos"
value="" /> <br/> DNI <br/> <input type="text" name="dni"
value="" size="10" maxlength="9" />
</fieldset>

Escribe en tu cuaderno y en electrnico el cdigo

necesario para crear el siguiente formulario.

http://librosweb.es/xhtml/capitulo_8.html
http://www.virtualnauta.com/htmlformularios
http://es.kioskea.net/contents/236formularios-html