3.19. HTML: Formularios - Parte 1
¿Qué son los formularios?
Según la W3C, un formulario HTML es una sección de un documento que contiene:
- contenido normal,
- código,
- elementos especiales llamados controles, y
- rótulos para esos controles.
Los usuarios normalmente rellenan un formulario modificando sus controles, antes de enviar el formulario a un agente para que lo procese (a un servidor web, a un servidor de correo, etc.)
¿Y para qué se utilizan?
Pues justamente para eso, para permitir que el usuario envíe información al servidor.
Formularios de registro o acceso a sitios web, formularios de contacto; hasta para escribir un comentario en Facebook estamos utilizando un formulario.
Te presento las etiquetas básicas para formularios, vamos a ir analizándolas una a una.
La etiqueta <form> es fundamental para que el resto de elementos puedan ser enviados.
Todos los campos que se quieran enviar deben estar entre las etiquetas <form> y </form>.
Esta etiqueta no tiene representación gráfica.
“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 destino que procese los datos de la petición.
Es posible utilizar una ruta absoluta o una relativa.
“method” indica la forma de enviar la información.
Este atributo acepta dos valores: GET y POST.
Si no se utiliza, el formulario se enviará por defecto mediante el método GET.
No es común la expresión: “realiza una petición GET a la URL http://www.idesweb.es”, más bien diríamos algo así como “entra en idesweb.es”.
Sin embargo, para el trabajo con formularios, es necesario saber distinguir entre dos tipos de peticiones que un cliente le hace a un servidor: GET y POST.
Hay más, pero no las comentaré en este tema.
GET es el método que utilizamos normalmente al navegar.
Al utilizarlo en un formulario, los datos de envío son visibles en la URL, como parejas nombre=valor.
Esta forma de envío está limitada y el límite depende de cada navegador.
Utilizaremos GET, normalmente, en los casos en los que el resultado del envío sea siempre el mismo y cuando queramos que el resultado se pueda guardar; por ejemplo en un formulario de búsqueda.
POST es un método un poco más seguro que GET para el envío de información sensible como puedan ser contraseñas, ya que los datos no son visibles en la URL del navegador.
Además, POST no tiene límite en el envío y posibilita la subida de ficheros al servidor.
Un formulario de registro podría ser un buen ejemplo de uso del método POST.
“accept-charset” espera una lista de juegos de caracteres separados por comas.
Normalmente utilizamos el estándar “unicode” UTF-8 y puede que alguna vez veas, y no solo en formularios, el juego “Latin 1” o ISO-8859-1, que define el alfabeto latino.
No es un atributo muy común y probablemente no llegues a usarlo en formularios.
“enctype” especifica el tipo de codificación, por defecto a “application/x-www-form-urlencoded”, convertirá todos los espacios en signos suma (+) y caracteres especiales en valores ASCII HEXadecimal; “multipart/form-data” se utiliza cuando vayamos a subir ficheros mediante el formulario;y “text/plain” solo convierte los espacios en signos de sumar (+), pero los caracteres especiales no son convertidos.
La etiqueta <input /> es de las más utilizadas en formularios, con ella podemos 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.
En seguida los estudiamos en profundidad, pero antes quiero destacar que la etiqueta <input /> no tiene etiqueta de cierre y, por tanto, es interesante que la cierres debidamente para cumplir con los estándares.
El atributo “name” es común a todos los campos de formulario, no exclusivo de <input />.
Espera una cadena de texto que indica el nombre que recibirá el campo al ser enviado.
Si, por ejemplo, enviamos un formulario con un elemento cuyo atributo name=“email”. El servicio responsable de procesar ese formulario podrá trabajar con un campo de nombre “email”.<input name="email"/>
Para la etiqueta <input />, “type” es uno de los atributos más importantes ya que define en qué se convertirá el control. Pese a que no es obligatorio, es recomendable su uso.
Por defecto es de tipo “text”;
“checkbox” indica que el campo será una casilla de verificación, después veremos ejemplos sobre cómo utilizar este y otros tipos de elemento <input />;
“radio” dibujará una casilla de opción o un botón tipo radio, si todavía no te suena, no te preocupes, con los ejemplos te quedará más claro;
“file” muestra un botón, que abrirá una ventana para seleccionar un archivo, también muestra el nombre o la ruta al archivo, dependiendo del navegador;
“password” genera un campo de texto enmascarado, ideal para campos de contraseña;
“hidden” es un campo oculto, para almacenar información que el usuario no vaya a introducir de forma activa. Por ejemplo, podríamos incluir el tiempo que ha tardado el usuario en rellenar el formulario;
“button” mostrará un botón;
“submit” dibuja un botón “Enviar” que al pulsarlo enviará el formulario a la acción que corresponda;
“image” utiliza una imagen con la misma función que el botón de tipo “submit”. Me gustaría destacar que, en la actualidad, esta opción es poco utilizada;
y “reset” inserta un botón que reiniciará el formulario, borrando los datos insertados por el usuario.
“disabled” deshabilita el campo para que no pueda ser utilizado. Para cumplir con estándares (argumento=“valor”), “disabled” se iguala a la cadena “disabled”
La representación depende del navegador, pero el campo queda totalmente inutilizable.
“readonly” funciona de forma parecida a “disabled” pero, aplicado por ejemplo a un input de tipo “text”, sería posible seleccionar el texto y copiarlo.
Ciertos campos necesitan de un atributo “value” para completar su funcionalidad, como veremos en los ejemplos a continuación.
Ahora que ya conoces todos los atributos comunes a etiquetas <input />, vamos a profundizar un poco en cada tipo.
El tipo de <input /> por defecto es “text”, no en vano el campo de texto el más común.
Los <input /> de tipo texto, pueden limitar el número de caracteres que se insertan.
Esto es útil, por ejemplo, para controlar que ciertos campos, que en base de datos están limitados, no lleguen con más datos de los que se pueden almacenar.
“maxlength” es el atributo encargado de ello y el valor debe ser un número entero.
El atributo “size”, también espera un número y se traduce en la anchura del campo de texto en caracteres; es decir, un <input /> con size=“3” será lo suficientemente ancho para mostrar tres caracteres, pero no cuatro.
Al estar directamente relacionado con el estilo, desaconsejo el uso de este atributo. En la medida de lo posible, trata de separar estructura de estilo en tus desarrollos web, te facilitará el mantenimiento.
El campo “value” en <input /> de tipo texto, indica el valor que tiene este campo por defecto.
Por ejemplo, y aunque en la actualidad no se realice esta práctica, podríamos poner el texto “Buscar…” en un campo para aclarar su funcionamiento.
Este texto no se borrará cuando el componente obtenga el foco y el usuario deberá borrarlo para poder insertar su propia cadena.
Normalmente esta práctica se realiza apoyándose en Javascript o con atributos nuevos de HTML5
Los <input /> de tipo “checkbox” insertan casillas de verificación.
Como estas casillas suelen organizarse en grupos de selección múltiple, es importante que el atributo “name” de todas las casillas de verificación del mismo grupo tenga el mismo nombre, de forma que al recibirlas, el servicio destino sepa que esos valores corresponden al mismo campo.
El atributo “checked” toma como valor el texto “checked” e indica que la casilla aparece marcada por defecto.
Observarás en los ejemplos que, por cuestiones de legibilidad, omito otros atributos que pueden ser necesarios.
El atributo “value” en este tipo de elementos es imprescindible.
Le indica al formulario qué valor debe enviar si la casilla está activada.
Si no se declara, el formulario enviará información imposible de procesar.
Los <input /> de tipo “radio” se representan como casillas de opción (también conocidas como botones radio(redondo))
La particularidad de estas casillas es que, a diferencia de las de verificación, solo es posible seleccionar una de las opciones.
Para que el control funcione correctamente es necesario que todos los elementos de cada grupo de casillas de opción, tengan el mismo valor para el atributo “name”.
Del mismo modo que las casillas de verificación, un <input /> de tipo “radio”, mediante el atributo “checked”, se mostrará seleccionado por defecto.
El atributo “value” del <input /> seleccionado, será el que se envíe junto al formulario.
Los <input /> de tipo “file” ofrecen la posibilidad al usuario de adjuntar archivos al envío del formulario.
Según la W3Schools, con el atributo “accept” es posible especificar los tipos de archivo que aparecen para ser seleccionables pero, ni está implementado por todos los navegadores mayoritarios, ni supondrá filtro alguno, ya que la opción de “Todos los archivos” permitirá al usuario subir cualquier tipo de archivo.
Recuerda que la etiqueta <form> tiene un atributo “enctype” que debe tener el valor “multipart/form-data” para el envío de archivos. <form enctype=multipart/form-data>
Es común ver campos que a priori parecen de tipo texto y al tratar de escribir, aparecen puntos o asteriscos en lugar de los caracteres introducidos. Estos son los campos de texto enmascarado o type=“password”.
Estos campos tienen las mismas opciones que los campos de tipo texto.
A veces es interesante trabajar con campos ocultos para enviar información que creemos útil pero que el usuario no insertará de forma directa.
Por ejemplo, como comentábamos antes, sería posible que un método en Javascript contabilizara el tiempo que tarda el usuario en rellenar el formulario y lo introdujera en este campo antes de enviarlo.
En campos type=“hidden” solo son útiles los atributos “name” y “value”, puesto que no son visibles para el usuario.
Los botones son otro elemento común en los formularios.
Cada vez es más raro verlos con los estilos del navegador por defecto, puede que porque sean demasiado feos o porque no encajen en el diseño de la web.
Para cada tipo de botón se utiliza un tipo de <input /> diferente, vamos a verlos todos:
Al marcar un <input /> como tipo “submit”, se dibujará un botón con el texto “Enviar” cuya acción será enviar el formulario al destino marcado en el atributo “action” de la etiqueta <form>.
Los botones del tipo “reset” suelen tener un texto similar a “Restablecer”. Este botón reinicia el formulario, dejándolo como si el usuario no hubiese modificado nada.
También es posible insertar botones con otro tipo de acciones, para ello se establece el atributo type=“button”.
Para dotar de acción a estos botones, es necesario trabajar con eventos Javascript; bien intrusivo, mediante atributos como “onclick” o bien no intrusivo, haciendo uso de librerías o scripts no incrustados en HTML.
Esto se verá en el tema Javascript.
Existe un tipo, raramente utilizado, que consiste en usar una imagen como botón. Si establecemos el atributo type=“image”, podremos ver este resultado.
Para este tipo de <input />, se utilizan, del mismo modo que para las imágenes, los atributos alt, para incluir un texto alternativo y src, para especificar la ruta a la imagen.
Este tipo de botones está a medio camino entre estructura y diseño, por lo que desaconsejo su uso. Podremos trabajar el estilo del botón mediante CSS
El atributo “value”, empleado en botones, especifica el texto que aparece en el botón; salvo en el caso de los botones de tipo imagen que, obviamente, no muestran texto.
Para no alargar en exceso el vídeo, he dejado el resto de etiquetas de formularios para un segundo vídeo.
En resumen,
- Los formularios se envían mediante dos métodos: GET y POST.
- Con GET, el envío está limitado y la información enviada es visible; sin embargo, es útil para poder guardar el resultado en marcadores o favoritos.
- y con POST, el envío no tiene limitación y los datos no son visibles en la URL, además, permite la subida de archivos.
- Todas las etiquetas de formulario deben ir entre etiquetas <form> y </form> para que su información sea enviada con el formulario.
- Hemos visto que la etiqueta input es muy versátil.
Para terminar, te dejo cuatro consejos que espero te sean útiles:
- Fuera de las etiquetas <form> y </form> es posible utilizar elementos de formulario, serán visibles, pero no se enviará la información. Repasa el código.
- Especifica siempre el atributo “type”.
- Necesitarás un botón “submit” para enviar el formulario.
- En la medida de lo posible, separa contenido de estilos, lo agradecerás cuando tengas que mantener la web.
Actividad
Actividad
1. Crea una página web que contenga un formulario con los siguientes campos de información:
- El nombre, con un control de tipo texto.
- Los apellidos, con un control de tipo texto.
- El sexo, con dos opciones excluyentes hombre o mujer.
- El correo electrónico, con un control de tipo texto.
- Una casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas".
- Una casilla de verificación con el texto "Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos".
- Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
- El título de la página debe ser Formulario de registro - Mi web.
- El método de envío del formulario debe ser GET.
- El destino del envío del formulario debe ser "".
- La longitud máxima de entrada de datos de los controles para el nombre y los apellidos debe ser 50 caracteres.
- La casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas" debe estar activada por defecto.
<!-- SOLUCIÓN -->
<html>
<head>
<title>Formulario de registro - Mi web</title>
</head>
<body>
<h1>Formulario de registro</h1>
<form action="" method="get">
<p>
Nombre: <input type="text" name="nombre" maxlength="50" />
</p>
<p>
Apellidos: <input type="text" name="apellidos" maxlength="50" />
</p>
<p>
Sexo: <input type="radio" name="sexo" value="h" /> hombre <input type="radio" name="sexo" value="m" /> mujer
</p>
<p>
Correo: <input type="text" name="correo" maxlength="100" />
</p>
<p>
<input type="checkbox" name="info" checked="checked" /> Deseo recibir información sobre novedades y ofertas
</p>
<p>
<input type="checkbox" name="condiciones" /> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos
</p>
<p>
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
