LM T3: Formularios
TEMA 3: Formularios
Contenidos:
1. Introducción a los formularios
2. La etiqueta form y sus atributos
3. Etiquetas de los campos de un formulario
4. Etiquetas <fieldset> y <legend>
5. Eventos y javascript
6. Nuevos campos para formularios en HTML5
7. Resumen
Reflexión
Hasta ahora hemos visto cómo se muestra la información al usuario, pero el usuario en ningún momento ha
intervenido en el proceso.
Hoy en día estamos muy acostumbrados a rellenar información a través de la web. Compramos entradas, nos
registramos, realizamos comentarios sobre eventos y artículos…. La mayoría de esa información la introducimos a
través de formularios.
Uno de los formularios más sencillos es el buscador de Google. El usuario introduce en un campo de texto el valor
de la cadena que quiere buscar… ¿Te has fijado que arriba, en la url, aparece todo lo que escribes en el campo
de búsqueda? ¿Y cuando ponemos nuestros datos sensibles como contraseñas o número de tarjeta? ¿Te has
fijado si también sale en la url?.
Todos estos temas y otras preguntas sobre formularios las solucionaremos en este tema.
1. Introducción a los formularios.
Con los formularios conseguimos dar interactividad a la página y que los usuarios de nuestra página puedan
ofrecernos información.
El usuario suele rellenar los campos correspondientes y al final del formulario siempre nos encontramos con un
botón para enviar la información al servidor.
La información es enviada al servidor, pero ¿Cómo sabe el servidor qué tiene que hacer con ella?
Cuando le damos al botón, enviar, luego veremos que en realidad toda esa información se envía a una página que
el servidor tiene que tener preparada para recoger toda esa información y tratarla. Esa página suele estar escrita
en un lenguaje de servidor, capaz de tratar esa información. Los lenguajes de servidor quedan fuera del contenido
de este módulo, pero los más utilizados hoy en día son: PHP, Phyton, ASP…
Una vez que el contenido es recogido la página que recibe la información, suele crear sentencias que al
ejecutarse, hacen que se almacene la información en una base de datos.
Actividad
A través de los formularios (campos que el usuario debe rellenar, seleccionar, pulsar o interactuar de alguna
manera), el usuario es capaz de enviar información al servidor.
Realiza una “collage” sencillo, con distintos campos de formularios que encuentres en la visita a algunas páginas
web.
2. La etiqueta form.
La etiqueta form se utiliza para insertar un formulario en el documento web. Todos los campos del formulario estarán
dentro de esta etiqueta incluido el botón.
Sólo aparece una vez por formulario.
Atributos:
• name=”valor”
Da un nombre único al formulario. Es importante que el formulario siempre tenga un nombre que lo
identifique.
• action=”valor”
Donde valor es la ruta donde se encuentra la página que recogerá y tratará los datos introducidos en el
formulario. Esa página, estará escrita en lenguaje servidor. Como ya dijimos el lenguaje de servidor se
escapa a los contenidos de este curso, por lo que a nosotros nos tendrían que dar la ruta. Pero siempre
debe aparecer (Para los ejercicios de clase pondremos action=””)
Ejemplo: <form action=”../php/[Link]”>
• enctype=”valor”
Indica el tipo de datos que se envía al servidor. Normalmente valor será “text/plain”, para texto plano. Pero
si por lo que sea al servidor se envía algún archivo, tendremos que sustituirlo por "multipart/form-data"
• method=”valor”
Expecifica el método de envío de los datos. Se pueden utilizar dos métodos, por lo que valor podrá ser:
o get.
Se envían los nombres de los campos y su contenido en la url con el formato:
( [Link]
Este es el método utilizado por el buscador de Google, y por eso el texto que introducimos en el
campo de búsqueda aparece en la url. Como imaginarás, este no es el mejor método para enviar
información sensible al servidor.
o post.
No se envía los campos ni su contenido en la url.
Por eso, este método es más adecuado para enviar información sensible al servidor.
Ejemplo:
La página principal de google es un formulario (con solo un campo de texto para realizar la búsqueda). Al
pulsar sobre el botón buscar, lo que hacemos es enviar la información. Google utiliza el envío post, porque
si nos fijamos en la url, del navegador, veremos la información introducida.
Imaginad que tuviésemos que introducir los datos de nuestra tarjeta de crédito :) ¿Cuál utilizaríais?
Además get limita la cantidad de datos que se pueden enviar, por lo tanto se recomienda el uso de post.
Un formulario se estructura en cuatro partes:
▪ Inicio del formulario: Etiqueta <form>
▪ Elementos del formulario.
▪ Botones de acción
▪ Fin del formulario : </form>
Las etiquetas que se ven a continuación siempre van situadas siempre dentro de la etiqueta <form>
3. Etiquetas de los campos del formulario
Existen muchos tipos de campos a través de los cuales podemos introducir información en un formulario.
La etiqueta <input>
Esta etiqueta sirve para introducir un campo.
No se cierra.
Atributos:
• name=”valor”
Es el nombre que identifica al campo. Es necesario para luego poder hacer referencia a él, por ejemplo
desde algún script.
• type=”valor”
Indica el tipo de campo que se va a introducir. Los valores del campo pueden ser:
- type=”text”. Indica que el campo que se va a introducir es un campo de texto.
Ejemplo:
- type=”password”. El campo será de texto cifrado.
Ejemplo:
- type=”radio”. Se utiliza para introducir opciones de tipo radio. Por cada opción habrá que introducir un
campo input y además si deseamos que las opciones sean excluyentes entre sí, tendrán que tener el
mismo nombre:
Ejemplo:
- type=”checkbox”. Es un cuadro de verificación. Puede estar marcado o desmarcado.
Ejemplo:
- type=”button”. Introduce un botón en el formulario. Para que ese botón realice alguna función deberá ir
acompañado de código de script, por ejemplo javascript.
Ejemplo:
- type=”submit”. Es un botón que envía los datos del formulario a la página que se indica en el atributo
action del formulario.
Ejemplo:
- type=”reset”. Recupera los valores por defecto de todos los elementos del formulario.
Ejemplo:
- type=”file”. Introduce un campo para realizar una búsqueda en el disco duro. Hay que observar que es
necesario cambiar el valor del atributo enctype del formulario por "multipart/form-data"
Ejemplo:
i0516b
- type=”hidden”. Es un campo que no es visible para el usuario. Se utiliza sólo para enviar datos al servidor
que no es necesario que introduzca el usuario.
Ejemplo:
- type=”image”. Permite utilizar una imagen para realizar la misma función del botón submit, lo que nos
permite modificar la apariencia de dicho botón. Los datos del formulario se enviarán a la página
especificada en el atributo action.
Ejemplo:
El resultado en el navegador será:
i0519
• size=”valor”
Donde valor indica el tamaño máximo en caracteres que tendrá el control.
Ejemplo:
• maxlength=”valor”
Donde valor indica el número de caracteres máximo que podrá tener el valor del control.
Por ejemplo, si el maxlength del campo nombre se ha definido con 5 caracteres, no podrá introducirse en el
campo el nombre Rosalía. Sólo nos permitirá introducir Rosal.
• src=”ruta”
Indica la ruta de la imagen que acompaña se cargará en el botón. Acompaña al atributo type=”image”.
• checked
Hace que campos aparezcan marcados por defecto (se utiliza para los campos radio y los checkbox).
• readonly
Indica que el campo al que acompañe este atributo no pueda modificar su valor.
• disabled
El control aparece deshabilitado y el usuario no podrá utilizarlo. Además suele aparecer con un color
grisáceo.
• value=”valor”
valor será el valor que se enviará al servidor al realizar el envío de los datos al formulario.
Actividad
Responde verdadero o falso para las siguientes cuestiones.
1. Con el atributo method=”post”, se ven los valores de los campos del formulario en la url.
Verdadero Falso
2. Con el atributo type=”image”, puedo modificar los botones submit, reset y button
Verdadero Falso
3. El atributo action=”” que acompaña a la etiqueta form indica la página a la que se envían los
datos. Normalmente una página con extensión .html
Verdadero Falso
4. Si en el formulario, voy a subir un fichero al servidor (con el comando <input type=”file”>,
tengo que poner el atributo enctype="multipart/form-data" en la etiqueta form.
Verdadero Falso
5. Si se desea que en el formulario el campo radio sea excluyente (sólo pueda haber una opción
seleccionada), todos los elementos radio deben tener el mismo nombre)
Verdadero Falso
1-Falso,2-Falso, 3-Falso, 4-Verdadero, 5-Verdadero
Soluciones:
Actividad
Crea un formulario igual que el de la imagen. El número máximo de caracteres que se puede introducir es 20 en el
campo Nombre y 10 en el campo Clave.
Solución:
La etiqueta <button>
Como se ha visto anteriormente, con la etiqueta <input> y el atributo image, podemos personalizar el botón de
submit. Pero ¿Qué ocurre se queremos personalizar los botones de tipo button o reset ?
La etiqueta <button> nos permite personalizar cualquier tipo de botón.
Atributos:
• name=”valor”
Es el nombre que identifica al botón.
• type=”valor”
Valor puede ser: submit, reset, o button
• accesskey=”valor”
Permite asociar una tecla a la ejecución del botón.
Ejemplo: Utilizaremos un botón submit y un botón reset:
Actividad
Dibuja dos botones sencillos con el editor de texto, uno para el botón submit y otro para el reset. Con ayuda de
cualquier herramienta de dibujo, (puede ser el paint de Windows), recórtalos y guárdalos como imagen.
Utilízalos para personalizar los botones del formulario anterior.
La etiqueta <textarea>
Es un área para que el usuario pueda incluir un texto de varias líneas.
Atributos:
• name=”valor”
• rows=”valor”
Número de filas que tendrá la caja.
• cols=”valor”
Número de columnas que tendrá la caja.
• readonly
• acceskey=”valor”
Ejemplo:
Etiquetas para desplegable <select>, <option>, <optgroup>
La etiqueta <select> sirve para insertar en el formulario un campo desplegable. Siempre va acompañada de la
etiqueta <option >
Atributos:
• name=”valor”
• size=”valor”
Donde valor es el número de filas como máximo que puede tener el desplegable.
• multiple.
Permite que el usuario pueda seleccionar más de una opción del desplegable.
Indica cada una de las opciones del desplegable.
Atributos:
• selected.
Indica que esa opción es la seleccionada por defecto.
• value=”valor”
Valor será el dato enviado al servidor. Si no aparece este atributo, por defecto se envía el texto del
desplegable.
Ejemplo: Desplegable sencillo.
Ejemplo:
Desplegable Múltiple (se puede seleccionar más de una opción). El tamaño es igual a 6 que en este caso coincide
con el número de opciones, por eso no aparece la pestaña del desplegable.
Para pulsar más de una opción, pulsar la tecla Ctrl.
El código para el ejemplo anterior es:
La etiqueta <optgroup> sirve para realizar grupos de opciones dentro de un desplegable.
Atributos
• label=”value”
Value es el nombre del grupo de opciones, que además aparece también en el desplegable en negrita.
• disabled
4. Etiquetas <fieldset> y <legend>
La etiqueta <fieldset> sirve para agrupar los campos del formulario en la página a través de un marco. Pueden
anidarse y situarse unos dentro de otros.
La etiqueta <legend>, se situa dentro de la etiqueta <fieldset> y se utilizar para dar un título al grupo de controles
agrupados por el fieldset.
Ejemplo:
Que se verá en el navegador de la siguiente forma:
5. Eventos y javascript
Los eventos permiten la interactividad con la página web. Los eventos son “acciones”, que realiza el usuario (o el
navegador), como pulsar un botón, pasar por encima de algún elemento con el ratón, cargar una página nueva,
etc a los que le asociamos instrucciones en javascript o llamadas a funciones.
Si recuerdas, el botón de tipo submit, era el encargado de enviar la información al servidor, pero existen otros
botones que en principio por defecto no realizan ninguna función. Habría que programar código por ejemplo en
javascript que indique…. “Cuando hagas clic en el botón haz esto” o “Cuando pases por encima del botón, haz lo
otro”, etc.
El código javascript queda fuera de este módulo, pero podemos ver un ejemplo sencillo en el que al pulsar el
botón se abra un cuadro de diálogo.
En el ejemplo anterior, el evento que se utiliza es el evento “Hacer clic”, pero puede haber muchos otros más
eventos e incluso no sólo se aplica al botón, sino a cualquier otro campo por
Ejemplos: Al escribir en un campo de texto…,
Al cargar la página…
Al cambiar el valor del desplegable…
El listado de eventos que se pueden utilizar sería:
• Onload: Cuando se carga la página
• Onunload: Cuando se cierra la ventana
• Onclick: Al hacer click sobre el elemento
• Ondblclick: Hacer doble click
• Onmousedown: Cuando el botón del ratón es presionado sobre el elemento(Independientemente de si se
suelta o no)
• Onmouseup: El botón del ratón se suelta sobre el elemento.
• Onmouseover: Cuando el puntero del ratón se posiciona sobre el elemento
• Onmouseover: Cuando el puntero se mueve sobre el elemento
• Onmouseout: Cuando el puntero pierde la posición sobre el elemento
• Onfocus: Cuando el elemento recibe el foco.
• Onblur: Cuando el elemento pierde el foco
• Onkeypress: Cuando se pulsa una tecla (Onkeydown y onkeyup)
• Onsubmit: Se pulsa el botón submit
• Onreset: Se pulsa cuando se borran los valores del formulario
• Onselect: Cuando se selecciona un texto en un campo de texto
• Onchange: Cuando el control pierde el foco y su valor ha sido modificado
En los formularios, habrás observado que muchas veces aparecen campos obligatorios, y que en caso de no
cumplimentar dicho campo, no te permite avanzar ni se envía la información.
Es necesario marcar los campos obligatorios y confirmar que el campo está relleno antes de enviar los datos al
servidor.
Una de las formas más habituales es utilizar *, o la palabra (obligatorio)
En html4, este tipo de controles se realizan con javascript.
6. Nuevos campos de HTML 5
HTML 5 se ha convertido en el nuevo estándar en lo que se refiere a lenguaje de marcas. Todos los navegadores
nuevos lo implementan, pero los navegadores más antiguos no lo soportan, por lo que, es necesario actualizar los
navegadores a la última versión.
HTML5 incorpora nuevos elementos que facilitan la validación de los datos introducidos en algunos campos. Estos
campos aún no se visualizan correctamente en todos los navegadores. En concreto en Internet Explorer.
La etiqueta <type> ha añadido nuevos atributos y nuevos valores.
• type : Aparecen nuevos valores para este atributo, lo que da como resultado que aparezcan elementos
nuevos en el formulario
• placeholder: Permite insertar un texto dentro del elemento que será eliminado al obtener el foco.
• required: Hace obligatorio que el valor del campo no sea vacío.
Campos de texto controlados. Required
Como dijimos antes, en versiones anteriores de HTML, para evitar que el usuario dejase campos del formulario sin
rellenar, utilizábamos javascript. HTML5 incluye el control de campos vacíos con el atributo required. Si al pulsar
el botón de envío de datos del formulario el campo está vacío, dará un mensaje de error al usuario.
Campos de texto con información sobre su contenido. Placeholder
Hasta ahora, los campos de texto siempre los hemos dejado en blanco, (no hemos dado valor al atributo value o si
lo hemos hecho lo hemos dejado vacío). Si hubiésemos asignado un valor al atributo value inicialmente, al
cargarse la página aparecerá el campo con dicho valor. Podríamos usar esto para indicar qué tipo de información
hay que introducir en el campo de texto, pero sería algo engorroso habría que borrarlo manualmente.
HTML5 ha añadido el atributo placeholder, que aplicado al campo de texto, permite que aparezca un texto dentro
del mismo y que justo al hacer clic dentro de este campo el texto desaparezca, sin tener que borrarlo
manualmente.
Campo para el correo electrónico
En HTML 4, cuando queríamos introducir un correo solíamos utilizar un campo de texto. Para controlar que el
correo cumpliese había que utilizar javascript.
Con HTML 5, en la etiqueta input aparece el tipo email.
Ejemplo:
Correo Electrónico: <input type="email" name="email" required />
Url
Con la etiqueta url, el usuario puede incluir una url y comprobar que el formato introducido es correcto. Si no se
introduce un formato correcto recibirá un error.
Ejemplo:
URL: <input type="url" name="url" placeholder="Escripe la URL" />
Fecha
HTML5, incluye un nuevo campo para poder introducir fechas. En el navegador Ópera aparece un calendario para
que el usuario pueda acceder con el ratón a la fecha que desea introducir.
(Nota: Esta impresión de pantalla es de Chrome)
Hora
HTML5, incluye un nuevo campo para poder introducir hora. En el navegador Ópera aparece un calendario para
que el usuario pueda acceder con el ratón a la hora que desea introducir.
Ejemplo:
Hora: <input type="time" name="hora" />
(Nota: Esta impresión de pantalla es de Chrome)
Números
Para controlar que el valor introducido en un campo es un valor numérico entero, utilizaremos el input number:
Ejemplo:
<input type="number" name="numero" />
(Nota: Esta impresión de pantalla es de Chrome)
Si el valor introducido no es un número el usuario obtendrá un error.
(Nota: Esta impresión de pantalla es de Chrome)
También podemos elegir el rango válido del número que se debe introducir:
<input type="number" name="numero" min="-10" max="10" value="0" />
(Nota: Esta impresión de pantalla es de Chrome)
Rango de números
Este elemento sirve para seleccionar un número, a través de un control deslizable.
Ejemplo:
<input type="range" name="range_control" min="0" max="10" value="0" />
(Nota: Esta impresión de pantalla es de Chrome)
Búsqueda
HTML5 incluye un elemento específico para realizar búsquedas.
Ejemplo:
<input type="search" name="busqueda" placeholder="Buscar..." />
7. Resumen.
En este tema, hemos visto la importancia de los formularios en HTML, y hemos aprendido cómo crear formularios completos con
todos los tipos de campos que se pueden utilizar.
También hemos visto la evolución de los formularios de HTML 4 a HTML 5
