Los formularios son los principales elementos que permiten
que el visitante interactue con nuestra pagina.
Los formularios son programas que estan escritos en lenguajes de programacion
como: C, Perl, Java, Visual Basic, a este tipo de programas se les suele denominar
como CGI (Common Gateway Interface). Los formularios son plantillas en las cuales
el usuario introduce los datos o selecciona una opcion y la envia a un servidor
o a nuestra direccion de correo electronico, (la cual utiliza lo que en programacion
se conoce con el nombre de "Codigo Transportable"). Un formulario trabaja basicamente
asi: el visitante selecciona diferentes datos (campos) cada uno de los cuales
quedará asociado a una variable. La principal aplicabilidad de los formularios
es la posibilidad de crear cuestionarios, encuestas, páginas de comentarios o
cualquier documento en la que se desee una interacción por parte del usuario.
La etiqueta utilizada para crear un formulario es <FORM>...<FORM>.
Para que esta etiqueta pueda funcionar debe tener unos atributos.
Cajas de texto
Existen tres formas de insertar un texto en un formulario.
La primera es <INPUT TYPE="TEXT" name=nombre>
EJEMPLO:
El valor TYPE="TEXT" indica que el tipo de dato que se va a introducir es un texto.
La segunda forma de insertar un texto es una variacion de la primera en vez de
colocar TYPE=TEXT se coloca TYPE=PASSWORD.
EJEMPLO:
El valor TYPE="PASSWORD" indica que lo que se va a introducir es una clave o una
contraseña.
A simple vista no se puede diferenciar la una de la otra, la variacion se da a
el momento que la persona introduce los datos. En el primero aparece el texto
normal, en el segundo aparecen una estrellitas(esto es por razones de seguridad).
El tamaño de la caja tambien se puede variar esto se hace a traves del valor SIZE.
Su valor por defecto es de 20.
Existe otro atributo que es MAXLENGTH el cual define el número máximo de caracteres
que puede introducir el usuario.
Por ultimo esta VALUE que indica el texto por defecto que contendrá la caja.
EJEMPLO
Por favor, introduce tu nombre:<br>
<form>
<input type="password" name="Nombre" size="10" maxlength="10">
</form>
El cual se veria asi:
Por favor, introduce tu nombre:
La tercera forma de introducir un texto es a traves de la etiqueta <TEXTAREA>
...</TEXTAREA>
EJEMPLO:
Al igual que el anterior tambien se puede modificar su tamaño:
ROWS define el numero de filas que ocupará la caja de texto.
COLS Columnas que ocupará la caja de texto
EJEMPLO:
<form>
Introduce la opinión que se merece este manual:<br>
<textarea name="comentario" rows="8" cols="60">
</textarea>
</form>
El cual se veria asi:
Elementos de Menu
Estos elementos le permitirán a nuestro visitante elegir entre varias opciones,
que han sido predeterminadas por nosotros. Esto lo podemos hacer de dos maneras.
La primera es:
<select name="Colores"> Aquí definimos el nombre de la variable que
contendrá la información.
option Con esta etiqueta definimos cuantas opciones consideremos necesarias.
</select> Esta cierra la definición de este elemento del formulario.
Atributos de SELECT
SIZE Indica el número de opciones que podremos ver. Si es mayor que 1 veremos
una lista de selección y, si no, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir más de una opción.
Atributos de OPTION
VALUE Este es el valor que asignará a la variable
SELECTED Si lo indicamos en una de las opciones esta será la seleccionada
por defecto.Este atributo es utilizado cuando no queremos que aparesca la primera
opcion selecionada.
Elementos de confirmacion
Puede que yo solamente necesito que el usuario sencillamente me confirme o niegue
algo. Lo podremos conseguir por medio de controles de confirmación:
<input type="checkbox" name="nombre-variable">
Ejemplo:
<input type="checkbox" name="Loco">Soy loco
El Cual se veria asi:
Soy loco
Por defecto esa casilla siempres va a aparecer desactiva si queremos activarla
desde el principio utilizamos el valor checked
Ejemplo:
<input type="checkbox" name="Loco" checked>Soy loco
El Cual se veria asi:
Soy loco
Botones
Existen dos tipos de botones : uno que se utiliza para mandar el formulario y
otro que sirve para limpiar todo lo que haya rellenado el usuario en caso tal
de que se equivoque.
Ejemplo:
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
El cual se veria asi:
Estos botones por si solo no cumplen ninguna funcion, habria que especificarles
la URL a la cual queremos que lleguen esos datos. Supongamos que seria para nuestro
correo electronico. Seria asi:
Explicacion:
ACTION=URL
Contiene la URL del programa CGI encargado de interpretar la entrada del suario
y generar los resultados oportunos.
METHOD= GET / POST Tiene un significado. En principio puede tomar como
valor cualquiera de los métodos de transferencia de datos reconocidos por HTTP,
pero en la práctica sólo se emplean 2:
GET. Añande los argumento del formulario al URL que se especifica en ACTION
(usando como separador el símbolo ?), lo que da lugar a que el programa los reciba
como párametros de entrada.
POST. Envía los datos como parte de la entrada estándar.
Otros elementos
TYPE=“hidden”
Es simplemente un almacenamiento interno de datos. El visualizador no muestra
el contenido, recogido en el atributo VALUE, pero sí se lo pasa al programa CGI.
Resulta un componente muy adecuado para guardar información que se mantiene estable
en la página (como un determinado valor que nos indica que los datos que provienen
de esta página son los correctos y no otros de otra página distinta). Por ejemplo,
si en un documento dado ha leido el nombre de usuarios, éste puede pasar de una
página a otra a través de ete tipo de entrada, en vez de agrandar la lista de
parámetros añadidos al URL.
Este ejemplo, toma un valor oculto (hidden) en la variable browser, como valor
“Arena”, que es un tipo de navegador que reconoce el HTML 3.0.
TYPE=“image”
Hace que el visualizador presente una imagen que es sensible al ratón. Lo que
el formulario envía al servidor es un registro cuyos campos son el nombre definido
para la imagen seguido de los parámetros .x=n .y=n donde n son los números de
las coordenas x y del punto en el que estaba el ratón en el momento del envío.
Para presentar la imagen se utiliza el atributo SRC del elemento IMG. Este sería
un ejemplo de respuesta: