Cargando



HTML5 – Formularios Avanzados

En este tutorial vamos a ver un poco más en detalle los componentes de un formulario, veremos algunos atributos avanzados y como controlar algunos comportamientos de los elementos input y button.


sep 27 2013 02:06
Profesional
Configurando la codificación de los datos

Sabemos que los formularios envían los datos que recolectan de él usuario a una página nueva o a si misma, a través del protocolo http utilizando alguno de los métodos como GET o POST. Existen varias formas de codificar los datos para enviarlos a través de http, los tipos de codificación posibles son los siguientes:
  • application/x-www-form-urlencoded: Este es el método por defecto que se utiliza, no puede utilizarse para subir archivos a servidor.
  • multipart/form-data: Este método se utiliza para subir archivos a servidor.
  • text/plain: Este método es dependiente del navegador, cada uno lo trata de forma diferente.

Para poder ver un poco más allá la diferencia entre los métodos debemos crear un formulario con al menos dos campos para que veamos los diferentes comportamientos.

Veamos el formulario a crear:

<!DOCTYPE HTML>
<html>
    <head>
	    <title>Example</title>
    </head>
    <body>
	    <form method="post" action="http://titan:8080/form">
		    <input name="fave"/>
		    <input name="name"/>
		    <button>Submit Vote</button>
	    </form>
    </body>
</html>

La codificación application/x-www-form-urlencoded es la que se aplica por defecto, esta es una codificación de uso general se utiliza para todo excepto procesar subidas de archivos, su particularidad reside en que utiliza el formato URL para pasar los parámetros, por lo que nuestro formulario al ser enviado, enviaría la siguiente información:

fave=Manzanas&name=Leon+Ramirez

Vemos que a los nombres de nuestros campos se asignan los valores introducidos por el usuario, los caracteres especiales será sustituidos por un equivalente en HTML entity y vemos que cada dupla de valores se separa con un & de esta forma sabemos que campo es el siguiente.
La codificación multipart/form-data es mucho más compleja y maneja mucho más elementos, esto es así debido es la que se utiliza para subir archivos, por lo cual necesita enviar la información de un archivo como una imagen, y para ello tiene esta estructura:

------WebKitFormBoundary2qgCsuH4ohZ5eObF
Content-Disposition: form-data; name="fave"
Manzana
------WebKitFormBoundary2qgCsuH4ohZ5eObF
Content-Disposition: form-data; name="name"
Leon Ramirez
------WebKitFormBoundary2qgCsuH4ohZ5eObF--
fave=Manzana
name=Leon Ramirez


La codificación text/plain, es manejada por cada navegador de diferente forma y no es muy utilizada, a menos que sea una aplicación específica en un ambiente controlado.

Atributo autocomplete

Este atributo es una ayuda para mucha gente que no le gusta introducir los datos más repetidos en un formulario como por ejemplo el nombre y el apellido o el correo electrónico, sin embargo existen aplicaciones mucho más delicadas como el Internet banking donde necesitamos máxima privacidad en la introducción de nuestros datos.
Para controlar esto manejamos el atributo autocomplete, este puede ir a nivel de formulario, o a nivel de input, y tiene dos valores on y off, es decir encendido o apagado, como ya podrán haber inferido cuando está encendido on permite al navegador sugerir datos que ya el usuario ha introducido anteriormente en formularios similares o en el mismo formulario que está viendo, y cuando está en off no ofrece ninguna sugerencia. Veamos su aplicación con dos ejemplos muy sencillos.


<!DOCTYPE HTML>
<html>
    <head>
	    <title>Example</title>
    </head>
    <body>
	    <form autocomplete="off" method="post" action="http://titan:8080/form">
		    <input name="fave"/>
		    <input name="name"/>
		    <button>Submit Vote</button>
	    </form>
    </body>
</html>



<!DOCTYPE HTML>
<html>
    <head>
	    <title>Example</title>
   </head>
    <body>
	    <form autocomplete="off" method="post" action="http://titan:8080/form">
		    <input autocomplete="on" name="fave"/>
		    <input name="name"/>
		    <button>Submit Vote</button>
	    </form>
    </body>
</html>


En nuestro primer ejemplo vemos como lo sacamos de todo el formulario, y en el segundo ejemplo vemos como lo sacamos de todo el formulario también , solo que en nuestro primer input lo activamos, también pudiéramos hacer lo contrario y activarlo para todo el formulario, y desactivar un campo en particular.
Con esto concluimos este tutorial, teniendo el conocimiento para hacer formularios un poco más complejos, además de saber cómo funcionan internamente para enviar los datos.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X