TEMA 8 FORMULARIOS

Crear un formulario en HTML implica construir los campos de información, estos pueden ser: campos de texto, de número, selectores, desplegables, casillas de verificación y entre otras más.

Como ya es sabido en html se emplean etiquetas para crear los diversos elementos existentes, y el caso de los formularios no es la excepción, para crear los componentes del formulario HTML también haremos uso de una variedad de etiquetas y atributos, los mismos que conoceremos a continuación.

Etiqueta <form>

Utilizaremos la etiqueta para indicar al navegador que el elemento será un formulario. se emplea para cualquier tipo de formulario HTML, ya sea uno de contacto, suscripción, registro, login, encuesta, etc.

<form>
…Aquí irán los campos del formulario...
</form>

Existen varios tipos campos para formularios HTML y también debemos especificar qué tipo de campo es un elemento del formulario, para ello aprenderemos a utilizar el atributo TYPE a continuación.
El atributo type va dentro de la etiqueta y su valor indicará que tipo de campo se está creando. Veamos algunos valores que puede tomar el atributo type en un formulario HTML:

• Text: para campos de texto
• Password: para campos de contraseña
• Checkbox: para casillas de verificación
• Radio: para casillas de selección
• Submit: para botones de envío
• Reset: para botones de resetear
• File: para campos de selección de archivo
• Button: para definir otro botón cualquiera, con otra funcionalidad. Esta última opción no es demasiado útil de momento, si no se combina con lenguajes de cliente como Javascript.
• Hidden: sirve para definir campos ocultos, que almacenan información junto con el formulario pero no la muestran al usuario. Aparentemente no tienen utilidad, pero combinado con lenguajes de servidor como PHP, pueden ser de mucha ayuda.

A partir de HTML 5 se añadieron otros tipos (types) válidos que permitían definir controles específicos. Podemos destacar los siguientes:

• Email: para cuadros de texto donde se requiera introducir una dirección de correo electrónico
• Number: para cuadros que exijan un dato numérico (real o entero)
• date, time o datetime: para cuadros que exijan poner una fecha, hora o fecha y hora conjunta, respectivamente
• Color: para controles que permiten elegir un color de una paleta de colores
• Search: para cuadros de búsqueda. En algunos navegadores se habilita estos controles con un aspa para borrar el contenido del cuadro.
• Url: para introducir direcciones de internet.
• Range: para controles de tipo slider, con una barra que podemos mover entre unos límites. Aunque, desafortunadamente, no se muestra ninguna información visual del valor actualmente seleccionado (se debería utilizar algo de código JavaScript y elementos adicionales para poder ver este valor)

Una vez elegido el tipo de control, la etiqueta input tiene otra serie de atributos que debemos tener en cuenta (muchos de estos atributos también están presentes en otros tipos de controles):

• Name: sirve para dar un nombre identificativo al control. Nos será muy útil para identificarlo luego en los lenguajes de cliente o de servidor (JavaScript, PHP…). Por ejemplo todos los botones de radio que queramos agrupar en funcionalidad, deben tener la misma etiqueta name.
• Id: el identificador del control, al igual que podemos usar este atributo en otras etiquetas HTML. Se utiliza en CSS, y también para algunas cosas con JavaScript. A menudo se utiliza junto a name, dando a los dos el mismo nombre o valor.
• Value: sirve para dar un valor inicial con el que rellenar el control (hasta que el usuario se lo cambie)
• Size: sirve para indicar el tamaño del control (en caracteres si es un cuadro de texto, o en píxeles para el resto)
• Maxlength: sirve para indicar el máximo número de caracteres que puede aceptar el control (en el caso de cuadros de texto).
• Checked: sirve para indicar, si es un checkbox o botón de radio, que está marcado. Es un valor de verdadero o falso, por lo que, si no se pone, asumimos que el control no está marcado, y si se pone sí lo está
• Disabled: sirve para deshabilitar un control, y que el usuario no pueda modificar su valor. Se usa sobre todo para dar información al usuario, pero sin que éste la pueda modificar. Es un valor de verdadero o falso, como el anterior, y se utiliza de la misma forma. Si un campo está disabled no se envía cuando se envía el formulario.
• Readonly: similar al anterior, sirve para que un control sea de sólo lectura y el usuario no pueda modificar su valor. A diferencia del anterior, el contenido sí se envía con el resto del formulario.
• Placeholder: muestra un texto informativo dentro del cuadro de texto, que normalmente indica al usuario el tipo de información que debe introducir en dicho cuadro.

En el siguiente ejemplo crearemos un formulario empleando los diversos tipos de campo que aprendimos anteriormente y para organizar y diferenciar mejor cada campo, emplearemos la etiqueta de salto de linea, veamos:

Si observas el anterior ejemplo te darás cuenta de que todos los campos están construidos con la etiqueta html . Pero existen otros campos que no utilizan , sino etiquetas específicas como la etiqueta y </p>

Veamos otro ejemplo: el siguiente formulario muestra un cuadro de texto para poner nuestro nombre, otro que admite hasta 50 caracteres para un e-mail, una casilla de verificación para ver si el usuario está casado, dos botones de radio para elegir su idioma preferido, y un botón para enviar el formulario.

Observa algunas cosas interesantes, como que los controles de tipo radio comparten el mismo name (para que al pulsar uno se suelten los demás), y que tienen un value que no se muestra en el formulario realmente, y cuya utilidad escapa al alcance de este tema.

Además de poder definir botones con la etiqueta input, también podemos emplear la etiqueta button como alternativa. Tiene, igualmente, un atributo type que indica el tipo de botón que queremos crear (submit, reset o button normal). Así, estas dos opciones son equivalentes (aunque, si observamos, la etiqueta button no es una etiqueta vacía, y el texto del botón se especifica en su contenido):

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

Etiqueta label

Con la etiqueta label podemos definir controles de tipo etiqueta, es decir, controles que sirven para dar información sobre otros controles. En realidad, en el ejemplo anterior, no deberíamos haber usado párrafos para indicar que el primer cuadro de texto es para escribir el e-mail, o que los botones de radio son para elegir el idioma preferido. Para eso están las etiquetas. La etiqueta label tiene un atributo for, que sirve para indicar el control al que está asociado (a través del atributo id de dicho control) para que, al hacer clic en la etiqueta, se acceda directamente al control. Además, el uso de etiquetas facilita la lectura de formularios por parte de lectores de pantalla, por lo que su uso es todavía más recomendable en términos de accesibilidad.

Así, el formulario anterior se podría haber definido así:

<form action="mipagina.php" method="post">
    <label for="nombre">Introduce tu nombre:</label>
    <br>
    <input type="text" name="nombre" id="nombre" size="20">
    <br>

    <label for="email">Introduce tu e-mail:</label>
    <br>
    <input type="email" name="email" id="email" size="20" maxlength="50">
    <br>

    <input type="checkbox" name="casado" id="casado">
    <label for="casado">Casado</label>
    <br>

    <label>Elige tu idioma preferido:</label>
    <br>
    <input type="radio" name="idioma" id="ingles" value="ingles" checked>
    <label for="ingles">Inglés</label>
    <br>
    <input type="radio" name="idioma" id="frances" value="frances">
    <label for="frances">Francés</label>
    <br>

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

Alternativamente, podemos hacer que la etiqueta englobe el control al que va a asociada. De este modo podemos omitir el atributo for, porque ya se sabe a qué control va asociada

<label>
    Introduce tu nombre:
    <input type="text" name="nombre" id="nombre" size="20">
</label>

Otra de las ventajas que tiene usar etiquetas es que, en controles como los checkboxes o los botones de radio, ampliamos el área en que podemos hacer clic para seleccionarlos, ya que también podemos hacer clic en la etiqueta asociada al control (cosa que no se podría hacer si usáramos simples párrafos).

Áreas de texto

Para introducir texto que ocupe más de una línea, no nos sirve la etiqueta input con su atributo type=”text”. En su lugar, debemos usar la pareja de etiquetas textarea. Esta etiqueta tiene tres atributos:

• name para ponerle un nombre al control, al igual que hacíamos con input
• rows para indicar cuántas filas de texto va a haber
• cols para indicar cuántas columnas de texto va a haber

Si luego se ocuparan más filas o columnas que las que indiquemos, aparecerá una barra de desplazamiento para poder ver el resto del texto escrito en el área de texto.

Aquí tenemos un ejemplo de uso:

<textarea name="noticia" rows="5" cols="20">
Texto de la noticia
</textarea>

Listas

Podemos definir dos tipos de listas para elegir opciones en un formulario: listas fijas (ocupan una altura determinada y dejan visibles X elementos, aunque pueden tener más y verlos mediante barras de desplazamiento) y listas desplegables (sólo es visible un elemento, y los demás se muestran desplegando la lista). Ambas se crean con la etiqueta select, que admite los siguientes atributos:

• name: para darle un nombre al control, al igual que en controles anteriores
• size: para indicar el número de filas visibles. Si no usamos este atributo, o ponemos un valor de 1, crearemos una lista desplegable. Si vale más de 1, será una lista fija con el número de filas visibles que hayamos establecido aquí. En este caso, podemos utilizar un atributo llamado multiple (sin valor) que permite seleccionar varios elementos.

Internamente, la etiqueta select tiene una serie de etiquetas option, una para cada elemento que queramos añadir a la lista. Estos elementos tienen un atributo value para indicar su valor (que puede ser diferente del que luego se mostrará). Además, para indicar si hay algún elemento preseleccionado de antemano, marcaremos ese elemento con el atributo selected.

Veamos aquí un ejemplo y cómo se vería:

Elemento fieldset

El elemento fieldset (grupo de campos) permite organizar en grupos los campos de un formulario. y (ambas obligatorias) forman un elemento en bloque

Si queremos utilizar un grupo de radio-buttons lo haremos de la misma forma que el ejemplo
anterior. El detalle a tener en cuenta es que, si el nombre de los elementos es el mismo, solo dejara
seleccionar una de las opciones, si el nombre es distinto en cada una de ellas, se podrán seleccionar cuantas opciones se deseen.

Desplegable con opciones

Ahora aprenderemos a realizar desplegables en formularios, seguramente viste esos campos
en las que existe un desplegable con varias opciones dentro para seleccionar una de ellas, a
continuación veremos cómo hacerlo.

Etiqueta <select>

Utilizaremos la etiqueta <select> para crear un campo desplegable, este tipo de campos en HTML permiten seleccionar una opción del desplegable y además son muy útiles en esas ocasiones en las que buscamos buena presentación de espacio en el formulario

Etiqueta <option>

Utilizaremos la etiqueta <option> dentro de la etiqueta . contiene una opción del desplegable y podemos implementar la cantidad de opciones que deseemos.

El siguiente ejemplo trata de un desplegable con 5 opciones de colores para elegir, veamos:

Por defecto estará seleccionada la primera opción, además es necesario pasar el cursor y clic para
desplegar las opciones, una vez seleccionada la opción, esta regresa a su estado inicial pero con la opción seleccionada

Atributos para la etiqueta <select> en formularios

Atributo size.- Utiliza el atributo size para determinar la cantidad de opciones a mostrar y su valor en números.
Atributo multiple.- Utiliza el atributo multiple con valor también multiple para permitir que el desplegable sea de múltiple selección de tal manera que permita seleccionar varias opciones.
Etiqueta <textarea>.- Se utilizará para crear un área de texto de varias líneas,<br /> puede servirnos por ejemplo para un capo de mensaje.</p>

Atributo action

El valor del atributo “action” será la URL de la página que queremos que cargue después de que
se envíe la información (por ejemplo, la llamada al script que envía el formulario) de un formulario. Este atributo va dentro de la etiqueta <form> y lo podemos utilizar si deseamos.

Atributo method

El atributo “method” puede tomar como valores a GET o POST y esto indica el método http que será utilizado cuando se envíe la información. SIEMPRE se debe utilizar el método POST ya que GET muestra los datos enviados en la url de la página.

<form action="URL" method="get">
<form action="URL" method="post">

Atributo name

Utiliza el atributo “name” para ponerle un nombre al formulario. También, para que el formulario funcione correctamente, utilizaremos el atributo “name” para cada campo del formulario, así será posible recibir correctamente los datos enviados.

Atributo placeholder

Es una etiqueta de texto colocada dentro de un campo de un formulario. La traducción es
«marcador de posición», pero es uno de esos términos tecnológicos que se suele usar en inglés. Los “placeholders” se usan sobre todo para informar al usuario de qué debe escribir en un campo de un formulario.

<input type=”text” placeholder=” Introduce aquí tu nombre”>