FORMULARIOS

Para pedir/recabar información de los usuarios de nuestro sitio utilizaremos formularios.

En html indicamos el inicio/fin de un formulario con el tag FORM.

Definiendo el formulario:

<form method="post" action="index.php">

</form>

En el tag FORM usaremos "method" para indicar el método de envío de los datos que el usuario escriba y "action" para indicar el archivo destino a donde se enviará la información.

Como métodos posibles tenemos "get" y "post" (sin las comillas), siendo GET el método que envia los datos por el url (y son visibles) y POST el método que se envia en los contenido/headers del documento.

Si no especificamos ACTION, se enviará la información a el mismo archivo donde esté el formulario.

Dentro de este FORM, podremos crear los elementos que usaremos para que el usuario ingrese la información que necesitemos. Estos elementos los llamaremos "controles".

La mayoría de los controles se crean, utilizando el tag INPUT y definiendo un tipo de input (en el atributo TYPE).

Algunos tipos:

- text: Campo de texto de una sola línea (para ingresar un nombre, dirección, teléfono, etc)

- password: Campo de una sola linea para ingresar texto que permanece oculto (por lo general usado en ingreso de claves/contraseñas)

- checkbox: Control de selección múltiple (permite seleccionar varios items de entre un grupo de opciones)

- radio: Control de selección única ( permite seleccionar un solo item de entre un grupo de opciones)

- reset: Boton para resetear todos los elementos del formulario a su estado inicial

- submit: Boton usado para enviar todos los datos ingresados.

- image: Es similar a "submit" solo que se utiliza una imagen en lugar de un texto

- button: Boton personalizable ( permite asignar via javascript, un comportamiento personalizado)

Cada uno de estos tipos (text/password/checkbox/radio/checkbox/radio/reset/image/submit/button) se debe indicar en el atributo "type" de un control.

Para cada control utilizado, es MUY importante definir un "name" (nombre de identificación) que será el que utilicemos para diferenciar los datos al momento de recibir toda la información.

Atributo VALUE

- En el caso de los botones (reset/submit/button) se puede utilizar éste atributo para indicar el texto que se muestra en el botón.

- En el caso de los elementos de seleccion (checkbox/radio) se utiliza para indicar el valor que tendrá la opción seleccionada

- En el caso de los campos de entrada (text/password), se usa para mostrar un valor por defecto.

En todos los casos, cuando se reciben los datos del formulario, el valor que la persona haya seleccionado/escrito en un control, se identifica con el atributo "name". Nunca olvidar el atributo "name"

SELECT y TEXTAREA

El control SELECT permite otra forma de seleccionar una opcion entre varias ( o más de una opcion a la vez, más adelante lo veremos)

pero a diferencia de los inputs "radio" y "checkbox", se muestra como una lista desplegable.

Para usarlo, necesitamos el tag SELECT con el atributo "name", y dentro de este tag, se escribirá el tag OPTION.

Se escribirá un tag OPTION por cada opción que necesitemos se muestre, y en cada OPTION se utilizará el atributo "value" para asignar el valor que tenga la opción seleccionada:

<select name="mascotas">

<option value="si">SI, TENGO MASCOTAS</option>

<option value="no">NO, NO TENGO</option>

</select>

Importante: El valor que se establezca en "value", será el que se envie, y el valor que esté entre "<option>" y "</option>", será el que el usuario vea en pantalla. En este último ejemplo, el texto que el usuario ve, es "SI, SI TENGO MASCOTA" para la primera opción y para la segunda "NO, NO TENGO". Así que por ejemplo, si la persona selecciona la opción "SI, TENGO MASCOTA" se envía el valor que está en el "value" de esa opción (es decir "si").

El control TEXTAREA es usado para escribir texto de más de una línea. Para usarlo solo se debe definir un "name" que será el identificador al recibir lo que se haya escrito. A diferencia de los otros controles, el contenido de este control, irá escrito entre "<textarea>" y "</textarea>".

Ej:

<textarea name="comentario">

este es un texto largo que va a ser mostrado en más de una linea

</textarea>

Aquí un ejemplo de formulario completo:

<form method="post" action="guardar.php">

<input type="text" name="nombre" />

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



<input type="checkbox" value="libros" name="libros" />

<input type="radio" value="2" name="sexo" />



<select name="genero">

<option value="m">masculino</option>

<option value="f">femenino</option>

</select>



<textarea name="mensaje">

</textarea>



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

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

<input type="image" src="foto.jpg" />

<input type="button" value="Saludar" />

</form>