Formularios HTML5
HTML5 incorpora una serie de nuevas etiquetas interesantes para utilizar en formularios (además de las ya vistas). Los formularios son una forma sencilla de establecer mecanismos para que el usuario pueda introducir información en una página web de forma fácil e intuitiva, y el sitio web sea capaz de procesarla correctamente y añadirla a una base de datos.
Ojetivos al crear un formulario HTML5:
- Hacer lo más sencillo posible el proceso de inserción de datos por parte del usuario.
- Intentar que la experiencia de usuario sea lo más agradable posible.
- Conseguir que los datos introducidos por el usuario estén en un formato predecible y esperado.
- Reducir los errores al introducir datos, en la medida de lo posible, y mostrarlo claramente si ocurren.
Creación de un formulario
Para comenzar con la creación de un formulario, el primer paso es indicar una etiqueta contenedora form, que incluirá toda la información que se quiere recoger en ese formulario. se puede incluso crear varias etiquetas form por página, pudiendo así crear varios formularios diferentes.
También es posible colocar campos de formulario fuera de una etiqueta form, sin embargo, no tendrán un funcionamiento específico y necesitaría manejarse desde Javascript.
<form name="formulario1" method="post" action="http://midominio.com/procesar.php">
</form>
Los 3 atributos básicos indicados son:
- En action se indica la dirección donde se enviarán los datos cuando el usuario pulse el botón de enviar. En caso de omitirse esta información, se enviarían los datos a la propia página actual, volviéndola a cargar.
- En method se define el tipo de método HTTP a utilizar. Utilizaremos el método GET cuando nos interese que los datos se envíen en la propia URL. En caso contrario, POST.
- En name el nombre del formulario para cuando necesitemos hacer referencia a él (generalmente desde Javascript o desde el backend).
Tipos de datos a obtener en el formulario
Para que un usuario pueda introducir información en un formulario, requiere que se le indiquen una serie de campos que le permitan introducir la información. Para ello, debemos saber a priori que tipo de dato le vamos a pedir al usuario (texto, numéro, fecha, etc...), y así saber que tipo de campo de entrada de datos es más conveniente colocar.