Los formularios son elementos en HTML 5 que permiten la recolección de datos a través de otros elementos hijos, para poder procesar estos datos requeriremos de un lenguaje adicional para poder utilizar los datos que envía el formulario, la etiqueta que utilizaremos como gran contenedor será form.
Crear un formulario básico
Para generar un formulario debemos utilizar la etiqueta form esta será nuestro gran contenedor, dentro de ella agruparemos elementos de entrada de datos, de nombrado de secciones y botones que indicarán alguna acción en específico; los componentes básicos que deben ir dentro del form son: input y button y los atributos básicos que lleva son action y method estos no son los únicos elementos relacionados, pero si son los más importantes porque nos definen la base con la cual debemos trabajar.
Veamos a continuación como generar un formulario básico:
Como vemos form engloba los elementos input y button. En este caso también utiliza los atributos method y action los cuales habíamos mencionado anteriormente, describamos cada uno de ellos.
El segundo va a enviar los datos como parámetros en la url, no es muy seguro debido a que cualquier persona con un mínimo de conocimiento podría interpretar que se está enviando y tal vez intentar alterar la información, generalmente se utiliza para pasar data que es poco sensible, como por ejemplo la página de un listado, estatus de control que no afectan el programa, ids de consulta etc.
Como podemos ver es un campo de entrada de texto y un botón sin nada adicional, esto nos permite enviar a otra página donde lo podremos procesar con algún lenguaje de programación.
Con esto concluimos el tutorial, ya tenemos una noción de cómo construir formularios básicos, que elementos son indispensables y la finalidad de sus atributos.
Si os interesa profundizar más, echar un vistazo a mi otro Tutorial:
Formularios Avanzados en HTML5
Crear un formulario básico
Para generar un formulario debemos utilizar la etiqueta form esta será nuestro gran contenedor, dentro de ella agruparemos elementos de entrada de datos, de nombrado de secciones y botones que indicarán alguna acción en específico; los componentes básicos que deben ir dentro del form son: input y button y los atributos básicos que lleva son action y method estos no son los únicos elementos relacionados, pero si son los más importantes porque nos definen la base con la cual debemos trabajar.
Veamos a continuación como generar un formulario básico:
<!DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body> <form method="post" action="http://titan:8080/form"> <input name="fave"/> <button>Submit Vote</button> </form> </body> </html>
Como vemos form engloba los elementos input y button. En este caso también utiliza los atributos method y action los cuales habíamos mencionado anteriormente, describamos cada uno de ellos.
- Input: Este elemento nos permite capturar información que el usuario de nuestra página va a ingresar en forma de texto, posee varios atributos en el caso de nuestro ejemplo utilizamos solo name, este atributo permite asignarle un identificador al elemento, esto hace que cuando lo enviemos al servidor podamos utilizar algunos métodos para obtener la información capturada, por ello es importante que el name sea único dentro un formulario.
- Button: Este elemento nos permite crear un botón en el formulario, generalmente los botones son los que nos indicarán que al pulsarlos el formulario será procesado, en el caso de nuestro ejemplo no le colocamos ningún atributo, por lo que al pulsarlo no sucederá nada.
- Method: Es un atributo de la etiqueta form, es de vital importancia ya que es quien indica la forma en que va a ser pasada la información del usuario recolectada por el formulario, puede tener dos valores POST y GET.
El segundo va a enviar los datos como parámetros en la url, no es muy seguro debido a que cualquier persona con un mínimo de conocimiento podría interpretar que se está enviando y tal vez intentar alterar la información, generalmente se utiliza para pasar data que es poco sensible, como por ejemplo la página de un listado, estatus de control que no afectan el programa, ids de consulta etc.
- Action: Este atributo nos controla a que página irá el formulario, es decir quien recibirá los datos, si se omite el formulario se enviará a la misma página que lo contiene.
Como podemos ver es un campo de entrada de texto y un botón sin nada adicional, esto nos permite enviar a otra página donde lo podremos procesar con algún lenguaje de programación.
Con esto concluimos el tutorial, ya tenemos una noción de cómo construir formularios básicos, que elementos son indispensables y la finalidad de sus atributos.
Si os interesa profundizar más, echar un vistazo a mi otro Tutorial:
Formularios Avanzados en HTML5
