Programación Web - HTML (VIII) - [ FORMULARIOS ]

Formularios

Uno de los últimos temas que nos quedan por ver en cuanto a HTML son los formularios. Es más que seguro que todas las personas, al menos una vez en su vida, han visto un formulario, por ejemplo antes de obtener una cuenta de mail han llenado mínimamente un formulario.

Un formulario es un elemento del HTML que agrupa un conjunto de etiquetas con un fin determinado.
La etiqueta más importante para un formulario es <form> que debe cerrarse al final con la etiqueta </form>, dentro de este bloque irán los "campos" que los usuarios deben llenar. Esta etiqueta es la que le indica al navegador que todo lo que este dentro de ella será un formulario.

Los formularios son muy útiles para nuestra páginas web, por ejemplo, para obtener un feedback con los usuarios, puesto que ellos podrán hacernos llegar consultas, peticiones, críticas, etc. mientras que nosotros podremos darles una respuesta ya sea vía mail, si nosotros lo requerimos y el usuario lo provee, o mismo en la pagina realizando las modificaciones pertinentes.

Ahora bien, la etiqueta <form> por sí sola no muestra nada en un documento HTML , solo su contenido es lo que el usuario verá y estos se crean con las siguientes etiquetas:

Etiqueta INPUT 
Cuando queremos que el usuario ingrese un texto, un número, una edad, un email utilizaremos el elemento denominado "Input" del Tipo "Texto".
La etiqueta es <input type="text" /> que debe cerrarse con " />", es decir, "<input …[atributo/s=valor/es]… />". Esta etiqueta genera un cuadro de ingreso de texto.

Ejemplo visual de un <input type="text" />

Input Type Text

Cuyo código es:
Nombre: <input type="text" name="nombre" /><br />
Apellido: <input type="text" name="apellido" />


Etiqueta TEXTAREA
Cuando queremos que el usuario ingrese un texto extenso, como una descripción, un comentario, una crítica, es decir, elementos que tendrán gran cantidad de caracteres utilizaremos la etiqueta <textarea> que debe cerrarse con </textarea>. Esta etiqueta es similar al <input type="text" /> con la diferencia que su objetivo es almacenar un texto relativamente grande pudiendo utilizar múltiples líneas.

Ejemplo visual de un <textarea>
 

Textarea

Cuyo código es:
Descripción: <textarea></textarea> 


Etiqueta para RADIO BUTTON
Cuando queremos que un usuario elija una opción de varias y solo pueda ser una sola utilizaremos el concepto de "Radio Button", un ejemplo clásico de esto es la opción de sexo, es decir, "Hombre" – "Mujer", cuando se selecciona "Hombre" se deselecciona "Mujer" y viceversa.
La etiqueta base es <input> y su atributo "Type" es "Radio" es decir, <input type="radio" />
 
Ejemplo visual de un <input type="radio" />
 

Radio Button

El código del ejemplo es el siguiente:
<input type="radio" name="sexo" value="hombre" />Hombre<br />
<input type="radio" name="sexo" value="mujer" />Mujer<br />
Los atributos "name" y "value" los veremos más adelante en este mismo episodio.


Etiqueta para CHECKBOX
Cuando queremos que los usuarios elijan una o más opciones al mismo tiempo no podremos utilizar los "Radio Button", deberemos utilizar un nuevo concepto llamado "Check Box" cuya sintaxis es la siguiente:
La etiqueta base es <input> y su atributo "Type" es "Check" es decir, <input type="check" />
 
Ejemplo visual de un <input type=" check" />

Checkbox

El código del ejemplo es el siguiente:
<input type="checkbox" name="intereses" value="juegos" />Juegos<br />
<input type="checkbox" name="intereses" value="peliculas" />Películas<br />
<input type="checkbox" name="intereses" value="tv" />TV<br />
<input type="checkbox" name="intereses" value="otros" />Otros<br /> 

