FORMULARIOS EN HTML Tomado de: http://www.aulaclic.es/html/t_8_1.htm Un formulario es un elemento que permite recoger datos introducidos por el usuario. Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones. Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario, la etiqueta <form> tiene los siguientes atributos: El atributo action 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. El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded. El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post. El valor get 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. El valor post 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> ATRIBUTOS COMUNES El atributo type. Varios controles comparten la etiqueta input. En estos casos, el valor atributo type distingue si se trata de un formulario de texto, de opción, etc. El atributo name. Con este atributo asignamos un nombre al control. Es importante, porque al recoger los datos, podremos hacerlo a través del nombre. Además, los controles sin nombre no envían sus datos. El atributo value. En controles como líneas de texto, establece el valor inicial, por lo que el usuario lo puede cambiar. En otros, como botones, establece el texto que se muestra. En controles de opción, el atributo determina el valor de cada opción. El atributo disabled. Permite deshabilitar un control, impidiendo que el usuario interactúe con él. Se utiliza con el valor disabled (disabled="disabled"). El atributo readonly. Hace que al control sea de sólo lectura, es decir, que no se pueda cambiar su valor. Se utiliza con el valor readonly (readonly="readonly"). No afecta a todos los controles, como a la casilla de verificación, ya que al pulsarla no cambiamos su valor. Para simular el efecto en controles de este tipo, podemos utilizar este sencillo JavaScript onclick="return false;". Los atributos tabindex y accesskey. Estos atributos dan accesibilidad a nuestro formulario. Tabindex determina el orden de tabulación, es decir, qué control será el siguiente en tomar el foco si pulsamos la tecla Tab. Por defecto, el orden de tabulación será el orden de aparición de los controles. El valor debe de ser un número. El atributo accesskey, toma como valor una tecla (una letra), hace que podamos dar el foco al control con una combinación de teclas. En Internet Explorer, con la combinación Alt + tecla, y en Firefox, con Alt + Shift + tecla. CONTROLES CONTROL TEXTAREA DESCRIPCIÓN name: indica el nombre del área de texto. 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. 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. CAMPO DE Para insertar un campo de texto, el atributo type debe tener el valor TEXTO text. size indica el número de caracteres que podrán ser visualizados en el campo de texto, determina el ancho de la caja. maxlenght indica el número de caracteres que podrán ser insertados en el campo de texto. value indica el valor inicial del campo de texto. CAMPO DE Para insertar un campo de contraseña, el atributo type debe tener el CONTRASEÑA valor password. EJEMPLO <textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que quieras</textarea> <input name="campo" type="text" value="Campo de texto" size="20" maxlength="15"> <input name="contra" type="password" value="contraseña" size="20" maxlength="15"> BOTÓN Para insertar un botón, el atributo type debe tener el valor submit, <input name="boton" restore o button. type="submit" value="Enviar"> Si el valor es submit, al pulsar sobre el botón se enviará el formulario. Si el valor es restore, al pulsar sobre el botón se restablecerá el formulario, borrándose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial. Si el valor es button, al pulsar sobre el botón no se realizará ninguna acción. El atributo value indica el texto que mostrará el botón. CASILLA DE Para insertar una casilla de verificación, el atributo type debe tener el <input name="casilla" VERIFICACIÓN valor checkbox. type="checkbox" value="acepto" El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma valores. RADIO Para insertar un botón de opción, el atributo type debe tener el valor radio. El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Este atributo no toma valores. LISTA Para insertar uno de estos menús o listas es necesario insertar las DESPLEGABLE etiquetas <select> y </select> en un formulario. Campos de El atributo name indica el nombre del menú o lista será el nombre de la selección variable que contendrá el valor seleccionado. <select> ... El atributo size indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo, determina el alto de la lista. 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. AGRUPAR Estos controles, pueden estar agrupados dentro de CONTROLES <fieldset></fieldset>. Esta etiqueta sirve para que agrupemos controles relacionados en formularios extensos. Además, nos permite mostrar una leyenda, si incluimos la etiqueta <legend>. checked> <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar"> <select name="mascota"> <option selected>--Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select> <fieldset> <legend>Datos personales</legend> ... Controles para recoger los datos personales ... </fieldset>