Continuando con el tema anterior, es decir, Formularios hoy veremos más etiquetas y armaremos algunos modelos que son los más usuales.
Etiqueta FIELDSET
Una práctica que puede resultar útil es agrupar los diferentes elementos de un formulario bajo la Etiqueta FieldSet, esta lo que hará es generar un recuadro en todos los elementos que contenga.
Además utilizando la Etiqueta "Legend" podremos ponerle un Título al recuadro. La sintaxis básica de un FieldSet es la siguiente:
<form>
<fieldset>
<legend>Titulo</legen>
<input ……
<input …..
<textarea>…
</fieldset>
</form>
Como podemos observar, FieldSet contiene en primer medida a Legend y luego a todos los Input, TextArea, etc. que queramos agrupar.
Veamos un ejemplo visual:
 |
| FieldSet |
<html>
<head></head>
<body>
<form>
<fieldset>
<legend>Titulo</legend>
Nombre: <input type="text" name="nombre" /><br />
Apellido: <input type="text" name="apellido" /><br />
</fieldset>
</form>
</body>
</html>
En caso de no utilizar la etiqueta "Legend" en el navegador solo aparecerá un recuadro alrededor de los Input.
Acción de Formulario [ ACTION ]
La etiqueta <form> tiene un Atributo que es "Action" [ Acción ] que contiene, generalmente, un Link. Este Link será al que se dirija nuestra navegador en el momento en que el usuario haga Clic en el botón "Enviar/Send", es decir, sobre el <input type="submit" value="Enviar" />.
La sintaxis es la siguiente: <form action="pagina.extension">…</form>.
Ejemplo: <form action="login.php">….</form>
Métodos de Formulario [ METHOD ]
La etiqueta <form> tiene un Atributo que es "Method", es decir, el método que utilizará para enviar los datos. Tiene dos posible valores GET o POST.
El Método GET
Este método envía el valor de las variables mediante la URL, es decir, que todos los valores que el usuario haya ingresado quedarán visibles. Esto demuestra que es un método que carece de seguridad, puesto que, de utilizarse este método al enviar variables de Input tipo Password este quedará visible en la URL para cualquiera que la vea.
Sin embargo, y a pesar de esto, este tipo de método es el utilizado cuando se realizan búsqueda y la razón de esto es que cuando copiemos y peguemos la URL con las variables pasadas por GET obtendremos la misma página web que teníamos después de haber hecho las búsquedas.
La sintaxis de un Formulario cuyo método es GET es la siguiente:
<form method="get" action="pagina.extension">…</form>
Ejemplo:
<form method="get" action="productos.html">
Nombre: <input type="text" name="nombre" /><br />
Precio: <input type="text" name="precio" /><br />
<input type="submit" value="Enviar" />
</form>
Supongamos que el usuario escribe los siguientes datos:
 |
| Method GET |
Una vez que el Usuario haga Clic en el botón Submit [ Enviar ] obtendrá en la URL lo siguiente:
www.nombreservidor.com/productos.html?nombre=papel&precio=30
Como pueden observar en la URL que obtuvimos vemos los siguientes datos:
Una vez enviado el Formulario el navegador cargará la pagina del Action, es decir, productos.html
A continuación del Link del Action aparece un "?", este es el separador de URL y Variables.
Luego vemos que dice "nombre=papel&precio=30", aquí vemos lo siguiente:
"nombre" y "precio" son los nombres de los Input. Si se fijan en el código anterior verán que al Input de Nombre le pusimos en el Atributo "Name" el valor de "nombre" mientras que en el Input de Precio le pusimos en el Atributo "Name" el valor de "precio".
A continuación de estos aparece el signo "=" esto significa que el Input de Nombre tiene el valor de "papel" y el Input de precio tiene el valor de "30".
Cada variable del Formulario (en este caso, cada Input) esta separado por el símbolo "&", es decir, que si tuviésemos mas variables para pasar en el formulario obtendríamos lo siguiente:
www.nombreservidor.com/productos.html?nombre=papel&precio=30&otrovariable=valor1&masvariables=valor2
Como aclaración importante, este método tiene, a parte de la poca seguridad, un limitante de cantidad de información que se pasa como parámetro en la URL, teóricamente depende de cada navegador, sin embargo, es limitada.
El Método POST
A diferencia del GET, este método codifica la información que se envía de documento a documento no siendo visible para los usuarios, es decir, no utiliza la URL para pasar la información.
Como pude notarse este método es mas seguro que el GET y además, como otra ventaja, no tiene límites.
La sintaxis es la siguiente: <form method="post" action=" pagina.extension">…</form>
Utilizando el mismo código que el anterior un Formulario con información pasado con POST queda de la siguiente manera:
<form method="post" action="productos.html">
Nombre: <input type="text" name="nombre" /><br />
Precio: <input type="text" name="precio" /><br />
<input type="submit" value="Enviar" />
</form>
Y al pasar de página la URL no se ve afectada y queda: www.nombreservidor.com/productos.html
Para recuperar las variables utilizaremos algún lenguaje como ser PHP.
Bien, en este punto ya saben lo necesario como para empezar a crear formularios detallados, veamos algunos ejemplos:
Formulario de "Acepto los Términos y Condiciones de uso"
<form method="post" action="acepto.html">
<textarea rows="20" cols="50" readonly="readonly">Terminos y condiciones de uso
Esta web…
.
.
.
Debe aceptar los términos y las condiciones de uso para continuar</textarea><br />
<input type="checkbox" name="acepto" /> Acepto los términos y condiciones de uso<br />
<input type="submit" value="Aceptar" />
</form>
 |
| Formulario de Acepto los Términos y Condiciones de Uso |
Formulario de Login
<form method="post" action="login.php">
<fieldset>
<legend>Login</legend>
Usuario: <input type="text" name="usuario" /><br />
Contraseña: <input type="password" name="clave" /><br />
<input type="submit" value="login" />
</fieldset>
</form>
 |
| Formulario de Login |
Formulario de Comentarios
<form method="post" action="comentario.php">
<fieldset>
<legend>Deja tu comentario</legend>
Usuario: <input type="text" name="usuario" /><br />
EMail: <input type="text" name="email" /><br />
Comentario: <textarea rows="5" cols="50"></textarea><br />
<input type="submit" value="login" />
</fieldset>
</form>
 |
| Formulario para dejar Comentarios |
Bien, aquí ya tiene algunos ejemplos, claro que aun falta la parte del procesamiento de los datos, pero como actualmente estamos aprendiendo HTML no cabe comenzar a explicar PHP lenguaje que tal vez mas adelante veamos.
En la próxima entrega veremos mas etiquetas a fin de, en futuras entregas, comenzar con HTML5 el futuro de la Web.
No hay comentarios:
Publicar un comentario