Botón RESET & SUBMIT
Bien, hasta aquí tenemos la mayoría de los elementos aprendidos, a continuación veremos 2 botones esenciales para la utilización de formularios, estos son "Reset" [Restablecer] y "Submit" [Para términos prácticos "Enviar"].
El primero, que restablecerá todo los elementos del formulario a "blanco" o "nada", tiene la siguiente sintaxis:

<input type="reset" value="Limpiar" />

El segundo, que enviará los datos del formularios, tiene la siguiente sintaxis:

<input type="submit" value="Enviar" />

Visualmente ambos botones quedan de la siguiente manera: 

Button Reset - Submit

Bien, ya nos estamos acercando al momento donde debemos empezar a perfeccionar nuestros formularios para que se vean bien, sean acordes a los estándares de la W3 y por supuesto tenga un buen funcionamiento, es decir, veremos más etiquetas especificas para determinados elementos y comenzaremos a utilizar atributos en etiquetas que vimos recientemente para mejorar y/o perfeccionar su uso.

Etiqueta para PASSWORD
Por ejemplo, si queremos agregar un campo en nuestro formulario para que el usuario ingrese su contraseña no podríamos utilizar el <input type="text" /> puesto que su contraseña quedaría expuesta a todas las personas que vean el monitor en el momento en que la escriba, por lo cual, debemos utilizar un Tipo de Input especifico para las contraseñas, este es "Password" cuya sintaxis es la siguente:

<input type="password" name="clave" />

Visualmente el Input Password con valor incluido queda así: 

Input Password

Bueno, hasta aquí hemos visto nuevas etiquetas de HTML que de seguro nos servirán, para proseguir con este capitulo comenzaré a explicar algunos atributos para empezar a hacer algunos formularios mas "útiles".

Determinar el tamaño de un TEXTAREA 
Si se han fijado el textarea que hemos creado anteriormente es muy pequeño como para manipular textos muy grandes, si bien el texto entrará será muy difícil su lectura. Para arreglar este problema tenemos dos atributos específicos de textarea que nos resultarán muy útiles, esto son " rows " y " cols ", es decir, columnas y filas. Veamos un ejemplo visual:

Atributos Rows y Cols de Textarea

El TextArea (1) tiene 2 filas y 20 columnas. Sintaxis: 
<textarea rows="2" cols="20">textarea 2 filas 20 columnas</textarea>

El TextArea (2) tiene 5 filas y 10 columnas. Sintaxis:
<textarea rows="5" cols="10">textarea 5 filas 10 columnas</textarea>
 
Creo que con estos dos ejemplos es mas que suficiente como para entender como se manejan estos atributos. Además, como pueden ver en el código y comprobarlo en el ejemplo visual, todo texto que se escriba entre la etiqueta de apertura del TextArea y la etiqueta de cierre estará contenido (en la visualización por el navegador) dentro de la caja de texto.

TEXTAREA como Solo Lectura (READONLY)
Muchas veces se habrán encontrado con páginas web que tienen el clásico "términos de licencia y uso" con el aún mas entrañable Checkbox "He leído y acepto los términos y condiciones de uso", si es así, se habrán dado cuenta que los términos de uso están dentro de un cuadro cuyo texto puede ser seleccionado, sin embargo, no se puede escribir en él. Bien esto se debe a que se utiliza un TextArea con el atributo de Solo Lectura cuya sintaxis es la siguiente:

<textarea rows="5" cols="20"  readonly="readonly">Términos de uso...</textarea>

Podrán comprobar ustedes mismos que el texto no puede ser editado debido al atributo de solo lectura. 
Además al igual que los Input, TextArea puede tener su atributo "name", ejemplo:


<textarea rows="5" cols="20"  name="descripcion">Descripcion</textarea>


Mas adelante veremos bien para qué sirve el atributo name, por ahora solo diré que lo deben utilizar pues son necesarios para obtener la información que las etiquetas contienen.

Bien, sé que en este capitulo he dicho que veríamos mas cosas, pero recapitulando un poco, creo que es necesario que primero practiquen con lo aprendido hoy, y en el próximo capitulo veremos, finalmente, formularios mas completos donde les enseñare los "métodos de formulario", más atributos y alguna que otra etiqueta nueva.