INSERCIÓN DE FORMULARIOS

Un formulario es un elemento que permite recoger datos introducidos por un usuario. Una de las maneras más interactivas de actuar con el Web es mandando información por medio de las páginas. Estos formularios envían la información, ya sea a una dirección de correo electronico o a un servidor. Para ello es necesario tener instalado un programa del lado del servidor que procese los datos enviados .

Estructura general de un formulario. Los formularios se insertan a través de las etiquetas <form> y </form> y esta etiqueta tiene diferentes atributos. Veamos un formulario de ejemplo:

<form action="mailto:micorreo@algo.com" method="post" enctype="text/plain" >
<input type="submit" name="boton" value="Enviar"/>
</FORM>>

• El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.
• El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post. El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa al enviar el formulario, como ocurre cuando se realizan consultas sobre una base de datos. El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.
• El atributo enctype indica el modo en que será cifrada la información para su envío. "Text/Plain" permitirá que la información sea enviada sin ningún tipo de codificación.
• Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario. El atributo name indica el nombre que se desea dar al elemento de entrada, y el atributo type indica el tipo de elemento de entrada.

Se presenta un ejemplo de un formulario con el que podemos enviar comentarios a través de un e-mail.

<form action="mailto:romeol@algo.com" method="post"> <br /> <input type="text" name="nombre" /> <br /> <br /> <textarea name="texto" rows="9" cols="20"> </textarea> <br /> <br /> <input type="submit" value="Enviar Datos" /> </form>

Principio del formulario Final del formulario

Principio del formulario Final del formulario

Con <input type ="text" name="nombre"> obtendremos un campo de texto que tiene, en forma predeterminada, una longitud de de 20 caracteres. Con el atributo SIZE="num" podemos modificar el tamaño.

Existe también otro atributo para delimitar la introducción de caracteres y éste es MAXLENGHT="num" , donde "num" será la capacidad máxima de caracteres dentro del campo.

Para introducir texto en forma de password; es decir, que no sea visible el contenido y que aparezcan únicamente asteriscos, definimos la etiqueta de la siguiente manera:

<input type="password" >

Para intoducir una caja en la cual el usuario pueda escribir párrafos de texto, utilizamos la etiqueta que aparece en el formulario de ejemplo:
<textarea name="texto" rows="9" cols="20">

donde "rows" es igual al número de filas y "cols" el número de columnas.

Otras etiquetas que pueden ser utilizadas en los formularios.

Si queremos que el usuario inserte o envíe información por medio de un menú desplegable la etiqueta a utilizar es la siguiente:
<select name="nombre"> Donde "nombre" es el nombre de una variable que utilizamos.

<form> <select name=nombre > <option>Lunes <option>Martes <option>Jueves </select> </form>

Principio del formulario Final del formulario

Principio del formulario Final del formulario

El menú desplegable se distingue porque ofrece distintas opciones para que el usuario elija aquella que prefiera. Cada una de las opciones se define por medio de la etiqueta <option>opción donde "opción" es el nombre de la opción que queremos que aparezca en el menú. Podemos ver el ejemplo que aparece a la izquierda

¿Qué color prefieres?<form> <input name="prefiere" type="radio" value="rojo" checked> Rojo<br /> <input name="prefiere" type="radio" value="verde"> Verde<br /> <input name="prefiere" type="radio" value="azul" > Azul<br /> <input name="prefiere" type="radio" value="ninguno"> Ninguno<br /> </form>

¿Qué color prefieres? Principio del formulario Rojo Verde Azul Ninguno Final del formulario

Cuando queremos que el visitante escoja sólo una entre varias opciones, podemos utilizar la introducción de datos por medio de botones. Para ello, se insertan varios botones de opción con el mismo nombre (que indica la variable name) y con distintos valores. Sólamente uno de estos botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable.

<input name="radiobutton" type="radio" value="valor inicial">

El atributo "checked" en una de las etiquetas sera la opción que aparecerá marcada en forma predeterminada. Podemos ver el ejemplo que aparece a la derecha.

Casilla de verificación

Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox. El atributo value indica el valor asociado a la casilla de verificación y es necesario poner este atributo ya que es el valor a enviar. La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. La casilla de verificación permite seleccionar una o todas las opciones al mismo tiempo.
Por ejemplo:

<input type="checkbox" value="rojo" checked> 
<input type="checkbox" value="verde">
<input type="checkbox" value="azul">

Y aqui vemos el resultado.

Principio del formulario

Rojo Verde Azul

Final del formulario

Con las etiquetas vistas hasta este momento es posible crear diferentes tipos de formularios, sólo queda realizar varias prácticas y probar su funcionalidad directamente en una página Web alojada en algún servidor remoto.