Cargando

Ir a contenido


 


HTML5 – Creación de Formularios

En este tutorial veremos cómo hacer formularios básicos, así como también sus diferentes atributos y elementos.


Escrito por el sep 27 2013 01:11 crear formularios html5 html5 formularios


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:

<!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 primero va a enviar los datos a través del http por lo que podremos enviar los datos de forma oculta y solo la página destino podrá recibirlos, este método es bastante seguro y nos permite enviar los datos sensibles del formulario.

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.
Veamos a continuación lo que nuestro ejemplo básico nos produjo.



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
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 27 2013 01:11
  •   Actualizado sep 27 2013 01:13
  •   Visitas 788
  •   Nivel
    Avanzado



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!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse