El formulario es una interesante herramienta de toda página web. Permite recabar información ordenada de los visitantes, y almacenar esa información de alguna manera. El lenguaje HTML solo tiene el objetivo de crear el formulario. El HTML no tiene la responsabilidad de registrar los datos en el servidor, esta actividad está delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net, JSP, NodeJS etc.)
Los formularios están dentro de las etiquetas <form> y </form>. Los atributos de la etiqueta de apertura del formulario indicarán la forma de enviar la información:
Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier texto:
Siendo el código:
El atributo type diferencia a cada uno de los diez controles que se pueden crear con la etiqueta <input> . Para los cuadros de texto, su valor es text . El atributo name es el más importante en los campos del formulario. De hecho, si un campo no incluye el atributo name , sus datos no se envían al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de formulario.
Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los datos a una aplicación del servidor para que procese la información y genera una respuesta adecuada. En el servidor, la aplicación que procesa los datos debe obtener en primer lugar toda la información introducida por el usuario. Para ello, utiliza el valor del atributo name para obtener los datos de cada control del formulario.
El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea un formulario para insertar datos, los cuadros de texto deberían estar vacíos. Por lo tanto, o no se añade el atributo value o se incluye con un valor vacío value="" . Si por el contrario se crea un formulario para modificar datos, lo lógico es que se muestren inicialmente los datos guardados en el sistema. En este caso, el atributo value incluirá el valor que se desea mostrar: <input type="text" name="nombre" value="Juan Pérez" />
Si no se especifica un tamaño, el navegador muestra el cuadro de texto con un tamaño predeterminado. El atributo size permite establecer el tamaño, en caracteres, con el que se muestra el cuadro de texto. Su uso es imprescindible en muchos formularios, en los que algunos campos como la dirección deben mostrar más caracteres de lo normal (<input size="100" ...) y otros campos como el código postal deben mostrar menos caracteres de lo normal (<input size="5"... ).
Además de controlar el tamaño con el que se muestra un cuadro de texto, también se puede limitar el tamaño del texto introducido. El atributo maxlength permite establecer el máximo número de caracteres que el usuario puede introducir en un cuadro de texto. Su uso es imprescindible para campos como el código postal, el número de la Seguridad Social y cualquier otro dato con formato predefinido y limitado.
Por último, el atributo readonly permite que el usuario pueda ver los contenidos del cuadro de texto pero no pueda modificarlos y el atributo disabled deshabilita un cuadro de texto de forma que el usuario no pueda modificarlo y además, el navegador no envía sus datos al servidor.
<input type="password" name="contrasena" value="" />
Cambiando el valor del atributo type por password se transforma el cuadro de texto normal en un cuadro de contraseña. Todos los demás atributos se utilizan de la misma forma y tienen el mismo significado.
13.2. Checkbox
Los checkbox o "casillas de verificación" son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes.
Veamos un ejemplo:
Siendo el código:
El valor del atributo type para estos controles de formulario es checkbox . Como se muestra en el ejemplo anterior, el texto que se encuentra al lado de cada checkbox no se puede establecer mediante ningún atributo, por lo que es necesario añadirlo manualmente fuera del control del formulario. Si no se añade un texto al lado de la etiqueta <input /> del checkbox , el usuario sólo ve un pequeño cuadrado sin ninguna información relativa a la finalidad de ese checkbox .
El valor del atributo value , junto con el valor del atributo name , es la información que llega al servidor cuando el usuario envía el formulario.
Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo checked. Si el valor del atributo es checked, el checkbox se muestra seleccionado. En cualquier otro caso, el checkbox permanece sin seleccionar.
Los controles de tipo radiobutton son similares a los controles de tipo checkbox , pero presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se deselecciona la otra opción que estaba seleccionaba.
Veamos un ejemplo:
Siendo el código:
El valor del atributo type para estos controles de formulario es radio . El atributo name se emplea para indicar los radiobutton que están relacionados. Por lo tanto, cuando varios radiobutton tienen el mismo valor en su atributo name , el navegador sabe que están relacionados y puede deseleccionar una opción del grupo de radiobutton cuando se seleccione otra opción.
La mayoría de formularios dispone de un botón para enviar al servidor los datos introducidos por el usuario:
Ejemplo de etiqueta input (type=submit)
< input type = "submit" name = "buscar" value = "Buscar" / >El valor del atributo type para este control de formulario es submit . El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se establece el atributo value , el navegador muestra el texto predefinido “ Enviar consulta” .
Se trata de un botón especial que borra todos los datos introducidos por el usuario y devuelve el formulario a su estado original:
Ejemplo de etiqueta input (type=reset)
El valor del atributo type para este control de formulario es reset . Cuando el usuario pulsa este botón, el navegador borra toda la información introducida y muestra el formulario en su estado original. Si el formulario no contenía originalmente ningún valor, el botón de reset lo vuelve a mostrar vacío. Si el formulario contenía información, el botón reset vuelve a mostrar la misma información original.
Como es habitual en los botones de formulario, el atributo value permite establecer el texto que muestra el botón. Si no es utiliza este atributo, el navegador muestra el texto predefinido del botón, que en este caso es Restablecer .
Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número, tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden restricciones por motivos de seguridad.
Ejemplo de etiqueta input (type=file)
El valor del atributo type para este control de formulario es file . El navegador se encarga de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botón que permite navegar por los directorios y archivos del ordenador del usuario.
Si se incluye un control para adjuntar archivos, es obligatorio añadir el atributo enctype en la etiqueta <form> del formulario. El valor del atributo enctype debe ser multipart/form-data , por lo que la etiqueta <form> de los formularios que permiten adjuntar archivos siempre es:
Algunos formularios complejos necesitan botones más avanzados que los de enviar datos ( type="submit" ) y resetear el formulario ( type="reset" ). Por ese motivo, el estándar HTML/XHTML define un botón de tipo genérico:
Ejemplo de etiqueta input (type=button)
< input type = "button" name = "guardar" value = "Guardar Cambios" / >El valor del atributo type para este control de formulario es button . Si pruebas a pulsar un botón de este tipo, verás que el navegador no hace nada: no envía los datos al servidor y no borra los datos introducidos.
Es una variante del cuadro de selección y permite que el visitante del sitio pueda seleccionar varias opciones. Supongamos que tenemos un cuadro de selección con una lista de colores y queremos que el visitante pueda elegir varios y no uno solo.
El código sería:
Y el resultado:
Podemos observar la sintaxis para la definición de un cuadro de selección múltiple:
<select name="colores[ ]" size="4" multiple>
Definimos una propiedad llamada multiple y no le asignamos valor, por otro lado al nombre definido en la propiedad name le agregamos al final los caracteres [ ] para que desde el servidor podamos identificar que el control retorna posiblemente muchos valores. Es también común inicializar la propiedad size con un valor mayor a 1 para que sea más fácil la selección.
Hemos visto que podemos crear cuadros de selección individual o de selección múltiple. Ahora veamos que podemos agrupar las opciones que tiene el cuadro de selección, esto tiene sentido si el cuadro de selección tiene muchos items . Se cuenta con un nuevo elemento llamado optgroup que agrupa un conjunto de elementos option .
Veamos un ejemplo de agrupar una serie de opciones:
y el resultado:
Como podemos observar para agrupar una serie de opciones dentro de un select debemos encerrarlas con el elemento optgroup :
<optgroup label="Frutas">
<option value="1">Naranjas</option>
<option value="2">Manzanas</option>
<option value="3>Sandia</option>
<option value="4">Frutilla</option>
<option value="5">Durazno</option>
<option value="6">Ciruela</option>
</optgroup>
La propiedad label del elemento optgroup aparece dentro del control select pero no se puede seleccionar, es un título. La propiedad label del elemento optgroup es el texto que se debe mostrar dentro del select . Se puede hacer agrupamiento de opciones y permitir selecciones múltiples.
El HTML dispone de un elemento llamado fieldset que solo tiene el objetivo de recuadrar y agrupar un conjunto de controles de un formulario.
Debemos encerrar todos los controles a agrupar entre las marcas <fieldset> y </fieldset>. Además para agregar un título a este recuadro debemos agregar otro elemento HTML llamado legend .
Confeccionemos un formulario que solicite los datos personales de una persona y los datos del lugar donde trabaja, cada grupo de datos los dispondremos en un fieldset :
Siendo el resultado:
Podemos ver que cada grupo de controles está encerrado con el elemento fieldset :
<fieldset>
<legend>Datos personales</legend>
Apellido y nombre:
<input type="text" name="nombre" size="30"><br>
Documento de identidad:
<input type="text" name="dni" size="8"><br>
Fecha de nacimiento:
<input type="text" name="fechanacimiento" size="12"><br>
Dirección:
<input type="text" name="direccionpersona" size="30"><br>
</fieldset>
Luego el título de cada fieldset lo disponemos con:
<legend>Datos personales</legend>
Ejercicio 14. Formularios 1.
Realiza un formulario tal como se muestra en la siguiente imagen:
Para ver la solución del ejercicio 14, escribe el código que te facilitará el profesor:
Contraseña:
Ejercicio 15. Formularios 2.
Realiza un formulario tal como se muestra en la siguiente imagen:
Para ver la solución del ejercicio 15, escribe el código que te facilitará el profesor:
Contraseña: