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

<form>
    <input type='text' id='texto' name='Texto' value='Escribe algo aquí' />
</form>

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

<form>
    <input type='text' id='texto' name='Texto' list='opciones'/>
    <datalist id='opciones'>
        <option label='Red' value='Red' >
        <option label='Green' value='Green' >
        <option label='Blue' value='Blue' >
    </datalist>
</form>

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:

• insertando el control dentro de la etiqueta label

  <form>
      <label>Nombre: <input type='text' id='texto' name='Texto' value='Escribe algo aquí' /></label>
  </form>

  Quedando como resultado:

  Nombre:
  

• utilizando su atributo for que tendrá como valor el atributo id del control que queremos asociarle

  <form>
      <label for='texto'>Nombre: </label><input type='text' id='texto' name='Texto' value='Escribe algo aquí' />
  </form>

  Quedando como resultado:

  Nombre:
  

Contraseñas

Es similar al cuadro de texto pero para crear una contraseña al atributo type le asignaremos el valor password

<form>
    <label for='pass'>Contraseña: </label><input type='password' id='pass' name='Pass' pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}' />
</form>

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

<form>
    <label for='mail'>Email: </label><input type='email' id='mail' name='Mail' pattern='[a-z0-9]+@[a-z0-9]+\.[a-z]' />
</form>

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

<form>
    <label for='url'>URL: </label><input type='url' id='url' name='Url' />
</form>

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

<form>
    <label for='tel'>Teléfono: </label><input type='tel' id='tel' name='Tel' />
</form>

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

<form>
    <label for='search'>Búsqueda: </label><input type='search' id='search' name='Search' />
</form>

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

<form>
    <label>Sexo</label>
    <label for='man'>Man:</label><input type='checkbox' id='man' name='sex' />
    <label for='woman'>Woman:</label><input type='checkbox' id='woman' name='sex' checked />
</form>

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

<form>
    <label>Colores</label>
    <label for='red'>Red:</label><input type='radio' id='red' name='color' />
    <label for='green'>Green:</label><input type='radio' id='green' name='color' checked />
    <label for='blue'>Blue:</label><input type='radio' id='blue' name='color' />
</form>

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

<form>
    <input type='button' id='button' name='Button' value='Botón genérico' onclick='alert("Has pulsado el botón");'/>
</form>

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

<form>
    <input type='submit' id='submit' name='Submit' value='Enviar' />
</form>

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

<form>
    <input type='image' id='imagesubmit' name='ImageSubmit' src='/wp-content/uploads/2019/09/server_go.png' />
</form>

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

<form>
    <label for='texto'>Nombre: </label><input type='text' id='texto' name='Texto' value='Escribe algo aquí' />
    <input type='reset' id='reset' name='Reset' value='Reiniciar' />
</form>

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

<form name='formfile' method='POST' enctype='multipart/form-data' >
    <label for='file'>Adjuntar una imagen: </label><input type='file' id='file' name='image' acept='image/jpeg, image/png' />
</form>

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

<form>
        <label for='number'>Número: </label><input type='number' id='number' name='Number' min='0' max='10' step='2' value='0' />
</form>

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

<form>
    <label for='range'>Rango: </label><input type='range' id='range' name='Range' min='1' max='5' step='1' value='3' />
</form>

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

<form>
    <label for='color'>Color: </label><input type='color' id='color' name='Color' value='#FF0000' />
</form>

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

<form>
    <label for='date'>Date: </label><input type='date' id='date' name='Date' step='1' min='2019-01-01' max='2019-12-31' value='2019-01-01' />
</form>

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

<form>
    <input type='hidden' id='session' name='Session' value='1' />
    <input type='hidden' id='machine' name='Machine' value='Win32' />
    <input type='hidden' id='navigator' name='Navigator' value='Chrome' />
</form>

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

<form>
    <label for='textarea'>Comentarios: </label>
    <textarea id='textarea' name='TextArea' rows='4' cols='50' maxlenght='100'>Escribe aquí tu comentario</textarea>
</form>

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

<form>
    <label for='select'>Selecciona un color</label>
    <select id='select' name='select'>
        <option value='red'>Red</option>
        <option value='green' selected>Green</option>
        <option value='blue'>Blue</option>
    </select>
</form>

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

<form>
    <legend>Login de Usuario</legend>
    <label for='user'>Usuario: </label><input type='text' id='user' required />
    <label for='pass'>Contraseña: </label><input type='password' id='pass' required />

    <input type='submit' id='submit' name='Submit' value='Enviar'>
</form>

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: