Los formularios permiten enviar información a un servidor web. Utilizamos formularios cuando realizamos búsquedas en Google, nos registramos a una página, contactamos con una empresa a través de su página web, realizamos una compra online, dejamos un comentario en Facebook...
Para crear un formulario en nuestra web es necesario utilizar las siguientes etiquetas con sus correspondientes atributos.
Etiquetas y atributos para crear un formulario con HTML5
- <form> Sirve para que el resto de elementos puedan ser enviados.
- action: es el único atributo requerido para la etiqueta <form>. Espera una cadena de texto que especifique la URL o ruta a la acción de destino que procese los datos de la petición. Esta ruta puede ser absoluta o relativa.
- method: indica la forma de enviar la información. Acepta 2 valores:
- GET: el método que utilizamos normalmente al navegar. Los datos de envío son visibles en la URL y se utiliza cuando el resultado del envío es siempre el mismo y cuando queremos que el resultado se pueda guardar.
- POST: el método que se utiliza por ejemplo cuando nos registramos en un sitio. Los datos no son visibles en la URL del ordenador, por lo que se utiliza para enviar información sensible como son las contraseñas. Permite enviar archivos.
* Si no se utiliza el formulario se enviará por defecto mediante el método GET.
- accept-charset: se utiliza para la codificación de caracteres. Normalmente se utiliza el estándar UTF-8 y alguna vez podemos ver el ISO-8859-1. No obstante no es un atributo muy común y lo más probable es que no lo utilicemos.
- enctype: especifica el tipo de codificación. Las posibilidades que existen son:
- application/x-www-form-urlencoded (por defecto): convertirá todos los carácteres en signos suma y en carácteres especiales con valores hasta hexagesimal.
- multipart/form-data: se utiliza cuando vayamos a subir ficheros mediante el formulario.
- text/plain: solo convierte los espacios en signos de sumar.
- <input> Nos permite definir gran parte de los controles típicos de formularios: entradas de tipo texto, casillas de verificación y de opción conocidas como "radio", archivos, contraseñas, campos ocultos y botones varios. Cabe destacar que esta etiqueta, no tiene etiqueta de cierre
</input>. - name: este atributo es común a todos los campos de formulario. Indica el nombre que recibirá el campo al ser enviado. Por ejemplo: <input name="email"/> permitirá que el servicio que procese el formulario pueda trabajar con un campo de nombre email.
- type: es uno de los atributos más importantes ya que define en qué se convertirá el control. Su uso no es obligatorio pero sí recomendable. Los tipos de input que hay son:
- "text" --> texto. Este tipo de inputs pueden limitar el número de caracteres que se insertan mediante maxlength="número". También se puede determinar la anchura del campo de texto en carácteres mediante size="número", pero se aconseja hacer esto en la hoja de estilo, con CSS.
- "checkbox" --> casilla de verificación. Estas casillas suelen utilizarse en grupos de selección múltiple, por lo que es importante utilizar el atributo "name" y definir el mismo nombre para todas las casillas que forman parte de un grupo. En caso de que queramos que una casilla de verificación esté marcada por defecto, podemos utilizar el atributo "checked" de la siguiente manera: <input type="checkbox" checked="checked"/>. Es imprescindible utilizar el atributo "value" en este tipo de elementos para definir qué valor debe enviar el formulario si la casilla está activada. Si no se declara, el formulario enviará información imposible de procesar.
- "radio" --> casilla de opción. También llamados botones radio, son parecidos a los de la casilla de verificación, aunque tan solo permiten seleccionar una opción de entre las que se ofrecen. Los atributos "name", "checked" y "value" se utilizan de la misma forma que en las casillas de verificación.
- "file" --> subir fichero. Hay que tener en cuenta que para poder subir archivos a través del formulario es necesario definido el atributo enctyper como: <form enctype="multipart/form-data"> </form>
- "password" --> texto enmascarado. Se trata de campos en que cuando se escribe en ellos los carácteres aparecen en forma de asteriscos ******. Los atributos que se le pueden aplicar son los mismos que en el input de tipo "text".
- "hidden" --> campo oculto. Mediante JavaScript se podría añadir en este campo información sobre el tiempo que ha tardado el usuario en rellenar el formulario, por ejemplo. Solo son útiles los atributos "name" y "value".
- "button" --> botón.
- "submit" --> botón de enviar. Permite enviar el formulario.
- "image" --> imagen como botón de enviar. Se pueden utilizar los atributos "alt" para escribir el texto alternativo o "src" para especificar la ruta a la imagen. Este tipo de botón está a medio camino entre la estructura y el estilo, por lo que se desaconseja su uso, teniendo en cuenta que se puede definir con CSS.
- "reset" --> botón de limpiar. Permite reiniciar el formulario, como si el usuario no hubiera modificado nada.
*El atributo "value" aplicado a estos botones (excepto en el de imagen), especifica el texo del botón. Para dotar de acción a todos estos botones es necesario trabajar con eventos JavaScript. - disabled: deshablita un campo para que no pueda ser utilizado. Se indica como <input type="text" disabled="disabled"/>
- readonly: funciona de una forma parecida a disabled y se expresa de la misma forma en la etiqueta. Aplicado a un input de tipo "text" seria posible seleccionar el texto y copiarlo.
- value: ciertos campos necesitan este atributo para completar su funcionalidad. Por ejemplo, aplicado en un input de tipo "text", nos permitiría determinar el valor de un campo por defecto, para aclarar qué información que se debe introducir en él.
-
<select> Permite generar listas desplegables y listas de selección múltiple. Además del atributo "name", select permite utilizar el atributo "multiple"para generar listas de selección múltiple. Con select se utiliza la etiqueta <option>, que sirve para definir cada una de las opciones de la lista. Añadiéndole el atributo "value" indicamos qué información será enviada.
También podemos agrupar los elementos de las listas mediante la etiqueta <optgroup> y el atributo "label" para definir el nombre o título del grupo de elementos. - <textarea> Permite definir el area visible del texto en un campo, cuando es necesario escribir un texto largo. Esta etiquetahace posible que, cuando escribamos en el campo o area de texto y sobrepasemos su tamaño, aparezca una barra de desplazamiento y podamos seguir escribiendo. Con esta etiqueta debemos utilizar el atributo "name" y podemos definir las medidas del area de texto mediante "cols" para el ancho y "rows" para el alto.
- <label> Se trata de una etiqueta que mejora la usabilidad y accesibilidad de los formularios. Asocia un texto a un control mediante el atributo for="identificador", de manera que al pulsar sobre el texto, se activa el control asociado en la mayoría de los navegadores y lo relaciona con su propósito. Es fundamental para aquellos usuarios que utilizan algún tipo de ayuda a la navegación. Si lo aplicamos a una casilla de verificación, hace posible que también podamos activarla haciendo clic en el texto y no tan solo en el pequeño cuadrado que tiene al lado. Hay que acordarse de añadirle el atributo "value".
- <fieldset> Sirve para agrupar los datos de un formulario que están relacionados entre sí y separarlos visualmente mediante un marco. Por ejemplo, se pueden agrupar los datos personales de un usuario en un fieldset y los datos bancarios en otro. Es posible añadir un título a los datos agrupados, utilizando la etiqueta <legend> dentro de <fieldset>.
 | ||
| Formulario con aclaraciones en los campos. |
Ejemplo de creación de un formulario con HTML5
