2.5. Manipular objetos y formularios en una página Web.
Anuncio
ELABORADO POR CLAUDIA FLORES 2.5. Manipular objetos y formularios en una página Web . Un formulario es una página web en la cual el usuario puede introducir información que posteriormente recibiremos para que sea procesada, por alguna aplicación o programa que se encuentre en el servidor. Un formulario está compuesto como mínimo de un objeto, por ejemplo una caja de texto. En este caso la información se enviara cuando el usuario pulse la tecla enter, los formularios están formados por más de dos objetos, encontraremos habitualmente dos botones, uno para eliminar la información introducida en el formulario y otro para enviar los datos. Esta información se transmite por el protocolo HTTP o HTTPS. FORMULARIOS <FORM> Entonces Un formulario se insertan con las etiquetas <form> y </form> y es aquel elemento que permite recoger datos introducidos por el usuario, se utilizan para conocer las opiniones, dudas y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones. El formulario <form> está formado, entre otros elementos por etiquetas, campos de texto, menús desplegables y botones. Es mejor utilizar tablas para organizar los elementos de los formularios, con ello facilita su comprensión y su apariencia. Los datos se reciben en ASCII y con el formato nombre=valor, donde nombre es el nombre del campo y valor el dato introducido. Si tenemos más de un campo en el formulario se utiliza el símbolo & para separar los distintos campos. M2S1 ELABORADO POR CLAUDIA FLORES Nombre: ________________________________________________ Grupo:__________Fecha: ___________________ Calificación: __________________ ELABORO: LIC. Claudia Ivonne Flores Casas. Materia: Elaboración de Páginas Web EJERCICIO PRACTICO Construir un formulario Por ejemplo. <html> <head> <title>formularios</title> </head> <body> <p>Si desea recibir más infomacion sobre la Evolución de la Especie de________________ rellene el siguiente formulario: </p> <FORM METHOD="GET" ACTION="mailto:[email protected]"> <p> Nombre:<INPUT TYPE=TEXT SIZE=20 MAXLENGTH=20 NAME="nombre"> Apellidos :<INPUT TYPE=TEXT SIZE=35 MAXLENGTH=35 NAME="Apellidos"> </p> <P> Direccion:<INPUT TYPE=TEXT SIZE=40 MAXLENGTH=40 NAME="Direccion"> </P> <P> Poblacion:<INPUT TYPE=TEXT SIZE=15 MAXLENGTH=15 NAME="Poblacion"> Codigo Postal:<INPUT TYPE=TEXT SIZE=5 MAXLENGTH=5 NAME="cp"> Provincia:<INPUT TYPE=TEXT SIZE=15 MAXLENGTH=15 NAME="Provinvia"> </p> <p> Telefono:<INPUT TYPE=TEXT SIZE=12 MAXLENGTH=12 NAME="Telefono"> E-Mail:<INPUT TYPE=TEXT SIZE=40 MAXLENGTH=40 NAME="email"> </P> <P> <INPUT TYPE=submit NAME="Enviar" VALUE="Enviar"> <INPUT TYPE=submit NAME="Borrar" VALUE="Borrar"> </P> </FORM> </BODY> </HTML> M2S1 ELABORADO POR CLAUDIA FLORES Las instrucciones <FORM> y <INPUT> junto con <SELECT>,<OPTION> y <TEXTAREA> se utilizan para definir el formulario y los distintos elementos que lo componen. El objeto <FORM> se emplea para definir los límites del formulario dentro de la pagina web, así como la acción que deberá realizarse cuando se pulse el botón Enviar. Entre dichas etiquetas habrá que insertar diferentes objetos que formaran el formulario, la etiqueta <form> tiene los siguientes atributos. ATRIBUTO El atributo action El atributo enctype El atributo method El valor get El valor post LANG ACCEPT-CHARSET SCRIPT SIGNIFICADO Indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario. Esta dirección puede ser un e-mail o una aplicación que se encuentre ubicad en el servidor y que analizara y tratara los datos, si es un email deber tener el siguiente formato: “mailto:e-mail” Indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-formurlencoded. Indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post. Se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos. Se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos. Se recomienda utilizar el valor post. Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código: <form action="mailto:[email protected]" method="post" enctype="text/plain" > ... </form> EJEMPLO =“……………….” =“………………..” Solo es get o post METHOD=”GET” METHOD=”POST” =“……………………” =”…………………..” =”…………………….” Las dos clausulas más importantes de esta instrucción son ACTION y METHOD, ya que determinaran la acción que se realizara y como se transmitirán los datos. M2S1 ELABORADO POR CLAUDIA FLORES Elementos de un Formulario ELEMENTOS DE ENTRADA <INPUT> Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario, esta instrucción se utiliza para crear un campo dentro del formulario, el tipo de campo viene definido por el valor de la clausula TYPE. <INPUT TYPE=”TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT(es para enviar la información), RESET(para eliminar el contenido del formulario y poder introducir nuevos datos y el nombre del botón y el texto que aparece en el mismo se definen utilizando la clausla NAME y VALUE ejemplo <INPUT TYPE=submit NAME=”enviar” VALUE=”aceptar”), HIDDEN, IMAGE, FILE, RANGE, SCRIBBLE, JOT” LANG=”……..” ID=”……” CLASS=”…….” NAME=”…….” VALUE=”………”es opcional en el caso de las cajas de texto, pudiéndose utilizar las clausulas SIZE y MAXLENGTH para determinar el tamaño de la caja de texto y el número máximo de caracteres que podemos escribir así por ejemplo Para crear una caja de texto denominada país, cuyo valor por defecto sea España y tenga un tamaño de 10 caracteres y permita introducir un máximo de 15, escribiríamos lo siguiente. <input name=”pais” value=”España” size=10 maxlength=15> no es importante colocar la clausula type, ya que por defecto el valor es el mismo. SRC=”……….” CHECKED SIZE=”………” MAXLENGTH=number ALIGN=top, middle, bottom, left, right ACCEPT=”……” DISABLED ERROR=”……” MIN= number M2S1 ELABORADO POR CLAUDIA FLORES MAX=number MD=”……” Por defecto el valor de Type es text, es decir la caja de entrada será un texto. El atributo name indica el nombre al objeto dentro del formulario o que se desea dar al elemento de entrada, mediante el cual será evaluado, este nombre será el utilizado para identificar el valor que se asigne al objeto cuando los datos se transmitan al servidor. El valor del campo or defecto se asigna la clausula VALUE, y el atributo type indica el tipo de elemento de entrada. ATRIBUTOS DE ENTRADA CAMPO DE TEXTO CAMPO DE CONTRASEÑA M2S1 ELABORADO POR CLAUDIA FLORES BOTON CASILLA DE VERIFICACION M2S1 ELABORADO POR CLAUDIA FLORES BOTON DE OPCION Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que ponemos como valor no aparece escrito en la página es un datos interno. Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que no ve el usuario, en este caso habría que incluir el atributo value para que el formulario pase ese valor al programa que recoge los datos del formulario. Para que el usuario envie un fichero suyo a través del formulario tenemos el tipo file, este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envie cualquier tipo de fichero nos podríamos encontrar con sorpresas no siempre agradables. AREAS DE TEXTO <TEXTAREA> A diferencia de la instrucción <INPUT>, <TEXTAREA> carece de la clausula VALUE Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Por ello, suelen utilizarse para que incluyan comentarios. Para insertar un área de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario. M2S1 ELABORADO POR CLAUDIA FLORES Para que el área de texto tenga algún valor inicial, habrá que insertarlo entre las etiquetas <textarea> y </textarea>. El atributo name indica el nombre del área de texto. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario, para poder identificarlos a la hora de procesarlos. El atributo rows indica el número de líneas que podrán ser visualizadas en el área de texto por lo que determina al alto del área de texto. El atributo cols indica el número de caracteres por línea que podrán ser visualizados en el área de texto por lo que determina al ancho del área de texto. Gracias a las barras de desplazamiento, es posible insertar más líneas de las especificadas en el atributo rows, y más caracteres por línea de los especificados en el atributo cols. Por ejemplo, para insertar el área de texto: Escribe el texto que quieras <textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que quieras</textarea> CAMPOS DE SELECCIÓN <SELECT> Los campos de selección se utilizan para insertar menús y listas desplegables. Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y </select> en un formulario. El atributo name indica el nombre del menú o lista será el nombre de la variable que contendrá el valor seleccionado. El atributo size indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo, determinael alto de la lista. La aparición del atributo multiple indica que el usuario podrá seleccionar varios elementos de la lista al mismo tiempo, ayudándose de la tecla Ctrl. Este atributo no toma valores. La aparición del atributo disabled indica que la lista estará desactivada, por lo que el usuario no podrá seleccionar sus elementos. Este atributo tampoco toma valores. M2S1 ELABORADO POR CLAUDIA FLORES Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>. El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo, se enviará el texto de la opción, que se encuentra entre las etiquetas <option> y </option>. La aparición del atributo selected indica que el elemento apareceráseleccionado. Este atributo no toma valores. Por ejemplo, para insertar el menú: --- Elige mascota --- Habría que escribir: <select name="mascota"> <option selected>--- Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select> Y para insertar la lista: ---Elige animales--Loro Perro Habría que escribir: <select name="animal" size="3" multiple> <option selected>---Elige animales---</option> <option value="ave">Loro</option> <option>Perro</option> <option>Gato</option> <option>Pez</option> </select> M2S1 ELABORADO POR CLAUDIA FLORES Nombre: ________________________________________________ Grupo:__________Fecha: ___________________ Calificación: __________________ ELABORO: LIC. Claudia Ivonne Flores Casas. Materia: Elaboración de Páginas Web PRACTICA de FORMULARIO Al final de tu investigación de la Evolución de la Especie ……….. Deberá contener un formulario como el siguiente: Instrucciones. 1. Lee las hojas de la sesión, proporcionadas por el instructor. 2. Realiza un resumen ó un mapa Conceptual, (no Mental). 3. Dibuja tu diseño de formulario (esta será independiente, es decir ira al final de tu página principal, enlazando la pagina con un link). 4. Realiza tu borrador para pasarlo al bloc de notas, la información se encuentra en las hojas proporcionadas por el instructor. 5. Te muestro algunos aspectos a considerar “preferencia”. M2S1 ELABORADO POR CLAUDIA FLORES <html> <head> <title>comentario por parte del profesor de bilogia</title> </head> <body> <p>Profesor, si desea recibir más informacion de mi Investigacion de la Evolucion de la Especie el ..........................., favoor de llenar este formulario, y de la brevedad posible le hare llegar, la informacion que usted requiere.</p> <FORM METHOD="GET" ACTION="mailto:[email protected]"> <p> Nombre:<INPUT TYPE=TEXT SIZE=20 MAXLENGTH=20 NAME="nombre"> Apellidos:<INPUT TYPE=TEXT SIZE=35 MAXLENGTH=35 NAME="Apellidos"><br> </p> <P> Direccion:<INPUT TYPE=TEXT SIZE=40 MAXLENGTH=40 NAME="Direccion"><br> </P> <P> Poblacion:<INPUT TYPE=TEXT SIZE=15 MAXLENGTH=15 NAME="Poblacion"> Codigo Postal:<INPUT TYPE=TEXT SIZE=5 MAXLENGTH=5 NAME="cp"> Provincia:<INPUT TYPE=TEXT SIZE=15 MAXLENGTH=15 NAME="Provinvia"><br> </P> <P> Materia:<INPUT TYPE=TEXT SIZE=15 MAXLENGTH=15 NAME="Materia"> Tema:<INPUT TYPE=TEXT SIZE=15 MAXLENGTH=15 NAME="Tema"><br> </p> <p> Telefono:<INPUT TYPE=TEXT SIZE=12 MAXLENGTH=12 NAME="Telefono"> E-Mail:<INPUT TYPE=TEXT SIZE=40 MAXLENGTH=40 NAME="email"><br> </P> <P>Para enriquecer mi proyecto de Investigacion de la Evolucion de la Especie de:................................. podria colocar en el formulario una descrpcion de lo que le hace falta a este trabajo</p> <p> Comentarios:<br> <TEXTAREA NAME="comentario" ROWS="7" COLS="50"> </TEXTAREA> </P> <P> O puede escribir tambien aqui, si necesita mas espacio: <input name="campo" type="text" value="Campo de texto" size="100" maxlength="100" ><br> </p> <p> Pofesor. le agradeceria mecho si elige una de las opciones de peso, para saber en que porcentaje de aprobacion o reprobacion me encuentro, con la investigacion que realize:</p> M2S1 ELABORADO POR CLAUDIA FLORES <p>Parametro de Evaluacion del proyecto:</p> <SELECT NAME="Parametro de Evaluacion del proyecto:"> <OPTION>REPROBADO (A) <OPTION>BIEN PAGINA 126.1 <OPTION>MUY BIEN <OPTION>EXCELENTE </SELECT> </P> <BR> <p> ó Parametro de Evaluacion del proyecto:</p> <SELECT NAME="Parametro de Evaluacion del proyecto:"> <OPTION>10 <OPTION>9 <OPTION>8 <OPTION>7 <OPTION>6 <OPTION>5 <OPTION>4 <OPTION>3 <OPTION>2 <OPTION>1 <OPTION>0 </SELECT> </P> <BR> <p>Le agradeceria mucho si, por favor me indica si debo de cursar otravez el curso de la materia o materias para repetir este proyecto, solo marque la opción que usted crea que debo de cursar:</p> <br> <INPUT TYPE="CHECKBOX" NAME"Elaboración de Paginas Web">Elaboración de Paginas Web <INPUT TYPE="CHECKBOX" NAME"Flash">Flash <INPUT TYPE="CHECKBOX" NAME"Corel">Corel <P> <INPUT TYPE=submit NAME="Enviar" VALUE="Enviar"> <INPUT TYPE=submit NAME="Borrar" VALUE="Borrar"> </P> </FORM> </BODY> </HTML> M2S1
