Formularios:

Un formulario es un bloque de un documento HTML compuesto por un conjunto de elementos

de entrada de información. Permite al usuario entrar datos con el objetivo de enviarlos a un
servidor para realizar algún tipo de proceso con ellos.

En la web son muy útiles para acceso mediante usuario y contraseña, la búsqueda de artículos
en una tienda electrónica, reserva de una habitación en un hotel, encuestas… es uno de los
componentes más importantes en la interacción entre el usuario y los sitios web.

Un formulario es un contenedor de elementos de entrada de datos. Los datos que el usuario

introduce en estos campos son enviados al correo electrónico del administrador del formulario
o bien a un programa que está en un servidor y se encarga de procesar automáticamente.

Usando HTML únicamente podemos enviar el formulario a un correo electrónico. Si queremos

procesar el formulario mediante un programa, necesitamos utilizar lenguajes de programación
como PHP o ASP.

También (opcionalmente) podemos introducir reglas para validar los elementos de entrada,
estas reglas se validarán de forma automática antes del envío, si las reglas no se cumplen el
formulario no se enviará.

Ciclo de funcionamiento de un formulario:

 El usuario introduce los datos en los campos de entrada correspondientes.

 El usuario pulsa el botón de envío submit.
 El navegador valida las reglas asignadas a los campos de entrada.
 Si las reglas se cumplen, el navegador prepara los datos y los envía al destino indicado
según el método de envío seleccionado.

Elementos de los formularios:

<form>
nos delimita la sección de la página web que contiene el formulario.

ATRIBUTOS:

 action: nos permite poner el destino del formulario. Si no se pone action, los
datos del formulario no se envían a ningún sitio.

<form action=”nombre_programa.php” method=”post”>

Si el formulario no se envía:

<form action=””> de esta forma se pasan los validadores y en laURL se ven los valores
tecleados en los controles del formulario.

 method: modo de envío de los datos. Tenemos la opción GET y POST.

GET: los datos se envían como un anexo a la URL. Los datos son visibles en el campo de
dirección del navegador (URI).

POST: los datos se envían en el cuerpo de la petición y, por tanto, no son visibles en
una navegación convencional. Para verlos debemos acceder a la herramienta de
desarrolladores. Se usa POST casi siempre.

Añadimos required (campo requerido)

 target: nos indica

donde mostrar el
contenido devuelto
por el servidor tras el
envío del formulario.
Tenemos varias opciones, que podemos ver en w3schools, pero las más
utilizadas son:

_self: (es la opción por defecto) lo muestra en la misma pestaña.

_blank: en una pestaña nueva.

autocomplete: Autocompletar permite que el navegador prediga el valor. Cuando un

usuario comienza a escribir en un campo, el navegador debe mostrar opciones para
completar el campo, en función de los valores escritos anteriormente. Las opciones
son on y off.

 enctype: se usa para indicar el formato de codificación de los datos que

estamos remitiendo. El valor predeterminado es application/x-www-form-
urlencoded. text/plain hace que se reemplacen los espacios por el signo +; se
emplea para textos sencillos. Si vamos a enviar archivos, fotos, etc. usaremos
la codificación multipart/form-data donde ningún carácter se codifica.
 <input>
Permite proporcionar un componente interactivo para que el usuario introduzca
información para su envío a un servidor web.

Para definir la mayoría de los elementos que puede contener un formulario se utiliza la
etiqueta <input>, esta etiqueta cuenta con gran cantidad de atributos:

Atributos comunes (muchos de ellos se pueden utilizar con otros elementos):

autocomplete:permite activar el autocompletado del componente.

autofocus: el componente que tiene este atributo obtiene el foco cuando se carga la página.
Sólo hay que utilizarlo, por lo tanto, en un elemento por página.

disabled:desactiva el componente.

for:contiene la referencia al id de un formulario, permitiendo que el componente pertenezca

al formulario referenciado, aunque no sea un descendiente de este.

list:permite asociar el componente con una lista de opciones definida en un elemento

<datalist>. Válido para casi todos los tipos.

name:nombre del elemento de cara a su envío al servidor. Es importante recordar que, si el

elemento no tiene este atributo, no será enviado, aunque este contenido por el formulario.

placeholder:pese a que no es común en todos los tipos de elemento <input>, este atributo
está presente en bastante de ellos. Recibe como valor un texto y este se muestra en el espacio
destinado a la entrada de datos. Desaparece cuando el usuario introduce el valor. Permite
indicar al usuario qué tipo de dato espera el elemento.

type:determina la apariencia del componente, el tipo de dato que se va a introducir y la

validación. No es obligatorio. Si se omite, el tipo seleccionado por defecto es text.

value:valor por defecto del componente.

Principales valores del atributo type:
También los tenemos en [Link]

1.1.1 Cuadro de texto

Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se
muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier
texto:

Figura. Ejemplo de etiqueta input (type=text)

A continuación, se muestra el código HTML correspondiente al ejemplo anterior:

Nombre <br/>
<inputtype="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
más importante en los campos del formulario. De hecho, si un campo no incluye el
atributo name, sus datos no se envían al [Link] valor que se indica en el atributo
name es el nombre que utiliza la aplicación del servidor para obtener el valor de este
campo de formulario.

Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los
datos a una aplicación del servidor para que procese la información y genere una
respuesta adecuada. En el servidor, la aplicación que procesa los datos debe
obtener en primer lugar toda la información 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 aplicación; no se debe modificar su
valor sin modificar la aplicación y no se deben utilizar caracteres problemáticos en
programación (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 deberían estar vacíos.
Por lo tanto, o no se añade el atributo value o se incluye con un valor vacío value="".
Si por el contrario se crea un formulario para modificar datos, lo lógico 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 Pérez" />

Si no se especifica un tamaño, el navegador muestra el cuadro de texto con un

tamaño predeterminado. El atributo size permite establecer el tamaño, 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 dirección deben mostrar
más caracteres de lo normal (<input size="100" ...) y otros campos como el código
postal deben mostrar menos caracteres de lo normal (<input size="5"...).

Además de controlar el tamaño con el que se muestra un cuadro de texto, también

se puede limitar el tamaño del texto introducido. El atributo maxlengthpermite
establecer el máximo número de caracteres que el usuario puede introducir en un
cuadro de texto. Su uso es imprescindible para campos como el código postal, el
número 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 disableddeshabilita un
cuadro de texto de forma que el usuario no pueda modificarlo y además, el
navegador no envía sus datos al servidor.

1.1.2 Cuadro de contraseña

La única diferencia entre este control y el cuadro de texto normal es que el texto
que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su
lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que
es ideal para escribir contraseñas y otros datos sensibles.

Figura Ejemplo de etiqueta input (type=password)

Contraseña <br/>
<inputtype="password"name="contrasena"value=""/>

Cambiando el valor del atributo type por password se transforma el cuadro de texto
normal en un cuadro de contraseña. Todos los demás atributos se utilizan de la
misma forma y tienen el mismo significado.

1.1.3 Checkbox

Los checkbox o "casillas de verificación" 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 Ejemplo de etiqueta input (type=checkbox)

Puestos de trabajo buscados <br/>

<inputname="puesto_directivo"type="checkbox"value="direccion"/>
Dirección
<inputname="puesto_tecnico"type="checkbox"value="tecnico"/>
Técnico
<inputname="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 ningún atributo, por lo que es necesario añadirlo
manualmente fuera del control del formulario. Si no se añade un texto al lado de la
etiqueta <input /> del checkbox, el usuario sólo ve un pequeño cuadrado sin ninguna
información relativa a la finalidad de ese checkbox.

El valor del atributo value, junto con el valor del atributo name, es la información
que llega al servidor cuando el usuario envía 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 checkbox permanece sin seleccionar. Aunque resulta
redundante que el nombre y el valor del atributo sean idénticos, es obligatorio
indicarlo de esta forma porque los atributos en XHTML no pueden tener valores
vacíos:

<input type="checkbox" checked="checked" ... /> Checkbox

seleccionado por defecto

1.1.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 opción entre
las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona
una opción, automáticamente se deselecciona la otra opción que estaba
seleccionaba.

Figura Ejemplo de etiqueta input (type=radio)

Sexo <br/>
<inputtype="radio"name="sexo"value="hombre"checked="checked"/>
Hombre
<inputtype="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 están relacionados. Por lo tanto,
cuando varios radiobutton tienen el mismo valor en su atributo name, el navegador
sabe que están relacionados y puede deseleccionar una opción del grupo de
radiobutton cuando se seleccione otra opción.

1.1.5 Botón de envío de formulario

La mayoría de formularios dispone de un botón para enviar al servidor los datos

introducidos por el usuario:

Figura Ejemplo de etiqueta input (type=submit)

<inputtype="submit"name="buscar"value="Buscar"/>

El valor del atributo type para este control de formulario es submit. El navegador se
encarga de enviar automáticamente los datos cuando el usuario pincha sobre este
tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se
establece el atributo value, el navegador muestra el texto predefinido, que es enviar.

1.1.6 Botón de reseteo del formulario

Aunque su uso era muy popular hace unos años, la mayoría de formularios
modernos ya no utilizan este tipo de botón. Se trata de un botón especial que borra
todos los datos introducidos por el usuario y devuelve el formulario a su estado
original:

Figura Ejemplo de etiqueta input (type=reset)

<inputtype="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 botón, el navegador borra toda la información introducida y muestra el
formulario en su estado original. Si el formulario no contenía originalmente ningún
valor, el botón de reset lo vuelve a mostrar vacío. si el formulario contenía
información, el botón reset vuelve a mostrar la misma información original.

Como es habitual en los botones de formulario, el atributo value permite establecer

el texto que muestra el botón. Si no es utiliza este atributo, el navegador muestra el
texto predefinido del botón, que en este caso es Restablecer.
 1.1.7 Ficheros adjuntos

Los formularios también permiten adjuntar archivos para subirlos al servidor.

Aunque desde el punto de vista de HTML y del navegador no existe ninguna
limitación sobre el número, tipo o tamaño total de los archivos que se pueden
adjuntar, todos los servidores añaden restricciones por motivos de seguridad.

Figura. 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 botón que permite navegar por los directorios y archivos del
ordenador del usuario.

Si se incluye un control para adjuntar archivos, es obligatorio añadir 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>

1.1.8 Campos ocultos

Los campos ocultos se emplean para añadir información oculta en el formulario:

Figura Ejemplo de etiqueta input (type=hidden)

<inputtype="hidden"name="url_previa"value="/articulo/
[Link]"/>

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
información que necesita el servidor pero que no es necesario o no es posible que
la establezca el usuario.

1.1.9 Botón de imagen

El aspecto de los botones de formulario se puede personalizar por completo, ya

que incluso es posible utilizar una imagen como botón:

Figura. Ejemplo de etiqueta input (type=image)

<inputtype="image"name="enviar"src="[Link]"/>

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 botón
normal.

Su principal ventaja es que permite personalizar por completo la estética de los

botones y mostrarlos con un aspecto homogéneo 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.

1.1.10 Botón

Algunos formularios complejos necesitan botones más avanzados que los de enviar
datos (type="submit") y resetear el formulario (type="reset"). Por ese motivo, el
estándar HTML/XHTML define un botón de tipo genérico:

Figura Ejemplo de etiqueta input (type=button)

<inputtype="button"name="guardar"value="Guardar Cambios"/>

El valor del atributo type para este control de formulario es button. Si pruebas a
pulsar un botón de este tipo, verás que el navegador no hace nada: no envía los
datos al servidor y no borra los datos introducidos. Este tipo de botones sólo son
útiles si se utilizan junto con el lenguaje de programación JavaScript o VBScript. Si la
página incluye código JavaScript, los botones de este tipo se pueden programar para
que realicen cualquier tarea compleja cuando se pulsa sobre ellos.
Para insertar el código de estos lenguajes se usa el atributo ONCLICK.

<input type=”button” value=”texto botón” onclick=”código de script”

Ejemplos de uso de onclick.

<button>
[Link]

<select>
Permite seleccionar una opción de un conjunto de ítems mostrado como una lista de opciones.
Cada opción seleccionable la pondrems con <option> o <datalist>

<select>
<option>Baloncesto</option>
<option>Futbol</option>
<option>Tenis</option>
<option>Atletismo</option>
<option>Badminton</option>
<option>Karate</option>
</select>

Se ve así:

Si añadimos los atributos

multiple: admite selección múltiple.

size: número de líneas que se mostrará.

<option>
Atributos:

 disabled: si la opción está deshabilitada.

 selected: la opción debe estar seleccionada al cargar el documento.
 value: dato que se envía al navegador
<outgroup>
Agrupa un conjunto de elementos <option> de un elemento <select>

<datalist>
define un conjunto de elementos <option> como una lista para su uso, podemos usarla en
otros elementos del formulario. Así, cada vez que pongamos el input con el list, nos saldrá ese
formulario.

Tiene un atributo id que es referenciado por parte del atributo list del componente <input>
<fieldset>
Permite agrupar un conjunto de campo de un formulario. La agrupación es de forma visual,
mediante un marco y de forma funcional, permitiendo realizar acciones sobre todos los
elementos agrupados. Con <legend> se puede asignar un texto que haga de título al marco.
<label>
Identifica una etiqueta de un campo de entrada de datos del formulario. También permite
poner el foco en el campo de entrada, pulsando sobre el texto de la etiqueta. La asociación se
puede realizar de 2 maneras: Conteniendo el campo de entrada entre las etiquetas de
apertura y cierre del elemento <label> o utilizando el atributo for cuyo valor deberá ser el del
atributo id del componente del formulario relacionado.

 for: Contiene la referencia al componente con el que está asociado el elemento

<label>.
<meter>

Representa un valor dentro de un rango. Resulta útil para representar calificaciones,

resultados en encuestas, grado de ocupación de un recurso, etcétera.
Los atributos están en el código.

<p>
<!-- meter representa un valor dentro de un rango-->
Avance del progreso:
<metermin="0"max="100"value="20"></meter>
<!--value 20-->
</p>
<p>
<!--value 90 nos indica el valor actual-->
Avance del progreso:
<metermin="0"max="100"value="90"></meter>
</p>
<p>
<!--low indica el valor por debajo del cual se
considera bajo-->
Calificación:
<metermin="0"max="10"low="5"high="7"optimum="8"value="4.9"></meter>
</p>
<p>
<!--value = 5 -->
Calificación:
<metermin="0"max="10"low="5"high="7"optimum="8"value="5"></meter>
</p>
<p>
<!--value = 6.9 -->
Calificación:
<metermin="0"max="10"low="5"high="7"optimum="8"value="6.9"></meter>
</p>
<p>
<!--value = 7.5 -->
Calificación:
<metermin="0"max="10"low="5"high="7"optimum="8"value="7.5"></meter>
</p>
<p>
<!--value = 9 -->
Calificación:
<metermin="0"max="10"low="5"high="7"optimum="8"value="9"></meter>
</p>
<textarea>
Proporciona un área para la introducción de texto. A diferencia de input, aquí podemos
introducir múltiples líneas.

Atributos de textarea:

[Link]

Validaciones:
Antes de enviar un formulario al servidor es conveniente validar que los datos introducidos por
el usuario cumplen con las restricciones que se hayan establecido. Por ejemplo, algunos
campos de entrada serán obligatorios, los valores de determinados campos tendrán que estar
dentro de los rangos definidos y la secuencia de aracteres introducida deberá seguir un patrón
concreto.

Durante la definición de un formulario de entrada de datos, Se especifican las condiciones que

deben cumplir dichos datos, siendo esta una tarea ligada íntimamente a la fase del diseño.

La validación de las reglas se realiza en una fase previa al envío del formulario mediante la
pulsación de un elemento. <input> de tipo submit. Alternativamente, se pueden programar las
reglas de validación en Javascript, pero esta opción siempre requiere más esfuerzo y deberá
elegirse solo en caso de necesidad.

Todos los componentes de entrada de datos tienen atributos para definir reglas de validación.
Algunos de los atributos referentes a la validación de formularios son los siguientes.

required:Indica que el campo de entrada es obligatorio. Hay que tener presente que en los
campos de entrada de tipo texto., Los espacios en blanco ya se consideran como valores
válidos.

minlength y maxlength:Determinan las longitudes mínimas y máximas en campos de entrada

de tipo texto.

min y max:Establecen los valores mínimos y máximos en campos de entrada numéricos.

type:En función del valor asignado a este parámetro., Se fijan los valores correctos de entrada.
Por ejemplo, si el valor es email, Se validará que el valor introducido es una dirección de correo
electrónico.

pattern:Comprueba que el valor introducido es acorde a una expresión regular.

Una expresión regular es un patrón formado por una cadena de caracteres que define una
regla. Es un mecanismo extremadamente flexible, Pero que tiene un grado de complejidad
relativamente alto.

Ejemplo: Dar un campo de entrada <input> de tipo text, Te desea que el valor introducido esté
formado por una secuencia de caracteres. Formado por un dígito numérico, seguido de una
letra minúscula y finalizado por el carácter #. la expresión regular capaz de validar esta regla
será la siguiente:

\d[a-z]#

Donde:

\d Indica que se debe introducir un dígito numérico..

[a-z] Señala que se debe introducir una letra minúscula entre la a y la letra z.

# Informa de que hay que introducir el símbolo de la almohadilla (#).

Valores válidos para esta expresión serán, por ejemplo: 1f#, 8i#, 0w#.
En un formulario HTML, se puede incorporar esta validación en un campo <input> de tipo text
de la siguiente manera.

<formaction="[Link]"method="post">
<!-- pattern de validación-->
<inputtype="text"name="comando"pattern="\d[a-z]#">
<inputtype="submit"value="Enviar">
</form>

Nota:

Una aplicación web consta de una parte denominada cliente, que se ejecuta en el navegador el
navegador y de otra parte denominada servidor. Las validaciones se pueden realizar en en
ambas partes de la aplicación. La validación presentada. Es correspondiente a la parte cliente.

Las validaciones realizadas en el lado cliente. Son relativamente sencillas de puentear, si se

dispone de unos conocimientos técnicos intermedios sobre el desarrollo de aplicaciones web.
Por eso es conveniente disponer de validación de datos en la parte ubicada en el servidor, ya
que es mucho más difícil de evitar.