FORMULARIOS

¿Para qué sirven los formularios? 

 Los formularios nos van a permitir, desde dentro de una presentación web, solicitar información al visitante. Estarán compuestos por tantos campos como informaciones queramos obtener. Una vez introducidos los valores en estos campos serán enviados a una URL donde se procesará toda esta información.

 Los formularios permiten obtener información de un cliente que visita una Web. Utilizando esta herramienta un usuario puede enviar datos para que luego sean procesados en el servidor.

 Un formulario contiene dos tipos de elementos: campos de datos y control. Los primeros permiten al usuario introducir información y los segundos indicar qué debe hacerse con esos datos. Los datos son ingresados por el usuario y el control es un proceso que en ciertas ocasiones se realiza para permitir procesar dicha información.

 El formulario no es más que una página escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opción desde botones.

Como crear un formulario

Debe estar encerrado entre la etiqueta FORM , dentro del body.esta etiqueta prsenta tres atributos, los dos primeros atributos de la tabla son de uso obligatorio para cualquier formulario que generemos, ya que establecen dónde enviar la información y cómo enviarla. El parámetro ACTION define qué es lo que debemos hacer con la información obtenida, METHOD puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.

Controles de formularios :INPUT 

Cuadro de texto

 Esta misma etiqueta, acompañada de TYPE, será la utilizada para insertar la mayoría de los controles, por ejemplo: INPUT TYPE=”text” SIZE=15 MAXLENGTH=15 NAME=”Nombre”

Size: Determina la anchura de la caja de texto. El valor por defecto de este atributo es 20 caracteres

 Maxlength: Con este atributo limitamos el número máximo de caracteres que pueden ser escritos en una caja de texto. Si no usamos el atributo MAXLENGTH, el número de caracteres que pueden introducirse en la caja de texto no tendrá límite, las dos son independientes entre si.

 Value: Sirve para especificar un texto que debe aparecer por defecto en la caja de texto, antes de que el usuario escriba nada. Este texto suele ser, en general, o bien instrucciones o bien la respuesta más probable.

 Name: define el nombre que se le da al control, esto puede servir para que el lenguaje dinámico lo tome como lectura y lo pueda manipular como propio.

Placeholder: Un truco común de la usabilidad en formularios web es tener contenido de relleno en los campos de entrada de texto.

 Autofocus: este atributo hace que un campo de formulario adquiera el foco de forma automática cuando se carga una página.

Cuadro de texto para claves

 En ocasiones puede ser conveniente pedir al usuario algún tipo de información confidencial como puede ser una clave de acceso o password.Su etiqueta sera INPUT TYPE=”password” ,Los cuadros de texto para claves también tienen los atributos SIZE, MAXLENGTH, VALUE y ALIGN que vimos en las cajas de texto.

Etiquetar controles 

En el caso de querer incluir una etiqueta a un elemento, utilizamos la etiqueta LABEL  Esta no sólo permite darle texto a un elemento de un formulario, sino que comparte el control del mismo. Esto quiere decir que podemos seleccionar no sólo al elemento sino que también a su rótulo.

Botones 

Un botón nos permite realizar una acción con el formulario que lo contenga. Existen dos tipos básicos de botones: enviar el formulario (envío o submit) y poner todos los campos a sus valores iniciales (restablecimiento o reset). Además de estos dos tipos de botones, existe un botón especial que no posee ninguna acción predefinida y que, por tanto, deberá ser especificada con un lenguaje del lado del cliente. Los botones pueden insertarse a través de la etiqueta (tag) HTML input (botones para enviar y restablecer y botones de imagen) o el elemento HTML button (botones de contenido).

Boton de envio :Este control envía automáticamente el formulario en el que se encuentra, cuando es presionado. Para colocar este boton de se escribe INPUT TYPE=”submit”.

Boton de borrar: reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con la etiqueta (tag) HTML input con el valor “reset” en su atributo “type”.

Botones de imagen: Estos tipos de botones funcionan exactamente como los botones de envío, salvo que los de imagen son representados visualmente con la imagen especificada en el atributo “src” .Los botones de imagen se insertan con el tag HTML input, usando el valor “image” en su atributo “type”.

Botones de contenido o genéricos: Los botones de contenido pueden ser usados como botones de envío o restablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo “type”). Su característica es que se puede insertar contenido HTML dentro de ellos.

 Radio Buttons

Estos controles reciben también el nombre de botones de radio, como traducción directa de su denominación inglesa radio buttons y porque en general los navegadores suelen darles una forma circular . Para insertar un botón de elección usaremos de nuevo la etiqueta INPUT, pero esta vez el valor del atributo TYPE será radio:  INPUT TYPE=”radio”.Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado (OFF), estando inicialmente todos en la posición OFF. También es posible especificar que un botón determinado esté seleccionado inicialmente insertando el atributo CHECKED en la etiqueta INPUT de la siguiente manera:INPUT TYPE=”radio” CHECKED.

Los botones de elección suelen ser insertados en los formularios en grupos, dando al usuario la posibilidad de elegir entre una serie de opciones. Cuando pulsamos sobre un botón de radio, lo pasamos a la posición ON y permanecerá en ese estado hasta que pulsemos en otra opción del mismo grupo. Esto es así porque entre los botones de radio de un mismo grupo sólo uno de ellos puede estar seleccionado, por tanto cuando seleccionamos uno, aquel que estuviese seleccionado previamente dejará de estarlo.Para indicar que una serie de botones de elección pertenecen a un mismo grupo debemos incluir el mismo valor en el atributo NAME en todos ellos. Además debemos usar el atributo VALUE para dar un nombre distinto a cada uno de los botones.

Cuadro de selección 

Las cajas de selección guardan ciertos parecidos con los botones de radio, pero además permitirán seleccionar varias opciones en una lista  Al igual que dichos botones, tienen dos posiciones: seleccionados o no seleccionados, estando en esta última posición inicialmente (a no ser que hayamos usado el atributo CHECKED). Cada caja de selección es independiente del resto, y por lo tanto, el valor del atributo NAME debe ser diferente en cada una. Para insertar una caja de selección debemos usar de nuevo la etiqueta INPUT, pero esta vez con TYPE=”checkbox”

Cuadros de selección 

Su función será dar a elegir entre una serie de opciones de manera que el usuario pueda elegir una o varias de ellas. Existen dos formas de mostrar estas opciones, como una lista con desplazamiento, o mediante una lista desplegable. Para insertar un cuadro de selección usaremos la etiqueta SELECT, que consta de una instrucción de inicio y de una instrucción de fin, entre las cuales introduciremos las diferentes opciones para el usuario. Para insertar estas opciones usaremos una nueva etiqueta, OPTION, que consta de una única instrucción. Veamos un ejemplo que ilustra el uso de uso de este tipo de control.

Agrupando Elementos

 Dentro de un formulario podemos agrupar los elementos por tema, permitiendo un mejor aspecto. Para ello se utiliza la etiqueta FIELDSET  que permite agrupar elementos de un formulario, creando una caja alrededor de los mismos. La etiqueta LEGEND nos permite colocar un título dentro del grupo, este título puede colocarse arriba (top), abajo (bottom), izquierda (left) o derecha (right).