Formulario
Un formulario es necesario en cualquier página web, pues permiten al usuario enviar datos al servidor
El ejemplo más común es el formulario de registro o login
Los formularios utilizan el elemento form
Dentro de este elemento estarán los controles que componen el formulario y será de esos controles de los que se extraerá la información que recibirá el servidor
A la hora de definir un formulario debemos indicar la URL la cuál recibirá los datos y qué tipo de método HTTP queremos utilizar
Disponemos de los siguientes atributos:
- id
es un identificador único, es muy útil para reconocer el elemento desde JavaScript o para procesarlo desde el servidor
- name
este será el nombre del dato que será enviado con la petición HTTP, podrá ser accedido desde JavaScript o desde la URL que se indicó en el atributo action para recibir los datos en el servidor
- action
normalmente contiene la URL de la aplicación que recibirá la respuesta en el servidor
Por ejemplo un script en PHP, aunque también podría ser un archivo de código JavaScript
- method
tipo de método HTTP para enviar los datos al servidor
Puede ser:
- GET
envía la información al servidor como parámetros dentro de la URL indicada en el atributo action
Estos parámetros serán visibles en la barra de navegación y sólo es posible enviar hasta 500 bytes
Por seguridad, se desaconseja utilizar este método, ya que los datos enviados quedan expuestos en la barra de navegación y alguien ajeno al usuario, podría manipularlos antes de ser procesados por el servidor
- POST
envía la información al servidor en la misma petición HTTP
No tiene la limitación de tamaño en los datos enviados
Permite enviar archivos adjuntos y los datos enviados no son visibles en la barra del navegador
Se recomienda utilizar este método por seguridad, ya que dificulta la de los datos manipulación antes de ser procesados por el servidor, aunque sigue siendo posible
Elementos input
El elemento input sirve para crear la gran mayoría de los controles que pueden usarse en un formulario
Dependiendo de sus atributos podremos crear botones, casillas de verificación e incluso adjuntar archivos
La gran mayoría de estos controles son nuevos gracias al estándar HTML5 como el control de fechas, colores, etc; y funcionan a través de cuadros de diálogo específicos para cada navegador
A causa de esta circunstancia, es posible que difieran de un navegador a otro o incluso que no sean soportados si el mismo es muy antiguo o no soporta HTML5
Dispone de atributos generales que todos los elementos input poseen y atributos específicos para cada tipo de elemento
Atributos generales:
- id
es un identificador único, es muy útil para reconocer el elemento desde JavaScript o para procesarlo desde el servidor
- name
este será el nombre del dato que será enviado con la petición HTTP, podrá ser accedido desde JavaScript o desde la URL que se indicó en el atributo action para recibir los datos en el servidor
- type
es el tipo específico de control, este atributo le dice al navegador qué debe pintar en pantalla y qué atributos adicionales podría contener
Así que es importante que si tiene atributos específicos para ese tipo, los elijamos correctamente o el navegador los ignorará al no entenderlos
- form
identificador del formulario, enlaza el control con el formulario mediante el valor de su atributo id
Atributos específicos:
- checked
indica que el control ha sido seleccionado
Se utiliza sólo con las casillas de selección y las casillas de opción
- autocomplete
indica al navegador que complete el campo con los datos introducidos por el usuario anteriormente
No puede utilizarse ni con las casillas de selección, ni con las casillas de opción, ni con los botones
- list
sirve para definir una lista de valores por defecto que se mostraran al usuario como posibles entradas al usuario
No puede utilizarse ni con las casillas de selección, ni con las casillas de opción, ni con los botones
Se utiliza asociando el identificador del control a un elemento datalist en el cuál enumeraremos los elementos que componen la lista
Estos valores son de sólo lectura, el usuario no puede modificarlos ni añadir nuevos
El elemento datalist no tiene asociada ninguna visualización, sin embargo puede asociarse mediante su id un elemento label con el que podremos visualizar el valor elegido de la lista
- maxlenght
indica la longitud máxima que podemos utilizar en el texto introducido
Se utiliza con los controles de cuadro de texto o aquellos similares a él (text, password, email, url, tel, search, etc)
- placeholder
permite añadir un texto por defecto para dar una idea al usuario del tipo de control que es o de qué se espera que introduzca en el mismo
Cuando se utiliza, no suele usarse el elemento label
- pattern
indica una expresión regular que será utilizada por el navegador para validar el valor introducido en el campo
En caso de que el valor introducido no se ajuste a la expresión regular, mostrará un mensaje de error al usuario indicandolo
Se utiliza con los controles de cuadro de texto o aquellos similares a él (text, password, email, url, tel, search, etc)
- multiple
se utiliza con los tipos email y file
Permite incluir más de una dirección de correo electrónico o adjuntar más de un archivo
- readonly
impide que el campo sea modificado por el usuario
El navegador lo mostrará ensombrecido para indicar al usuario que no puede ser modificado
El valor del campo se recogerá obligatoriamente del atributo value, por lo que es necesario que tenga algún valor
- required
indica al navegador que el campo es obligatorio que tenga algún valor
Es muy útil para realizar validaciones porque en caso de que el campo no haya sido rellenado, mostrará un mensaje de error al usuario
Cuadros de texto
Para crear un cuadro de texto al atributo type le asignaremos el valor text
Dispone del atributo específico value en el cuál se guardará el valor por defecto que será mostrado al usuario
No tiene etiqueta de cierre
En el ejemplo se ha especificado un esqueleto de formulario sin atributos, ya que no necesitamos que sea funcional para mostrar los distintos controles. Lo vamos a hacer con todos los ejemplos a partir de ahora
También se ha incluido un control de cuadro de texto con el atributo value con el valor por defecto Escribe algo aquí
Es una buena practica rellenar este valor para que el usuario tenga una ayuda visual de qué se espera que rellene en el control
Quedando como resultado:
También podemos utilizar el elemento datalist para mostrar al usuario una lista de valores por defecto como posibles entradas al control de texto
En el ejemplo se ha especificado una lista de colores que mediante el atributo list cuyo valor es el atributo id del datalist
Además podemos usar el atributo label para que se visualice una etiqueta con el contenido del valor seleccionado
Una vez seleccionado un valor, podemos comprobar que no podemos modificarlo ni añadir un valor nuevo, pero si borrarlo para elegir otro valor de la lista
Quedando como resultado:
Etiquetas descriptivas
En el ejemplo anterior veíamos como crear un cuadro de texto, pero para el usuario podría no quedar claro qué se esperaba que rellenase en el control
Para solucionarlo usamos el atributo value para mostrarle un valor por defecto
Pero podemos hacerlo mediante una etiqueta descriptiva, mediante el elemento label
Una etiqueta label estará asociada siempre a un elemento input
Podemos utilizar dos métodos para realizar esta asociación:
Contraseñas
Es similar al cuadro de texto pero para crear una contraseña al atributo type le asignaremos el valor password
En el ejemplo podemos ver que la principal característica de este control es que el contenido del cuadro de texto se camufla
Sin embargo, si utilizamos el método GET esa contraseña será visible en la barra del navegador
Por eso es aconsejable usar el método POST si vamos a introducir contraseñas
Tambien se ha incluido el atributo pattern que corresponde con una expresión regular que añade más seguridad en la validación si no cumple el formato de la expresión
En la expresión del ejemplo se ha forzado que al menos haya un número, una letra en minúscula, otra en mayúscula y que su longitud sea de ocho caracteres
Quedando como resultado:
Correo electrónico
Es similar al cuadro de texto pero para crear un correo electrónico al atributo type le asignaremos el valor email
En el ejemplo podemos ver que la principal característica de este control es que el contenido del cuadro de texto se valida y si se introduce una dirección de correo no válida, el navegador mostrará un mensaje de error
Tambien se ha incluido el atributo pattern que corresponde con una expresión regular que añade más seguridad en la validación si no cumple el formato de la expresión
En la expresión del ejemplo se ha forzado que al menos haya un número o una letra en minúscula antes de la @, al menos haya un número o una letra en minúscula antes del . y dos o tres letras despues del .
Quedando como resultado:
URL
Es similar al cuadro de texto pero para crear una URL al atributo type le asignaremos el valor url
En el ejemplo podemos ver que la principal característica de este control es que el contenido del cuadro de texto se valida y si se introduce una URL no válida, el navegador mostrará un mensaje de error
Quedando como resultado:
Teléfono
Es similar al cuadro de texto pero para crear un teléfono al atributo type le asignaremos el valor tel
En el ejemplo podemos ver que no hay ninguna diferencia significativa con respecto al cuadro de texto
Sólo podría aparecer algún icono o imagen especial generada por el navegador o mediante una hoja de estilo CSS
Quedando como resultado:
Búsqueda
Es similar al cuadro de texto pero para crear una búsqueda al atributo type le asignaremos el valor search
En el ejemplo podemos ver que no hay ninguna diferencia significativa con respecto al cuadro de texto
Sólo podría aparecer algún icono o imagen especial generada por el navegador o mediante una hoja de estilo CSS
Quedando como resultado:
Casillas de verificación
Para crear un conjunto de casillas de verificación al atributo type le asignaremos el valor checkbox
En este caso, el valor que aparece junto al botón será el mismo del atributo name y hay que usar el mismo para formar el grupo de selección exclusiva
No tiene etiqueta de cierre
En el ejemplo se ha especificado la elección de sexo y se ha marcado el sexo Woman por defecto usando la palabra reservada checked
Quedando como resultado:
Hay que tener en cuenta que si marcamos una casilla permanecerá marcada hasta que volvamos a desmarcarla, si queremos el efecto de que se desmarquen las opciones no elegidas, deberemos usar JavaScript
Casillas de opción
Para crear un conjunto de casillas de opción al atributo type le asignaremos el valor radio
En este caso, el valor que aparece junto al botón será el mismo del atributo name y hay que usar el mismo para formar el grupo de selección exclusiva
No tiene etiqueta de cierre
En el ejemplo se ha especificado un grupo de colores y se ha marcado el color Green por defecto usando la palabra reservada checked
Quedando como resultado:
Botones
Los botones normalmente se utilizan para controlar el envío y reinicio del formulario
Podemos añadir nuevas funcionalidades a nuestro formulario usando los botones para activarlas al pulsarlos
Para ello usaremos o una imagen o un botón genérico al que luego le asignaremos JavaScript o usaremos Jquery para facilitarnos la programación
Para crear un botón al atributo type le asignaremos el valor button
No tiene etiqueta de cierre
En el ejemplo se ha usado el atributo value para mostrar al usuario un texto y pueda reconocerlo
Y el atributo onclick que es un evento que permite al botón ejecutar código JavaScript, en este caso un aviso para el usuario de que el botón ha sido pulsado
Quedando como resultado:
Enviar el formulario
Para crear un botón para enviar el formulario al atributo type le asignaremos el valor submit
No tiene etiqueta de cierre
En el ejemplo se ha usado el atributo value para mostrar al usuario un texto y pueda reconocerlo
Este ejemplo no enviará nada al servidor porque no se han usado los atributos action indicandole la URL de destino ni method indicando el método GET o POST
Quedando como resultado:
También podemos simular el comportamiento de un botón submit a partir de una imagen
En el ejemplo se ha usado el atributo value para mostrar al usuario un texto y pueda reconocerlo
Este ejemplo no enviará nada al servidor porque no se han usado los atributos action indicandole la URL de destino ni method indicando el método GET o POST
Quedando como resultado:
Resetear el formulario
Para crear un botón para resetear el formulario al atributo type le asignaremos el valor reset
No tiene etiqueta de cierre
En el ejemplo se ha usado el atributo value para mostrar al usuario un texto y pueda reconocerlo
Si escribimos algo en el cuadro de texto podremos comprobar que si pulsamos el botón reiniciar el contenido del cuadro de texto vuelve a ser su valor por defecto
Quedando como resultado:
Adjuntar archivos
Para crear un botón que permita adjuntar archivos al atributo type le asignaremos el valor file
Este botón sólo será útil si hemos elegido el método POST y hayamos incluido al elemento form el atributo enctype=’multipart/form-data’
Además del botón aparece una etiqueta con el estado del archivo adjunto, que nos dirá si hay un archivo adjunto y en caso de haberlo su nombre y extensión
Al pulsar el botón se abrirá un explorador de archivos del sistema del usuario con el que podrá seleccionar el archivo que desea adjuntar
No tiene etiqueta de cierre
En el ejemplo se adjunta una imagen al formulario aunque no es funcional porque no se ha añadido el atributo action ni tiene un botón para enviar el formulario
Se ha usado el atributo acept para indicarle al navegador qué tipos MIME puede recibir el navegador cuando pulsemos el botón
En este caso sólo puede recibir imagenes de tipo jpeg y png
Quedando como resultado:
Números
Para crear un cuadro que fuerce al usuario introducir un número al atributo type le asignaremos el valor number
No tiene etiqueta de cierre
En el ejemplo se han usado los atributos:
- min
valor numérico mínimo que admite el cuadro
- max
valor numérico máximo que admite el cuadro
- step
controla el incremento en los números, si se omite, por defecto es 1
- value
valor numérico por defecto
Quedando como resultado:
Rangos
Para crear un rango de números que fuerce al usuario introducir un número aproximado al atributo type le asignaremos el valor range
No tiene etiqueta de cierre
En el ejemplo se han usado los atributos:
- min
valor numérico mínimo que admite el rango
- max
valor numérico máximo que admite el rango
- step
controla el incremento en los números, si se omite, por defecto es 1
- value
valor numérico por defecto
Quedando como resultado:
Paleta de colores
Para asignar un color a partir de una paleta al atributo type le asignaremos el valor color
No tiene etiqueta de cierre
En el ejemplo se ha utilizado en el atributo value el valor por defecto hexadecimal #FF0000
Quedando como resultado:
Calendario
Para asignar una fecha a partir de un calendario al atributo type le asignaremos el valor date
No tiene etiqueta de cierre
En el ejemplo se han usado los atributos:
- min
valor de fecha mínima que admite el rango de fechas
- max
valor de fecha máxima que admite el rango de fechas
- step
controla el incremento de fechas en el calendario, si se omite, por defecto es 1
- value
valor de fecha por defecto
Hay que tener en cuenta que el formato para fechas que admite el control es AAAA-MM-DD, es decir, A para un año con 4 dígitos, M para un mes de 2 dígitos y D para un día de 2 dígitos todos ellos separados con el símbolo –
Quedando como resultado:
Oculto
En ocasiones hay información que el desarrollador no quiere que el usuario sea capaz de ver, para ello se usan los campos ocultos
Son campos que el usuario no puede ver, pero que son enviados junto al formulario al servidor
Para asignar campo oculto al atributo type le asignaremos el valor hidden
No tiene etiqueta de cierre
En el ejemplo se envian tres campos ocultos dando al servidor información sobre el cliente, sin que aparezca esa información en el navegador del usuario
Quedando como resultado:
No deberíamos poder ver ninguno de los campos ocultos en el navegador, pero si usamos la opción de nuestro navegador Ver código, podremos ver que efectivamente, esos campos existen
Cuadro de texto de varias líneas
Es similar al cuadro de texto pero permite escribir más de una línea para ello utilizaremos el elemento textarea
En el ejemplo podemos ver que la diferencia más significativa con respecto al cuadro de texto es que podemos usar más de una línea
Además hemos especificado con el atributo rows el número de filas a 4, con el atributo cols el número de columnas a 50 y con el atributo maxlength el máximo de caracteres a 100
Quedando como resultado:
Listas de selección
El elemento select sirve para crear una lista desplegable de selección
Su esquema es muy similar a los cuadros de texto, aunque su contenido no puede ser modificado, sólo seleccionado
Los elementos option forman la lista y al servidor se enviará en valor de su atributo value
En el ejemplo se ha especificado una lista de selección de colores y se ha marcado el color Green por defecto usando la palabra reservada selected
Quedando como resultado:
Agrupaciones de elementos
El elemento fieldset sirve para agrupar elementos relacionados
En el ejemplo creado un grupo para contener el control de acceso de usuario mediante login
Se ha usado el elemento legend que sirve de título o leyenda del grupo
Se ha usado el atributo required para que los campos user y pass sean obligatorios y si tratamos de enviar el formulario, el navegador nos mostrará un mensaje de error
El resultado es un cuadro que contiene todos los controles y que tiene como título Login de Usuario
Quedando como resultado:
