FORMULARIOS

Los formularios son la herramienta para intercambiar información con el usuario. Los formularios constan de una serie de elementos que permiten al usuario introducir información (escribiendo directamente o seleccionando contenidos preestablecidos) para ser tratada posteriormente. Esta información se puede almacenar en una base de datos o ser procesada con algún lenguaje de programación (PHP, C++, ASP, JSP, JavaScript, etc.) para generar una respuesta, que puede ser una página Web, un correo electrónico, el resultado de una búsqueda, etc. 

Los formularios se definen y delimitan con el elemento <form></form>. Sus atributos son:

Código Descripción
action programa o URL que va a tratar los datos del formulario
method

cómo se van a enviar los datos: GET | POST

enctype qué tipo de datos contiene (texto plano, ficheros, etc.). El valor por defecto es "application/x-www-form-urlencoded". Con el elemento INPUT, type="file" debe usarse el valor "multipart/form-data".
accept-charset lista de codificaciones de caracteres (ISO-8859-1 para idiomas de Europa occidental)
accept lista de tipos de contenido separados por comas que un servidor procesador de formularios manejará correctamente ("text/html", "image/png", "image/gif", "video/mpeg", "text/css", "audio/basic")
name nombre del formulario

Ejemplo:

<form action="siguiente.html" method="post" enctype="multipart/form-data" name="form1"></form>

El atributo method puede tener dos valores:

  • get: el conjunto de datos del formulario se agrega al URI especificado por el atributo action, con un signo de interrogación ("?") como separador, y este nuevo URI se envía al agente procesador. Este método restringe los valores del conjunto de datos del formulario a caracteres ASCII.
  • post: el conjunto de datos del formulario se incluye en el cuerpo del formulario y se envía al agente procesador. Sólo este método (con enctype="multipart/form-data") cubre el conjunto de caracteres [ISO10646] completo.

Dentro del formulario se definen los distintos elementos que permiten interactúar con el usuario.

El elemento <input> permite crear controles como campos de texto, de contraseña, casillas de verificación, botones de opción, áreas de texto, ficheros y botones de reset y envío:

Código Descripción
type text|password|checkbox|radio|submit|reset|file|hidden|image|button
name

nombre

value valor inicial (salvo con radio o checkbox)
size tamaño inicial (número de caracteres en text y password)
maxlength número máximo de caracteres que el usuario puede introducir (text y password)
checked con radio o checkbox especifica si el botón está marcado ("on") o no
src con "image", especifica la imagen que debe usarse para decorar el botón de envío.

Para enviar el formulario hay que utilizar un elemento tipo botón (button | image). Cuando se pulsa este botón los datos del formulario son enviados al programa o dirección indicados en el atributo "action" del elemento form.

El elemento <select> junto con <option> permite crear listas desplegables:

Atributos de <select></select>:

Código Descripción
name nombre
size número de elementos de la lista
multiple si está activado, permite selecciones múltiples

Atributos de <option></option>:

Código Descripción
selected indica si la opción está preseleccionada
value valor inicial del control
label rótulo para la opción más corto que el contenido del elemento OPTION

Él elemento <textarea> permite crear áreas de texto:

Código Descripción
name nombre del control
rows número de líneas de texto visibles
cols anchura visible en caracteres de anchura media

Ejemplo:

Código Resultado

<form action="siguiente.html" method="post" enctype="multipart/form-data" name="formulario1">

<p>Campo de texto: <input type="text" name="textfield" /></p>

<p>Casillas de verificaci&oacute;n: <br />
Casilla1 <input type="checkbox" name="checkbox" value="checkbox" /> Casilla 2 <input type="checkbox" name="checkbox2" value="checkbox" /> Casilla3 <input type="checkbox" name="checkbox3" value="checkbox" /> </p>

<p>Botones de opci&oacute;n: <br />
Bot&oacute;n 1 <input name="radiobutton" type="radio" value="radiobutton" />
Bot&oacute;n 2 <input name="radiobutton" type="radio" value="radiobutton" />
Bot&oacute;n 3 <input name="radiobutton" type="radio" value="radiobutton" /></p>

<p>Archivo: <input type="file" name="file2" /></p>

<p>Lista: <select name="select2">
<option>Elemento 1</option>
<option>Elemento 2</option>
<option>Elemento 3</option>
</select></p>

<p>Lista múltiple:
<SELECT multiple size="4" name="elegir-componente">
<OPTION selected value="Elemento_1_a">Elemento_1</OPTION>
<OPTION selected value="Elemento_1_b">Elemento_2</OPTION> <OPTION>Elemento_3</OPTION>
<OPTION>Elemento_4</OPTION>
<OPTION>Elemento_5</OPTION>
<OPTION>Elemento_6</OPTION>
</SELECT> </p>

<p>&Aacute;rea de texto:</p>
<p><textarea name="textarea2" cols="30" rows="8"></textarea></p>

<p><input name="Enviar" type="button" value="Enviar" />
<input type="reset" name="Borrar" value="Restablecer" /></p>

</form>

Campo de texto:

Casillas de verificación:
Casilla1 Casilla 2 Casilla3

Botones de opción:
Botón 1 Botón 2 Botón 3

Archivo:

Lista múltiple:

Área de texto:

 

En ciertos contextos en los que la entrada de datos por parte del usuario es indeseable o irrelevante, es importante poder deshabilitar un control o convertirlo en un control de sólo lectura.

  • Para deshabilitar un control existe el atributo disabled, que es soportado por INPUT, OPTION, SELECT y TEXTAREA.
  • Para convertir un control en sólo lectura existe el atributo readonly, que es soportado por INPUT y TEXTAREA.

Ejemplo:

Código Resultado

<p>Campo de texto deshabilitado:
<input type="text" name="textfield" disabled /></p>

<p>&Aacute;rea de texto de solo lectura:</p>
<p><textarea name="textarea2" cols="20" rows="4" readonly>Área de texto de solo lectura</textarea></p>

Campo de texto deshabilitado:

 

La mayoría de los elementos de un formulario no tienen asociado un rótulo (campos de texto, casillas de verificación, botones de opción y menús). Para poder asociar un rótulo a estos elementos existe el elmento <label></label>. Su único atributo es for, a través del que se le asocia el rótulo.

Ejemplo:

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

Código Resultado

<p>Campo de texto deshabilitado:
<input type="text" name="textfield" disabled /></p>

<p>&Aacute;rea de texto de solo lectura:</p>
<p><textarea name="textarea2" cols="20" rows="4" readonly>Área de texto de solo lectura</textarea></p>

Campo de texto deshabilitado:

 

Para estructurar el contenido de un formulario existen dos elementos: fieldset y legend.

El elemento FIELDSET (grupo de campos) permite agrupar por temas controles y rótulos relacionados. Esto permite clarificar contenidos y facilitar la navegación. Además, hace los documentos más accesibles. El elemento LEGEND permite a los autores asignar un título a un FIELDSET.

Ejemplo:

Código Resultado

<form id="form1" name="form1" method="post" action="">
<fieldset>
<legend>Datos personales</lengend>
<label for="textfield">Nombre</label>
<input type="text" name="textfield" id="textfield" />
<label for="label2">Apellidos</label>
<input type="text" name="textfield2" id="label2" />
<label for="label3">Dirección</label>
<input type="text" name="textfield3" id="label3" />
</fieldset>

<fieldset>
<legend>Titulación</legend>
<input name="radiobutton" type="radio" value="radiobutton" />
<label for="radiobutton">Titulación 1</label>
<input name="radiobutton" type="radio" value="radiobutton" />
<label for="radiobutton">Titulación 2</label>
<input name="radiobutton" type="radio" value="radiobutton" />
<label for="radiobutton">Titulación 3</label>
</fieldset>

<fieldset>
<legend>Asignaturas</legend>
<input type="checkbox" name="checkbox" value="checkbox" />
<label for="checkbox">Asignatura 1</label>
<input type="checkbox" name="checkbox2" value="checkbox" />
<label for="label">Asignatura 2</label>
<input type="checkbox" name="checkbox3" value="checkbox" />
<label for="checkbox2">Asignatura 3</label>
</fieldset>
</form>


Datos personales


Titulaciones


Asignaturas
Asignatura 2

 


Ejercicio:

En el documento index.html crear un formulario que contenga todos los elementos vistos.