Este elemento nos permite realizar, formularios en nuestra pagina, lo cual es de gran utilidad.
Para colocar un formulario utilizamos las etiquetas <FORM>,para inciar el formulario y </FORM>
para cerrar el formulario.
Atributos de la etiqueta FORM:
ACTION: Con este indicamos que programa del ordenador donde este el servidor sera el encargado de
manipular la informacion del formulario; ya sea almacenandola en una base de datos,
generando una nueva pagina o lo que quiera el que realice el programa. Todo esto se hace
para indicar que la operacion se ha realizado con exito.
Un elemplo puede ser:
ACTION="mailto:direccion de correo electronico".
De este modo enviaremos la informacion en forma de correo, (Esta opcion ya no se usa).
METHOD: Por medio de este atributo indicamos la forma de enviar la informacion. Hay dos formas:
GET: Mediante este metodo la informacion se envia en forma de variable de entorno,
este recibe el nombre de QUERY_STRING para el proceso CGI.
POST: Con este metodo la informacion se envia en dos variables:
CONTENT_LENGTH Longitud de los datos enviados por la entrada estandar.
CONTENT_TYPE Enviados por el tipo de datos.
Nota: Para realizar esto es necesario tener un programa CGI ejecutable
y que se encuentre en el directorio CGI-BIN.
NAME="nombre": Este me permite darle nombre al objeto de un formulario.
ISINDEX: Se utiliza cuando hay mas de un formulario en la pagina, su mision es separarlos,
requiere comienzo y fin.
Los elementos del formulario son introducidos mediante los comandos:
<input>
<textarea> </textarea>
<select> </select>
EL COMANDO <input>
Se utiliza para introducir elementos como cajas, botones, circulos, casillas.
PASSWORD: Se utiliza par introducir claves y los caracteres se visulaizan como asteriscos.
los atributos del password son:
Name: Se utiliza para asignarle un nombre para luego ser reconocido
cuando manipulemos los datos.
Size: En el se indica la longitud del cuadro en caracteres.
Value: Se utiliza para inicializar el cuadro y es opcional.
un ejemplo de esto es:
El codigo fuente de lo anterior es:
<form action="mailto:ankroy2014@yahoo.es">
<input type="password" name="clave" size="15" value="V. defecto">
</form>
RADIO: Se utiliza para elegir entre una opcion dentro de una serie de opciones,
sus aributos son:
Name: Se utiliza para asignarle un nombre para luego ser reconocido
cuando manipulemos los datos, teniendo en cuenta que el nombre debe
de ser el mismo entre el numero de opciones a escojer.
VALUE: Se utiliza para asignarle un valor.
CHECKED: Se utiliza cuando queremos que una opcion este seleccionada por defecto.
Un ejemplo de esto es:
el codigo fuente de estas opciones es:
<form action="mailto:ankroy2014@yahoo.es">
<input type="radio" name="seleccion" value="1">Primera opcion
<input type="radio" name="seleccion" value="2">Segunda opcion
<input type="radio" name="seleccion" value="3">Tercera opcion
<input type="radio" name="seleccion" value="4" checked>Cuarta opcion
</form>
CHECKBOX: Se utiliza para elgir dentro de una serie de opciones y
pude venir en blanco o ya seleccionado, sus atributos son:
NAME: Se utiliza para asignarle un nombre y manipular los datos.
VALUE: Se utliza para asignarle un valor.
CHECKED: Se utiliza cuando queremos que una opcion este seleccionada por defecto.
Un ejemplo de esto es:
¿Que deportes practica?
El codigo fuente de lo anterior es:
<form action="mailto:ankroy2014@yahoo.es">
<input type="checkbox" name="respuesta" value="1">Futbol
<input type="checkbox" name="respuesta" value="2">Rafting
<input type="checkbox" name="respuesta" value="3">Parapentismo
<input type="checkbox" name="respuesta" value="4">Ciclismo
<input type="checkbox" name="respuesta" value="5">Dormir
<input type="checkbox" name="respuesta" value="6" checked>Monociclo
</form>
TEXT: Este comando permite insertar textos pequeños como nombre, apellido, codigo, etc.
Los atributos de este comando son:
Name: Se utiliza para asignarle un nombre para luego ser reconocido
cuando manipulemos los datos.
Size: En el se indica la longitud del cuadro en caracteres.
Value: Se utiliza para inicializar el cuadro y es opcional.
Un ejemplo de esto es:
El codigo de lo anterior es:
<form action="mailto:ankroy2014@yahoo.es">
Nombre: <input type="text" name="nombre" size="30" value="digite su nombre">
Apellido <input type="text" name="apellido" size="30" value="digite su apellido">
</form>
Submit: Se utilizan para crear un boton y enviar la transmicion de los datos
Los atributos de este comando es:
Name: Se utiliza para asignarle un nombre para luego ser reconocido
cuando manipulemos los datos.
Value: Se utiliza para inicializar el nombre del boton.
Un ejemplo de esto es:
El codigo fuente de lo anterior es:
<form action="mailto:ankroy2014@yahoo.es">
Nombre: <input type="text" name="nombre" size="30" value="digite su nombre">
Apellido <input type="text" name="apellido" size="30" value="digite su apellido">
<br>
<input type="submit" name="datos" value="Enviar">
</form>
RESET: Nos genera un boton el cual nos establece los valores por defecto.
y su unico atributo es Value que cunple la misma funcion que submit.
Un ejemplo de esto es:
El codigo fuente de lo anterior es:
<form action="mailto:ankroy2014@yahoo.es">
<input type="checkbox" name="respuesta" value="1">Futbol
<input type="checkbox" name="respuesta" value="2">Rafting
<input type="checkbox" name="respuesta" value="3">Parapentismo
<input type="checkbox" name="respuesta" value="4">Ciclismo
<input type="checkbox" name="respuesta" value="5">Dormir
<input type="checkbox" name="respuesta" value="6" checked>Monociclo
<input type="reset" value="Borrar">
</form>
EL comando <textarea>
Este comando nos permite crear cuadro de texto, en el cual se encuentran
cadenas de texto largos, sus atributos son:
Name: Se utiliza para asignarle un nombre para luego ser reconocido
cuando manipulemos los datos.
Rows: Se utiliza para indicar la altura del cuadro de texto.
Cols: Se utiliza para indicar el ancho del cuadro de texto
Un ejemplo de esto es:
El codigo fuente de lo anterior es:
<form action="mailto:ankroy2014@yahoo.es">
<textarea name="texto" rows="10" cols="60">texto por defecto</textarea>
</form>
El comando <select>
Se usa para crear una lista extensible con diferentes valores y por lo general acompañado del
atributo name; para crear las opciones se usa el comando <option> y <option selected>
para indicar una opcion por defecto.
un ejemplo de esto es:
El codigo fuente de lo anterior es:
<form action="mailto:ankroy2014@yahoo.es">
<select name="valores">
<option> uno
<option>dos
<option>tres
<option>cuatro
<option selected>Cinco
</select>
</form>
COMO OBTENER LA INFORMACION DE LOS FORMULARIOS
Para ver la informacion que envia un formulario, ingresaremos los datos al siguiente
formulario y al darle clic en enviar se abrira un programa que ma permite enviar e-mail
en la parte donde se escribe el mensaje observaremos lo que sera enviado.
ATENCION:
Es recomendable a la hora de visualizar los datos del formulario realizarlo por mozilla o
Konqueror.
TALLER:
Realizar un formulario que contenga:
* Pida el nombre y codigo.
* Sexo (Utilizar select).
* Horario (utilizar radio).
* Semanas que a asistido (Utilizar checkbox).
* Boton para enviar.
* Boton para resetear.
