Un formulario HTML es una sección del documento en que los usuarios pueden introducir datos, o bien, modificar controles y parámetros, que posteriormente serán enviados a un agente para que los procese.
Los formularios permiten la existencia de cierta 'interactividad' entre el visitante y la página web. Aunque ésta no es muy grande, puede resultar útil en muchas ocasiones.
Al igual que la tabla, los formularios tienen la tendencia ser usados mal (o mejor dicho: los creadores de páginas web tienden a usarlos mal). Los formularios, si bien forman parte del HTML, la manera en que sus datos son gestionados no. Lo más habitual es utilizar lenguajes del lado del servidor para realizar esta tarea. O bien, recursos del lado del cliente si los parámetros no necesitan ser enviados a ningún lugar.
Ya que esa gestión no forma parte del HTML, escapa de los propósitos de este curso y por tanto no la vamos a abordar aquí.
La definición en el documento de un formulario depende
del elemento <form>. Un formulario puede
contener texto y código además de controles de
formulario. Este elemento es de bloque.
Formulario <form>
action: Especifica un URI que hace referencia a
un agente procesador de formularios.accept: Este atributo especifica una lista de
tipos de contenido separados por comas que un servidor procesador
de formularios manejará correctamente.accept-charset: Este atributo especifica la
lista de codificaciones de caracteres para los datos introducidos
que son aceptadas por el servidor que procesa este formulario. El
valor es una lista de valores de codificaciones de caracteres
separadas por espacios y/o comas. El valor por defecto es
unknown.enctype: Este atributo especifica el tipo de
contenido usado para enviar el formulario al servidor (cuando el
valor del atributo method sea post). El
valor por defecto de este atributo es
application/x-www-form-urlencoded. El valor
multipart/form-data debería usarse en
combinación con el elemento <input
type="file">.method: Indica el método que el
HTTP
utilizará para enviar los datos del formulario. Valores
posibles: get y post. Utilizando
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. Utilizando post,
el conjunto de datos del formulario se incluye en el cuerpo del
formulario y se envía al agente procesador.Un sencillo ejemplo de lo expuesto anteriormente. Muestra un
formulario que va a ser procesado por el programa "agente" cuando
sea enviado. El formulario será enviado al programa usando
el método HTTP
post.
<form action="http://www.unsitio.com/agente" method="post">
<!-- Contenidos del formulario -->
</form>
El usuario de un formulario interactúa con él por medio de unos elementos llamados controles.
Para controles que permitan la introducción de datos
por parte del usuario lo más usual es recurrir al elemento
input. Éste elemento nos permitirá
introducir en nuestro documento diversos tipos de controles de
formulario. Éste elemento es vacío, por lo tanto
solo basta una etiqueta que cierra para definirlo. Su
comportamiento por defecto es como elemento en línea.
Primero veamos sus atributos:
Entrada <input>
accept: Este atributo especifica una lista de
tipos de contenido separados por comas que un servidor procesador
de formularios manejará correctamente. Solo deberá
usarse en caso de que el atributo type sea igual a
file.alt: Muestra un texto alternativo para las
imágenes. Solo aplica cuando el atributo type
es igual a image.checked: Indica si el control esta marcado o no.
Valor posible: checked. Solo tiene sentido cuando el
atributo type es igual a checkbox o
radio.disabled: Especifica si el control está
deshabilitado o no. Valor posible: disabled. No
puede ser usado cuando el atributo type es igual a
hidden.maxlength: Indica el número máximo
de caracteres que permite un campo de texto. Obviamente solo
tiene sentido en controles de ese tipo.name: Define un nombre único para el
elemento de entrada. Si se desea crear una pareja de
control/valor al momento de enviar los los datos del formulario,
es obligatorio para casi todos los tipos de controles excepto:
submit y reset.readonly: Indica si el valor del control no
puede ser modificado. Vñalido cuando el atributo
type es igual a text.size: Define el tamaño del elemento de
entrada. Vene definido en pixeles, a menos que el coontrol sea
una entrada de texto. Para lo cual se define en caracteres.src: El URL de la imagen a
presentar. Solo para tipos de control image.type: Indica el tipo de control del que se
tratará. Valores posibles: button,
checkbox, file, hidden,
image, password, radio,
reset, submit, text. La
mayoría de estos tipos son auto explicativos y de
fácil comprensión para cualquier usuario de un
entorno gráfico de usuario. Los controles que pueden
generar problemas de comprensión pueden ser:
submit, image.- Ejecuta el contenido
del atributo action del formulario, enviando su
contenido. password.- Muestra un cuadro de texto que
se enmascara al escribir. reset.- Inicializa los
controles del formulario a sus valores por defecto.
hidden.- Especifica la existencia de un control
invisible. file.- Crea un control de
selección de archivo.value: Para controles de tipo botón
(botton, submit, reset)
define el texto del botón.A pesar de existir tipos botón para el elemento
<input>, existe por sí mismo un
elemento <button> que cumple la misma
función. Siendo más rico y flexible que los
anteriores. Es un elemento de bloque.
Botón <button>
disabled: Especifica si el control está
deshabilitado o no. Valor posible: disabled.name: Define un nombre único para el
elemento de entrada.type: Indica de que tipo de botón se
trata. Valores posibles: button, reset,
submit. Realizan las isma funciones que sus
homólogos del elemento <input>.value: Especifíca unvalor inicial para el
botón. Dicho valor puede ser cambiado con un script.Este control permite que el usuario introduzca texto de múltiples lineas. Es un elemento de línea.
Área de texto <textarea>
disabled: Especifica si el control está
deshabilitado o no. Valor posible: disabled.name: Define un nombre único para el
elemento.readonly: Indica que el contenido no puede ser
modificado. Valor posible: readonlyEstos control permiten que el usuario seleccione una opción de entre una lista de ellas. Usualmente se representan como una lista desplegable.
El elemento <select> define la lista, el
elemento <option> define cada una de las
opciones de la lista, el elemento <optgroup>
permite agrupar opciones. El elemento select es un
elemento de línea.
Selección <select>
disabled: Especifica si el control está
deshabilitado o no. Valor posible: disabled.multiple: Indica que es posible realizar una
selección múltiple. Valor posible
multiple.name: Define un nombre único para el
elemento de entrada.size: Especifica el número de elementos
visibles de la lista.Opción <option>
disabled: Especifica si el control está
deshabilitado o no. Valor posible: disabled.label: Define una etiqueta para usarse junto con
optgroup.selected: Indica el elemento seleccionado por
defecto. Valor posible: selected.value: Define el valor de la opción que
será enviado al gestor de formularios.Grupo de opciones <optgroup>
disabled: Especifica si el grupo está
deshabilitado pòr defecto. Valor posible:
disabled.label: Define una etiqueta para el grupo de
opciones.El elemento label permite asociar explicitamente
una etiqueta con un control para el cual no existe un atributo
que se lo asocie directamente. Desde el punto de vista de un
usuario de navegación visual tal vez no tenga mucho
sentido, pero es muy útil a la hora de proporcionar un
nombre a los controles a los que se accede desde un agente de usuario
"no visual". Es un elemento de línea.
Etiqueta <label>
for: Indica el id del control al cual
está asociado.El elemento fieldset permite agregar
información estructural al formulario y agrupar controles.
El elemento legend permite asociar una etiqueta al
fieldset. El elemento fieldset es un
elemento de bloque.
Ninguno de estos elementos tiene atributos exclusivos.
Después de las explicaciones anteriores, un ejemplo:
Haz click aquí para ver el ejemplo 7.
También podemos incluir objetos dentro de nuestras páginas webs, tales como objetos Script y objetos Java, applets Java, pero eso también lo veremos más adelante, a lo largo del curso.