Computación Gráfica
FORMULARIOS:
Los formularios web son muy similares a los impresos en papel y poseen su misma finalidad o función.
Estos elementos permiten transmitir información entre un equipo cliente(el del usuario) y el servidor.
Pueden ser de muy diversos tipos, dependiendo del objetivo que deban cumplir. Entre las opciones más comúnmente utilizadas, encontramos los de contacto,los de suscripción, los de pedido, los de votación, los de encuesta y los que se utilizan para ingresar un currículum en una bolsa de trabajo.
Todos ellos se realizan en cuatro partes:
la primera es la estructura dada por el código HTML, la segunda es la estética otorgada por las reglas CSS, la tercera es la validación e interacción del lado del cliente (mediante los eventos y el código javascript) y la cuarta es la programación del lado del servidor mediante el código PHO.
Con estos formularios podemos recolectar información de los usuarios, almacenar esa información en la memoria del servidor y, a continuación, utilizar la información para crear una respuesta dinámica basada en los datos introducidos por el usuario.
Los formularios HTML Permiten recabar información de los usuarios y almacenarla en la memoria del servidor.
Un formulario HTML puede enviar la información como parámetros de formulario o como parámetros de URL.
Objetos de formulario:
En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de formulario.
Los objetos de formulario son mecanismos que permiten a los usuarios introducir datos. Podemos añadir a un formulario los siguientes
objetos de formulario:
Campos de texto Aceptan cualquier valor alfanumérico.
El texto se puede visualizar como una sola línea, como varias líneas y como un campo de contraseña en el que el texto introducido se sustituye por asteriscos o viñetas para ocultar
el texto a otras personas que puedan estar mirándolo.
Campos ocultos Permiten almacenar información introducida por el usuario, como un nombre, una dirección de correo electrónico o una preferencia de visualización, y utilizarla la próxima vez que el usuario visite el sitio.
Botones Realizan acciones cuando se hace clic en ellos.
Podemos añadir una etiqueta o un nombre personalizado a un botón, o bien usar una de las etiquetas predefinidas, "Enviar" o "Restablecer".
Utilizamos un botón para enviar datos de formulario al servidor o para restablecer el formulario.
Casillas de verificación Admiten múltiples respuestas en un solo grupo de opciones.
Un usuario puede seleccionar tantas acciones como sean necesarias.
Botones de opción Representan opciones que se excluyen mutuamente.
Cuando se selecciona un botón de un grupo de botones de opción, se desactivan todos los demás botones del grupo (un grupo está formado por dos o más botones
que comparten el mismo nombre).
Lista/menú Muestra valores de opciones en una lista de desplazamiento que permite a los usuarios seleccionar varias
opciones.
La opción Lista muestra los valores de las opciones en un menú que permite a los usuarios seleccionar una sola opción.
Utilizamos los menús si disponemos de una cantidad de espacio limitada pero necesita mostrar muchos elementos, o bien para controlar valores devueltos al servidor.
A diferencia de los campos de texto, en los que el usuario puede escribir todo lo que desea, incluso datos no válidos, nosotros establecemos los valores exactos que debe devolver
un menú.
Campos de archivo Permiten al usuario examinar los archivos de su ordenador y cargarlos como datos de un formulario.
Campos de imagen Permiten insertar una imagen en un formulario.
Utilizaremos los campos de imagen para crear botones gráficos, como Enviar o Restablecer.
El uso de una imagen para llevar a cabo tareas distintas del envío de datos requiere adjuntar un comportamiento al objeto de formulario.
Capcha:
Capcha es una prueba de seguridad destinada a diferenciar entre los humanos y las máquinas.
Consist en pedir la introducción de caracteres que se muestran en una imagen distorsionada (imagen movida, caracteres tachados o incompletos, entre otras posibilidades).
Su finalidad más importante es evitar que los robots (pequeños programas que tienen por misión utilizar ciertos servicios para generar correo o cuentas spam)
utilicen sistemas de registro en cuentas de e-mail o redes sociales.
De registro:
Son los que deberemos colocar nuestros datos personales, un nombre de ususario y una contraseña, para tener acceso a ciertas partesdel sitio
restringidas a quienes no se registren. Son muy habituales para formar parte de redes socales, abrir cuentas de e-mail o participar en foros.
De Login:
Permiten acceder a sitios en los que nos hemos registrado previamente.
Suelen pedirnos un nombre de usuario y una contraseña.
De compra:
Son aquellos que debemos completar cuando nos encontramos denro de las llamadas tiendas online. Estos formularios nos pedirán no solo nuestros datos personales, sino
también información sobre tarjeta de crédito o cuenta bancaria.
De encuesta:
Estos formularios se utilizan en las páginas que brindan un servicio online.
En general, su finalidad es ilustrar la experiencia del usuario la experiencia del usuario en el sitio para mejorarla en el futuro.
CREACION DE UN FORMULARIO HTML:
Como primer lugar elegiremos donde deseemos que aparezca el formulario.
2- Seleccionamos Insertar / Formulario o seleccionamos la categoría Formularios en el panel Insertar y hacemos clic en el icono
Formulario.
En la vista Diseño, los formularios se indican con un contorno de línea de puntos rojos.
Si no ve dicho contorno, seleccionamos Ver / Ayudas visuales / Elementos invisibles.
3- Establecemos las propiedades del formulario HTML en el inspector de propiedades (Ventana > Propiedades):
a) En la ventana del documento, hacemo clic en el contorno del formulario para seleccionarlo.
b) En el cuadro Nombre del formulario, escribimo un nombre exclusivo para identificar el formulario.
La asignación de nombre al formulario permite hacer referencia a él o controlarlo con un lenguaje de scripts.
Si no asignamos un nombre al formulario, Dreamweaver genera uno mediante la sintaxis formn e incrementa el valor de n para cada uno de los formularios que se añadan a la página.
En el cuadro Acción, especificamos la página o el script que va a procesar los datos del formulario introduciendo la
ruta o haciendo clic en el icono de la carpeta para desplazarse hasta la página o el script correspondiente.
Ejemplo: processorder.php.
En el menú emergente Método, seleccionamos el método mediante el cual se transmitirán los datos del formulario al
servidor.
Definimo cualquiera de las opciones siguientes:
Predeterminado:
Utiliza el valor predeterminado del navegador para enviar los datos del formulario al servidor.
Normalmente, el valor predeterminado es el método GET.
GET Añade el valor al URL que solicita la página.
POST Incrusta los datos del formulario en la petición HTTP.
Composición de un Formulario:
Etiqueta <form>:
Se utiliza como la estructura básica de todo formulario.
Dentro de ella definimos los atributos, los métodos y la acción que llevará a cabo este recurso.
Etiqueta <input>:
Puede tener varios usos diferentes.
Text:
Una caja de texto simple para textos cortos.
Radio:
Para seleccionar una única opción dentro de una casilla circular.
Checkbox:
Para seleccionar una o más opciones dentro de una casilla cuadrada.
Submit:
Propiedad que se asigna a las etiquetas <input> que hacen referencia a un botón
(botones de envío, de borrado, etc.)
File:
Botoón que permite buscar archivos en nuestro equipo y subirlo al sitio.
Reset:
Borra lo que se ha completado.
<textarea>:
Es un campo de texto destinado a contener grandes cantidades de caracteres.
La etiqueta <select> por su parte, tiene por finalidad darnos a elegir la opción
que querramos dentro de una lista, por lo cual tendrá en su interior la etiqueta <option>.
Por otro lado <label> se ocupa de mostrarnosla referencia del campo de texto y finalmente
<fieldset> sirve para agrupar los distintos tipos de datos según como resulte más conveniente.
Esta contiene por defecto una etiqueta <legend> que se usará para colocar el título que le
daremos al grupo de datos.
Elementos de los formularios:
Permiten recibir información de los usuarios de nuestro sitio,
y se componen de diversos elementos con funciones específicas, a los que podemos
asignar funciones particulares.
action: define la acción que debe realizar el formulario. Tenemos dos formas de usar este atributo.
La primera es asociarlo a un archivo que se encargará de procesar el contenido del formulario.
el código sería así:
<form action="contacto.php" method="post">
method: se ocupa de especificar cómo debe ser enviado el contenido del formulario.
La primeramanera de hacerlo es mediante el método denominado [GET].
Este utiliza la barra de direcciones del navegador para enviar el contenido, volviéndolo en cierto
sentido público, porque se visualiza en dicha barra.
Este sistema no soporta el envío de imágenes ni más de 500 caracteres.
Está muy difundido en las páginas web dinámicas para la elaboración de consultas que se encuentran asociadas
a una base de datos.
La segunda opción es el método denominado [POST], el más utilizado para enviar
el contenido de un formulario porque lo hace sin recurrir a la barra de navegación del browser, con lo cual oculta el contenido.
Además permite adjuntar y enviar imágenes, y la cantidad de caracteres, es por decirlo de alguna forma, ilimitada.
Etiqueta Input:
Se utiliza para textos cortos se asigna mediante <input> y podemos apicarle dos atributos
[type] y [name].
La etiqueta se define de la siguiente manera:
<input type="text" name="nombre" value="">
Al atributo [name] es posible colocarle cualquier palabra que deseemos, se aconseja que esté relacionado a su
contenido.
El atributo [name] es muy importante debido a que es el nombre que utilizaremos para tomar la información del campo de texto cuando procesemos el formulario.
También es fundamental definir el atributo [type], ya que la etiqueta <input> posee múltiples usos y es este atributo el que determinará
la función que cumplirá.
Los valores que se le pueden dar a [type] son:
[text], [password], [radio], [checkbox], [submit], [reset], [file], [hidden], [image] y [button].
Hay un atributo también llamado [size] que nos permitirá establecer el tamaño del campo de texto o etiqueta en un número
de caracteres visibles.
Si no definimos este atributo, cuando el campo de texto se muestre, lo hará en un tamaño preestablecido
por el navegador.
El atributo [maxlenght] nos permite definir la cantidad máxima de caracteres que se pueden colocar dentro del campo de texto.
De esta manera si le asignamos un valor una vez que sea alcanzado el valor que le dimos el navegador impedirá seguir escribiendo.
Redondeando:
[size] asigna un tamaño a la etiqueta, mientras que [maxlenght] restringe la cantidad de caracteresque podemos ingresar.
El atributo [value] sirve para otorgarle un valor inicial al campo si no queremos que aparezca vacío.
<input type="text" name="nombre" value="Escriba su nombre"/>.
Texto Oculto:
Cuando queremos ocultar el texto que escribimos por medio de asteriscos o círculos.
Para esto la única diferencia estará en el atributo [type], en donde debe figurar [password].
Este atributo es muy utilizado cuando queremos generar campos con claves o logins.
<input type="password" name="contrasenia" value="">.
Botón Radio:
El tipo [radio] nos permite hacer elegir una única opción de una lista. La etiqueta esmpleada es <input>, pero con su atributo [type] establecido como [radio]. Al usar este elemento, debemos generar los textos y los saltos de línea en el código HTML.
<input type="radio" name="opciones" value="1"/>Opción 1<br/> <input type="radio" name="opciones" value="2"/>Opción 2<br/> <input type="radio" name="opciones" value="3"/>Opción 3<br/> <input type="radio" name="opciones" value="4"/>Opción 4<br/> <input type="radio" name="opciones" value="5"/>Opción 5<br/>
Como vemos el atributo [name] es el mismo en los 5 casos, pero [value] es diferente.
Por lo tanto cuando recibamos el mail sobre la opción seleccionada, veemos esto:
[Opciones=2].
También podemos preseleccionar una opciónmediante el atributo [checked].
<input type="radio" name="lista" value="2" checked="checked"/>Opción 2
Checkbox o caja de Selección o Validación:
El tipo [checkbox] es más conocido como caja de validación, puede ser activada o desactivada.
A diferencia de los botones radio, en este caso es posible seleccionar más de una opción al mismo tiempo.
Al igual que con [radio], en este caso es posible seleccionar una opción de manera predefinida mediante el atributo [checked].
<label> <input type="checkbox" name="condiciones" value="si" id="condiciones" checked="checked" /> Acepto las condiciones de uso</label>
Usar imágenes en los botones nos permite convertir los formularios en parte del
diseño de nuestro sitio
Botón Enviar:
El tipo [submit] se utiliza para enviar el formulario una vez que esté complero.
Se diferencia en estructura sólo en el atributo [type].
<input type="submit" value="Enviar" />
Botón File o de Archivos Adjuntos:
El atributo [type] con valor [file] se usa para permitir el envío de archivos mediante el formulario de contacto.
<input type="file" name="adjunto" size="30" />
Botón Image:
El botón tipo ìmage] sirve para colocar una imagen en reemplazo del botón [submit].
El código es:
<input type="image" src="#" alt="submit" />
Textarea:
Esta etiqueta [textarea] sirve para que el usuario pueda escribir más de una línea en el campo de texto.
Se inserta como <textarea> y debe cerrarse al finalizar.
Sueleutilizarse para que los usuarios envíen un mensaje o un comentario, o cuando deben completar alguna opción
que necesita un desarrollo un poco más complejo que una línea.
No se emplea para textos cortos, y posee los atributos [name], [rows] y [cols].
El atributo [rows] define el número de líneas que se podrán escribir en el campo de texto, mientras que [cols]
define el número de columnas en el que éste puede dividirse.
<textarea name="consulta" id="consulta" rows="3" cols="28">Escriba su comentario</textarea>
Lista de opciones:
La etiqueta [select] también es conocida como lista de opciones ya que permite elegir entre una serie de alternativas predefinidas
por el diseñador del formulario.
Está compuesta por una etiqueta <select> y su correspondiente cierre.
Podemos establecer su nombre mediante el atributo [name], determinando las opciones disponibles por una etiqueta <option>
y su respectivo cierre.
<select name="operaciones"> <option>Opción 1</option> <option>Opción 2</option> <option>Opción 3</option> <option>Opción 4</option> </select>
Selecciones Múltiples:
Con esta función podemos usar el shift o control para seleccionar varias opciones.
<select name="ciudades" size="3" multiple="multiple">
Selección por defecto:
<option selected="selected">Bariloche</option>
Legend y Fieldset:
La etiqueta <fieldset> sirve para agrupar los distintos elementos de un formulario e incluso agregarles
un título mediante la etiqueta <legend>.
Esta última etiqueta permite utilizar el atributo [align] con las propiedades
[center], [top], [right], según como queremos mostrar el título.
Por defecto <fieldset> genera un recuadro y <legend>
se coloca en la parte superior izquierda.
<fieldset>
<legend>Llene sus datos</legend>
<textarea name="consulta" id="consulta" rows="3" cols="28">Escriba su comentario</textarea>
</fieldset>
Etiqueta Label:
Esta etiqueta permite colocar texto en su interior que queremos mostrarle al usuario.
Es muy usada para presentar el texto que corresponde a la etiqueta <input>.
Por ejemplo si el formulario tiene un campo llamado [nombre], este texto estaría en el interior de <label>.