Cargando

Ir a contenido

X


Ver Más! Profesionales IT y desarrolladores: Llega el evento más importante del año! Servicios cloud, Business Applications, Analytics, IoT, Machine Learning, Bots, Blockchain etc.


 


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.


Escrito por sep 27 2013 01:06


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 ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


AYUDA A MEJORAR ESTE TUTORIAL!

¿Quieres ayudarnos a mejorar este tutorial más? Puedes enviar tu Revisión con los cambios que considere útiles. Ya hay 0 usuario que han contribuido en este tutorial al enviar sus Revisiones. ¡Puedes ser el próximo!


Tutoriales Relacionados



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!
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 27 2013 01:06
  •   Visitas 5.5K
  •   Nivel
    Profesional