You are on page 1of 8

Guía de

HTML, XML, XHTML
Parte Formularios HTML

Ricardo de la Concepción Leal
www.infowebsiete.com – www.ferroarte.info
rconleau@gmail.com
Los formularios
Según la W3C (World Wide Web Consortium) en la especificación HTML 4.01
recomendada, los formularios de HTML son una sección el cual contienen contenido normal,
formato, elementos especiales denominados controles (checkboxes, radio buttons, menus,
etc), y etiquetas de esos controles (labels). En el cual los usuarios generalmente rellenan
éste modificando estos controles, antes de su envío a un agente para ser procesado (servidor
web, servidor de correo, etc.),

En resumen se trata de una serie de elementos agrupados que nos permiten interactuar con
el usuario. Para comenzar a crearlos tenemos que introducir el elemento <form>. Este debe
localizarse en el cuerpo del documento de la página Web. Los
Controles deben de estar localizados dentro de la etiqueta de inicio y de fin </form> al igual
que los botones de envío y borrado o reseteado de ese formulario. Los formularios no pueden
anidarse unos con otros.

Atributos de la etiqueta <form>:

Accept-charset: se trata de una lista de codificaciones de caracteres que son aceptados por
el servidor que procesará el formulario.

Action: indica la dirección a la que será enviada la información recolectada mediante el
formulario, una vez que el usuario lo envíe.

Enctype: indica el tipo MIME que se empleará para enviar los datos del formulario al servidor.
Para enviar la información de los datos sin codificación debe introducirse dentro de este
atributo el valor “text/plain”.

Method: especifica el método en que se enviará el formulario. Los valores son GET y POST. El
valor es el valor por defecto si no se especifica lo contrario. El método GET, envía los datos
del formulario a través de la concatenación de los valores a los datos que se hallan
especificado en la dirección del atributo action, añadiendo al URI (Universal Resourse
Identification) un signo de interrogación como comienzo del envío, agregando el nombre del
control separando este nombre por el valor por un signo de igual (=). Si aparece algún dato
más este es concatenado con el símbolo amptersand (&). Éstos datos enviados de esta
manera se denominan QueryString, y son algo así como se muestran a continuación:

http://www.ferroarte.info/index.html?nombre=Cabecero%20Hojas&narticulo=cob215

El método POST, incluye los datos de envío en el cuerpo del mensaje y se envían siguiendo
unas reglas de codificación.

Name: este atributo asigna el nombre del control de un formulario.

Target: especifica el nombre del frame o marco en el que se mostrará la respuesta al envío
del formulario.
El formulario tendría el siguiente aspecto con los atributos más básicos para su utilización,
como muestra en la siguiente figura.

Los tipos de controles
Existen tres tipo de controles para introducir los datos en los formularios:

Controles de texto
Controles mediante selección
Controles mediante botones

Y contamos con las siguientes etiquetas para crear esos controles:

<input>
<textarea>
<select>
<button>

Control <input>
La etiqueta <input> resulta ser la más versátil de las etiquetas que agrupan los formularios,
ya que con ellas se pueden insertar controles de tipo botón para el envío del formulario,
controles para introducir texto, ya sea visible u oculto, etc. Los distintos tipos de datos, se
introducen mediante el atributo del elemento, denominado type , y son los que se listan a
continuación:

<input Type=”text”> <input Type=”password”> <input
Type=”checkbox”>
<input Type=”reset”> <input Type=”submit”> <input
Type=”button”>
<input Type=”file”> <input Type=”image”>

Con tan solo el atributo type, puede cambiar la forma del <input> por
completo.

Text: tipo texto, el control más genérico, utilizado para interactuar con el usuario, también
denominado cajas de texto.
Cuenta con los siguientes atributos:

Name: nombre que se le asigna al control.

Value: proporcional el valor que quiere que sea mostrado en una baja de texto.

Maxlengh: especifica el máximo número de caracteres introducidos dentro de la caja de
texto, es un valor numérico.

Size: este atributo especifica el tamaño de la caja de texto para ser mostrado en el
formulario.

El control vendría a ser algo como lo que se muestra a continuación, con el contenido más
básico posible:

<input type=”text”>
Otro control pero este utilizando algunos atributos:

<input type=”text” name=”nombre” size=”20”>

vease que la caja de texto tiene como nombre nombre y el tamaño máximo para visualizar
en el formulario es de 20 caracteres.

<input type=”text” name=”apellidos” size=”30” maxlenght=”50”>

En el caso anterior el control tiene como nombre apellidos, el tamaño máximo para ver por el
navegador es de 30 caracteres y se limita a 50 el número de caracteres que el usuario
introducirá por el formulario en este campo.

Password: tipo password o clave, se ven una serie de asteriscos o puntos (depende del
navegador que se utilice), cuando el usuario introduce un dato. Normalmente se utiliza
utilizando como atributo en la etiqueta <form> el atributo POST, ya que si utilizamos el GET,
puede verse el contenido a través de la cadena URI, y este campo se utiliza para ocultar el
contenido.

Abajo tenemos un formulario para envio de un suario y su contraseña para acceder por
ejemplo a un sitio Web.

Checkbox: es una caja de verificación o de selección que puede estar activada o desactivada,
también pueden agregarse múltiples cajas para seleccionar varios valores a la vez, en el
momento del envío el valor por defecto es (on), en caso de estar desactivada no se envía
ningún valor, pero este valor puede ser modificado con el atributo value. Los atributos de
este tipo de control son los siguientes:

Name: nombre con el que se identifica el campo.

Value: por defecto el valor que corresponde cuando está activado es On, en contrario
no envía valor alguno, aún así una vez activo podemos establecer un valor diferente al
On, al igual cuando este control con el valor establecido está desactivado, no envia
valor alguno. Volvemos a repetir esto porque generalmente existe confusión a la hora
de utilizar este tipo de controles

Checked: este atributo activa el control cuando, se encuentra alojado dentro del
elemento
Para entender mejor este ejemplo le proponemos que cree una página Web con el
nombre de prueba.html, el cual introduzca el código que le presentamos en la figura. En este
establecemos varios controles, uno de ellos, el tercero establecimos como valor el número 1,
al pulsar el botón se recargará la misma página, y podrá ver en el QueryString, cuales son los
valores que viajan, y por supuesto que valores.

Radio: la diferencia de este control con el anterior es que solo podemos seleccionar, se debe
de seleccionar un valor de una lista de valores, estableciendo en ellos un mismo nombre, en
el momento del envío viajaría únicamente el valor del elemento que hemos seleccionado, en
caso contrarío no viaja ningún valor.

También tenemos como atributo en el control el checked que establece la preferencia de un
determinado control sobre los demás, en el siguiente ejemplo puede verse el ejemplo
anterior, sustituimos los nombres por el de mascota, el valor que viaja corresponderá a lo
que establecemos en el atributo value de cada elemento.

Name: nombre con el que se identifica el campo, es importante establecer el nombre en
estos elementos, para que exista una relación entre los controles.

Value: se establece en caso de que exista una relación entre los elementos. Porque en
si el radiobutton no sería nada si no existe más opciones.

Checked: este atributo activa el control, cuando se encuentra alojado dentro del
elemento.

Reset: se utiliza para resetear o restablecer los valores por defecto establecidos en el
formulario, los controles que se encuentran dentro de un formulario. Como atributo tenemos
el value, que en si establece el valor que se va a mostrar en el navegador del usuario.

<input type=”reset” value=”Borrar”>

Submit: se utiliza para el envío del formulario a la dirección introducida en el atributo action
de la etiqueta <form>, y envia los datos de los controles que se encuentran dentro del
formulario. Al igual que el tipo reset, tiene como atributo el value para establecer un el valor
mostrado en el navegador.

<input type=”submit” value=”Enviar”>
Button: con este valor del atributo se especifica un botón, para poder ser utilizado con un
javascript, por ejemplo validar el contenido dentro de una caja de texto, se crea en realidad
un botón pulsador, y funcionan igual que el resto de los controles de similares características.
Los atributos para este tipo de control son los siguientes:

Name: nombre con el identificamos el control, para establecer algún tipo de acción
posterior.

Value: con este atributo se establece el valor de presentación del control. El valor con
el que el usuario podrá ver el control en el navegador.

En el siguiente ejemplo podemos ver como establecemos un control tipo button en el
que al hacer click, se muestra en forma de mensaje sobre la cantidad de controles que
existen en el formulario con el nombre mascota. Más adelante veremos ejemplos más
prácticos sobre la utilización de este tipo de controles.

File: éste atributo nos permite el envío de ficheros adjuntos al envío del formulario. Nos
permite la selección de un fichero. Normalmente aparece una caja junto con un botón con la
palabra “examinar”, dependiendo del idioma de configuración del sistema operativo. Los
atributos para este elemento son los siguientes:

Name: nombre con el que se identifica el campo.

Enctype: representa el tipo de formato con el que se a subir el fichero, es necesario
definirlo y tienen que tener el valor “multipart/form-data”.
Detalle del control tipo file, el aspecto que tiene este control para saber y poder diferenciarlo.

Image: nos permite proporcionarle al botón un mejor aspecto visual, ya que permite
introducir imágenes, personalizándolo para el envío de la información.

Src: el cual le proporciona la imagen para poder visualizarla por le navegador.

Alt: que le da un texto alternativo a la imagen en caso de que esta no pueda verse por
cualquier circunstancia.

Hidden: es una caja de texto invisible pero que contiene un valor que no es necesario que el
usuario que interacciona con el formulario separa sobre su existencia, como puede ser por
ejemplo el número de sesión u otros tipos de datos.

Name: name el cual le proporciona un nombre al control.

Value: el cual le proporciona un valor o contenido.

Control <textarea>

El textarea es un control con forma de caja de texto que está formada por una serie de
líneas y columnas en la que se pueden introducir una serie de datos que suelen ser más largo
o explicativos que en un tipo de texto normal como puede ser el <input type=”text”>. Este
tipo de control tiene también una etiqueta de cierre, y dentro de ella se puede establecer la
información que quiera que se vea por el usuario. A continuación se pone una referencia de
uso la etiqueta de principio y fin.

<textarea>
Ejemplo de textarea
</textarea>

Los atributos de este tipo de control se detallan a continuación:

Name: nombre o identificador del control.

Cols: número de columnas o anchura con el que se representarán en el control,
establecidas en número de caracteres.

Rows: número de líneas de texto visibles.

Cuando no se establecen un número de líneas o de columnas algunos navegadores
establecen por defecto un número determinado, que puede variar.
Este sería el aspecto de un textarea en el navegador