[13.1] introducción

Los formularios son un elemento presente en muchas páginas web cuya labor es la de recabar información del usuario. La función habitual de un formulario es enviar esa información a un servicio en la red para que la procese adecuadamente.

Por ejemplo podemos pedir al usuario su nombre y contraseña y enviar esa información a una página PHP, lenguaje que se interpreta directamente por el servidor que almacena esas páginas, el cual puede validar o no esos datos.

No siempre hay una tecnología del lado del servidor detrás, podemos también, a través de un formulario, indicar que el usuario elija el color de fondo de la página. La labor de recoger el color y modificar el fondo de la página lña puede hacer el propio navegador a través del lenguaje JavaScript.

Los formularios son fundamentales para las páginas web actuales, ya que es casi imprescindible obtener información del usuario para adaptar los contenidos a sus necesidades e intereses.

En HTML 5 se han mejorado muchísimo las posibilidades de los formularios. Una vez más, el problema es que hay características que no todos los navegadores soportan, solo los más modernos.

La página http://www.wufoo.com.mx/html5/ presenta una tabla (en inglés) muy interesante para saber, sobre cada nueva característica de los formularios HTML 5 qué navegadores la soportan (e incluso desde qué versión).

[13.2] funcionamiento de los formularios. métodos GET y POST

[13.2.1]funcionamiento de los formularios

Un formulario es un contenedor de controles que sirven para que el usuario introduzca datos. Un ejemplo de formulario se puede ver en la Ilustración 88.

Cada control posee un nombre al cual se le asigna un valor, el cual se corresponde con lo que el usuario introduce en el usuario.

Cuando se envían los datos del formulario (normalmente a través de un botón), se envían todos los nombres y valores de los controles del formulario. En el caso típico, un servicio de Internet recoge esta información y hace algo con ella.

Como se observa en la Ilustración 89, al enviar los datos del formulario, el servidor recibe pares de datos con cada valor asociado a cada nombre de control.

El servidor procesa estos datos, pero de forma opaca para el usuario. No se transmite el código que hace posible el proceso, sino el resultado del mismo.

Este manual no explica como procesar los datos en el lado del servidor, para ello habría que aprender lenguajes como PHP, ASP, JSP,…. todos ellos relacionados con tecnologías del lado del servidor.

Al usuario le llegará una respuesta, relacionada con los datos que se han procesado, normalmente en forma de página web.

Supongamos que tenemos este formulario:

<form action=”servicio.php”>

    <label for=”nombre”>Escriba su nombre</label><br>

    <input type=”text” id=”nombre” name=”nombre”><br>

    <label for=”apellidos”>Escriba sus apellidos</label><br>

    <input type=”text” id=”apellidos” name=”apellidos”><br>

    <label for=”sexo”>Escriba su sexo: </label><br>

    <input type=”radio” id=”hombre” name=”sexo” value=”hombre”>

    <label for=”hombre”>Hombre</label>

    <input type=”radio” id=”mujer” name=”sexo” value=”mujer”>

    <label for=”mujer”>Mujer</label><br><br>

    <button>Enviar</button>

</form>

Como veremos, la etiqueta form es la encarga de indicar el destino de los datos. En este caso es la página PHP: servicio.php, que deberá estar alojada en el mismo directorio que la página del formulario.

Hay cuatro controles (distinguibles por su atributo name): nombre, apellidos y sexo.

Al pulsar enviar se envía el valor Jorge para el control llamado nombre, Sánchez para apellidos y Hombre para sexo.

[13.2.2]métodos de paso de datos

52paso de datos mediante GET

En el ejemplo anterior, los datos se pasan mediante GET. GET es un comando del protocolo http que realiza una petición a un URL.

En este método los datos se pasan en la propia URL. Si el formulario se aloja en la dirección: http://jorgesanchez.net/practicas/formulario/ entonces cuando escribamos los datos de la Ilustración 90, se generará esta dirección en el navegador:

http://jorgesanchez.net/practicas/formulario/servicio.php
?nombre=Jorge&apellidos=S%C3%A1nchez&sexo=hombre

El apellido Sánchez se convierte en S%C3%A1nchez (debido a que las URL no pueden tener el carácter á). Dejando de lado la cuestión de la codificación, la forma de una URL que contiene datos procedentes de un formulario vía GET es:

http://urlpágina?var1=valor1&var2=valor2&.....

Es decir, se envían pares entre el nombre de la variable (en el formulario asignada a través del atributo name) y el valor que se le dio en el formulario. Cuando un control del formulario se queda sin valor, entonces el nombre del control se queda sin definir (el servidor no recibiría ningún dato con ese nombre).

La cuestión en el paso por GET es que los datos que se pasan aparecen en la propia URL; por lo que el paso de datos de un formulario mediante GET tiene estas connotaciones:

• La URL es visible, por lo que todo lo que el usuario ha escrito está a la vista en la URL. Y eso incluye las contraseñas y nombres de usuario que haya utilizado.
• Las páginas generadas con GET pueden añadirse como marcador o favorito a los navegadores y páginas de marcadores.

53paso de parámetros mediante POST

El paso por POST funciona exactamente igual, se siguen pasando los pares nombre, valor. Pero los datos se envían dentro del paquete de datos y no por la URL.

Parece más seguro el paso de parámetros por POST, pero lo cierto es que los datos que viajan mediante el método POST, lo hacen en la cabecera del paquete y esta cabecera es visible por cualquier persona que esté “escuchando” en la misma red que el cliente que está enviando datos.

Aunque es más difícil obtener los datos enviados vía POST, es posible hacerlo.

resumen final

GET tiene más mala prensa de POST, por decirlo de esta manera. Pero lo cierto es que el paso por POST no garantiza en absoluto la confidencialidad. GET tiene sus ventajas (podemos dejar guardada la página tras enviar los datos en los marcadores).

Al final, para el diseñador de la página web la realidad es que si creamos simplemente el formulario, deberemos saber qué exige el servicio que recibe los datos, si método GET o método POST. Hay que tener en cuenta que en un sitio web grande el front-end de la página (la parte visible para el usuario) lo puede realizar una persona distinta respecto a la que crea el back-end (la programación en el lado del servidor, invisible para el usuario).

[13.3] elemento form

[13.3.1]funcionamiento

Todo formulario HTML comienza con una etiqueta form, dentro de ella se colocan todos los controles del formulario. Un formulario por lo tanto es un elemento form, desde el punto de vista HTML, y dentro habrá diversos elementos que representarán a cada uno de los controles encargados de recabar y presentar los datos del usuario. La idea es por lo tanto esta:

<form action=”página/servicio” method=”GET o POST”>
     …
 </form>

Como se observa, hay dos atributos que se encargan de indicar a dónde y de qué forma enviar los datos recogidos del formulario. Eso se hace a través de los atributos action y method, se explican a continuación:

• action. Se trata de la URL de la página o servicio al que se enviarán los datos para su procesamiento. Si no queremos que el formulario envíe datos a otra página (por ejemplo, porque simplemente los queremos manejar internamente con JavaScript), se suele poner action=”#” .
• method. Puede ser GET o POST. Se relacionan con las dos formas de enviar datos del protocolo http. Se explica la diferencia al final de este capítulo.

  [13.3.2]otros atributos de form

[13.4] controles de tipo input

[13.4.1]elemento input

La mayoría de controles de un formulario se inserta mediante la etiqueta input. Posee un atributo llamado type para indicar el tipo de control deseado, por ejemplo input type=”text” se usa para añadir un cuadro de entrada de texto.

[13.4.2]atributos comunes del elemento input

Los atributos comunes de esta etiqueta (independientemente del tipo elegido) se explican a continuación:

<form action=”servicio.php” 

      method=”get”>
   <label for=”texto”>
Escribe el nº de serie (5 letras y tres números)
   </label>
   <input type=”text” 

pattern=”[A-Z]{5}[0-9]{3}” id=”gustos” name=”texto”/>
   <input type=”submit” value=”enviar”><br>
</form>

<form action=”servicio.php” 

      method=”get”>
    <label for=”texto”>
        Escribe el nº de serie 
    </label>
    <input type=”text” pattern=”[A-Z]{5}[0-9]{3}” id=”texto” name=”texto” 

        placeholder=”5 letras y tres números”>

    <input type=”submit” value=”enviar”><br>
</form>

[13.4.3]cuadros de texto

Los cuadros de texto usan el atributo type con valor text. Permiten recoger información escrita por el usuario. Su sintaxis básica es:

<input type=”text” name=”nombre” id=”identificador”>

Además podemos usar los atributos comunes a los elementos input comentados anteriormente.

El resultado de un código tipo input type=”text” es un cuadro en el que el usuario puede introducir texto. Ejemplo:

<form action=”servicio.php” method=”get”>
   <label for=”nombre”>Escriba su nombre</label>

   <input type=”text” name=”nombre” id=”nombre” 

		size=”8” maxlength=”20”>
</form>

Ese código da como resultado:

[13.4.4]cuadro de contraseñas

Funcionan como los cuadros de texto, solo que el texto que se introduce se oculta, mostrando solo puntos o asteriscos. Se usan, lógicamente, para introducir contraseñas. La sintaxis es:

<input type=”password” name=”nombre” id=”identificador”>

Usa los mismos atributos que los cuadros de texto. Si usamos método GET, la contraseña es visible en la parte superior del navegador. Con POST esto no ocurre, pero aun así podríamos averiguarla. Por ello lo ideal es pasar cifrada la contraseña a través, por ejemplo, del protocolo https.

[13.4.5]botones

Los botones son controles del formulario en los que no se puede escribir, sino que, simplemente, reciben un click de ratón o un golpe de dedo en un dispositivo táctil. Esa pulsación puede dar lugar a diversos efectos (la mayoría con ayuda de JavaScript). El más común de ellos: enviar los datos del formulario.

Hoy en día los botones se aconsejan utilizarles mediante el elemento button, que se explica más adelante. No obstante muchos diseñadores siguen utilizando esta forma (que por otro lado es más compatible con navegadores antiguos), por ello se explica en este manual

54botón de envío

Sirve para llevar a cabo la comunicación entre el formulario y la página que recoge sus datos. La sintaxis básica es:

<input type=”submit” value=”texto del botón” id=”identificador”>

En cuanto se pulsa este botón, los datos del resto de controles se envían a la página receptora del formulario (que se corresponde a la URL indicada en el apartado action de la etiqueta form).

1botón alternativo de tipo submit

Siempre ha sido posible colocar dos botones de tipo submit en el mismo formulario. Pero la cuestión es ¿para qué? ya que ambos harían lo mismo: enviar los datos al servicio indicado en el atributo action del elemento form.

Con la aparición de HTML 5 se ha dado un sentido más lógico a esto ya que podemos indicar servicios de destino distintos para cada botón submit. Eso se consigue con ayuda de estos nuevos atributos:

55botón de restablecer

La sintaxis de este botón es:

<input type=”reset” value=”texto del botón” id=”identificador”>

Este tipo de botones lo que hacen es anular los datos que se han introducidos en los controles del formulario. Deja todos los controles en su estado inicial.

56botón genérico

Un botón genérico se marca indicando type=”button” en la etiqueta type. En los formularios no se usa para enviar o configurar la información, sino que se utiliza normalmente para capturar su pulsación y lanzar una acción desde el lenguaje JavaScript.

57botón de imagen

Es equivalente al anterior, pero permite colocar un botón con una imagen en lugar de un texto. Este tipo de botón permite usar atributos que controlan las propiedades de la imagen en el botón:

• alt. Texto alternativo para la imagen
• src. URL de la imagen
• width. Anchura de la imagen
• height. Altura de la imagen

Hoy en día, prácticamente, no se usan estos botones.

[13.4.6]controles ocultos

Son controles que no se muestran al usuario y que se usan con la finalidad de hacer trucos. Por ejemplo para poder enviar datos de forma invisible a los servicios y páginas receptoras de los datos del formulario y así el usuario no vea esos datos. Otro es para poder enviar datos entre diferentes páginas web de forma que no se muestren dichos datos por pantalla, ya que sería muy poco estético.

Los controles de este tipo usan el valor hidden en el atributo type.

[13.4.7]botones de radio

Se trata de un control fácil de usar que permite elegir una de entre varias opciones. Todas las opciones deben de tener el mismo nombre y solo cambia el valor (y el identificador) de las mismas.

La razón de tener todos los controles el mismo valor es porque el servicio que recibe los datos, los debe recibir con el mismo nombre (debe almacenar los valores en el mismo, digamos sitio) ya que se refieren a la misma cosa. Cambian sus valores en función de la selección que hagamos.

Ejemplo:

<form action=”servicio.php” method=”get”>
    <p>Sexo:</p>
    <input type=”radio” name=”sexo” id=”hombre” 

				value=”h”>

		<label for=”hombre”>Hombre</label><br>
    <input type=”radio” name=”sexo” id=”mujer”

		value=”m” checked >

		<label for=”mujer”>Mujer</label> <br>
</form>

El resultado es:

En el ejemplo, los botones de radio tienen el mismo nombre (sexo), bajo ese nombre se enviarán los datos a la página servicio.php (indicada en el apartado action), los valores que se enviarán serán m si se elige mujer y h si se elige hombre. El atributo checked hace que el botón en el que se usa (el de la mujer), aparezca chequeado por defecto. Además los dos elementos label se relacionan con el botón correspondiente, de ese modo haciendo clic en el texto se activa el botón relacionado (prueba de que hemos asociado bien la etiqueta label al input correspondiente).

[13.4.8]casillas de verificación

Se usan igual que los botones de radio, pero en este caso están pensadas para ser independientes unas de otras. Es decir, no se pone el mismo nombre, como ocurría con los botones de radio, a dos casillas diferentes. Son por tanto valores del tipo activar/desactivar

La diferencia es que el tipo (type) usa el valor checkbox en lugar de radio. El atributo checked de los botones de radio se puede usar en las casillas de verificación con la misma finalidad: para que inicialmente la casilla aparezca pulsada. Ejemplo:

<form action=”servicio.php” method=”get”>
    <p>Descuentos:</p>

    <label for=”numerosa”>Familia Numerosa</label>       

    <input type=”checkbox” name=”numerosa” id=”numerosa” 

				value=”numerosa”><br>
    <label for=”pension”>Pensionista</label>       

    <input type=”checkbox” name=”pension” id=”pension” 

				value=”pension”><br>
    <label for=”ne”>Necesidades especiales</label>       

    <input type=”checkbox” name=”ne” id=”ne” 

				value=”ne”><br>
	<input type=”submit” value=”Enviar” >
 </form>

El resultado:

En este caso se ha diseñado un formulario completo, incluido el botón de enviar.

[13.4.9]cuadro de selección de archivo

Cuando se usa type=”file” en una etiqueta input, entonces aparece un botón que al pulsarle hace aparecer un cuadro de selección de archivos mediante el cual podremos elegir un archivo. La ruta local a dicho archivo es lo que se guarda para ser enviado al sitio o página que recibe los valores del formulario.

Ejemplo:

<form action=”servicio.php” method=”get”>
        Elija el archivo
    <input type=”file” name=”archivo”>
    <input type=”submit” value=”enviar”><br>
</form>

Resultado:

Al pulsar seleccionar archivo aparece un cuadro de selección de archivos, cuando elijamos el archivo su ruta será lo que se envíe con el formulario.

58atributos relacionados con los cuadros de archivo

[13.4.10]cuadros numéricos

Aparecen con type=”number”. Sirven para introducir números (decimales o no). Los navegadores que reconocen este tipo de control presentan un cuadro de texto con botones para subir y bajar el valor del número (el incremento o decremento que hacen depende del atributo step) y además no permiten enviar los datos (salvo que se use el atributo novalidate) si se intentan introducir datos no numéricos.

Hay una serie de atributos reservados a este tipo de cuadros:

[13.4.11]cuadros de fecha

Se usa con type=”date”. Permite seleccionar una fecha. Los navegadores que reconocen este tipo de control permiten pulsar en un botón que invoca a un calendario para elegir cómodamente la fecha. Ejemplo:

<form action=”recogida1.php” method=”get”>

     <label for=”fecha_nac”>Fecha de nacimiento</label>

     <input type=”date” name=”fecha_nac” id=”fecha_nac”>

</form>

El resultado en el navegador Chrome del cuadro de calendario, es este:

Es pues, un control muy visual y práctico.

Los cuadros de tipo date tienen los atributos min, max y step vistos en los cuadros numéricos.

[13.4.12]cuadro de selección de hora

Se usa con input type=”time”. Permite seleccionar una hora, minutos y segundos

[13.4.13]otros cuadros de selección de fechas

Aunque no funcionan en la mayoría de navegadores, son parte ya de html

• input type=”datetime”. Permite seleccionar fechas con hora
• input type=”month”. Selecciona meses y años
• input type=”week”. Selecciona el número de semana y el año de la misma.

  [13.4.14]cuadros deslizantes

Es el control llamado en inglés slider, aunque se usa con el atributo type=”range”. Presenta un control para elegir datos entre un rango. Los atributos max y min establecen el rango máximo y mínimo del control. El atributo step indica cuánto se mueve el control (si de uno en uno, de dos en dos,…). Ejemplo:

<form action=”recogida3.php” method=”get”>

     <label for=”rango”>Seleccione su edad</label>

     <input type=”range” name=”range” id=”range” 

     value=”25” min=”18” max=”65” step=”1”>

</form>

El resultado:

[13.4.15]otros controles

• input type=”email”. Permite indicar direcciones de correo electrónico
• input type=”url”. Permite indicar direcciones URL.
• input type=”search”. Presenta un cuadro de texto pensado para hacer búsquedas.
• input type=”tel”. Permite introducir números de teléfono.
• input type=”color”. Presenta un control de selección de colores. El color se toma en formato #xxxxxx donde cada x es una cifra hexadecimal. Es decir, el color se obtiene en el formato habitual de colores de HTML.

  [13.5] botones modernos

La recomendación de HTML 5 para los botones es utilizar el elemento button. La diferencia práctica está en el funcionamiento, esta etiqueta tiene apertura y cierre y el texto que aparece en el botón está contenido por elemento button; de esta forma se permite colocar código HTML en el texto del botón. Ejemplo:

<button>Hazme <strong>clic</strong></button>

Mostraría el botón:

Con la palabra clic en negrita. Podriamos perfectamente colocar imágenes metiendo un elemento img dentro del botón.

La única pega es que es una etiqueta más moderna y que no es soportada por algunos navegadores antiguos.

[13.5.1]atributos de la etiqueta button

Son los mismos que los de los botones de tipo input, salvo por algunos detalles (se recomienda ver los atributos del elemento input y de los botones de tipo submit):

[13.6] cuadros combinados

Un cuadro combinado permite el uso de una lista de opciones en la que se puede elegir la deseada. Todo cuadro comienza con una etiqueta select que es la encargada de dar nombre (name) al control. Dentro cada opción del cuadro se indica con una etiqueta option a la que se da valor mediante el atributo value. Dentro de la etiqueta option se coloca el texto que verá el usuario. Ejemplo:

<form action=”servicio.php” method=”get”>
    <label for=”provincia” id=”provincia”>

        Seleccione su provincia

    </label><br> 
   <select name=”provincia”>
       <option value=”av”>Ávila</option>
       <option value=”bu”>Burgos</option>
       <option value=”l”>León</option>
       <option value=”p”>Palencia</option>
       <option value=”sg”>Segovia</option>
       <option value=”so”>Soria</option>
       <option value=”sa”>Salamanza</option>
       <option value=”va”>Valladolid</option>
       <option value=”za”>Zamora</option>
   </select>

   <input type=”submit” value=”enviar”>
</form>

Resultado:

Se pueden agrupar opciones dentro del cuadro usando el elemento optgroup. Ejemplo:

<form action=”servicio.php” method=”get”>
    <label for=”provincia” id=”provincia”>

        Seleccione su provincia

    </label><br> 

   <select name=”provincia”>
        <optgroup label=”Cantabria”>
            <option value=”s”>Santander</option>
        </optgroup>
        <optgroup label=”Castilla y León”>
	     <option value=”av”>Ávila</option>
	     <option value=”bu”>Burgos</option>
           <option value=”l”>León</option>
           <option value=”p”>Palencia</option>
           <option value=”sg”>Segovia</option>
           <option value=”so”>Soria</option>
           <option value=”sa”>Salamanza</option>
           <option value=”va”>Valladolid</option>
           <option value=”za”>Zamora</option>
       </optgroup>
    </select>    

   <input type=”submit” value=”enviar”>
</form>

Da como resultado:

[13.6.1]atributos del elemento select

[13.6.2]atributos del elemento option

[13.7] cuadro de texto multilínea

La etiqueta textarea permite coloca un cuadro de texto de varias líneas para que el usuario puede introducir un texto largo. El atributo rows permite indicar la altura en líneas de texto del cuadro y el atributo cols, la anchura en caracteres (los demás atributos son como los de la etiqueta input type=”text”.

Ejemplo:

<form action=”servicio.php” method=”get”>
    Escribe un texto descriptivo: <br>
    <textarea rows=”10” cols=”40” name=”texto”></textarea><br>
    <input type=”submit” value=”enviar”><br>
</form>

Resultado:

Entre la etiqueta textarea se puede colocar texto que aparecerá inicialmente dentro del cuadro.

[13.7.1]atributos del elemento textarea

[13.8] agrupación de controles, fieldset

La etiqueta fieldset permite agrupar controles para que visualmente sea más cómodo el relleno de los controles. Visualmente los controles aparecerán recuadrados y se suele utilizar una etiqueta inmediatamente interior a fieldset que es legend que contiene el texto que encabezará al grupo de controles.

Ejemplo:

<form action=”control_form.php” method=”get”>

   <fieldset >
       <legend>Datos personales</legend>

       <input type=”radio” name=”sexo” value=”hombre” 

				id=”hombre”>

	 <label for=”hombre”> Hombre</label><br>
       <input type=”radio” name=”sexo” value=”mujer”  

				id=”mujer” checked=”checked”>

	 <label for=”mujer”> Mujer</label><br>

       <label for=”estadocivil”>

			Estado civil: Casado</label> 

	 <input type=”checkbox” name=”estadocivil” 

				id=”estadocivil” value=”casado” 

				checked=”checked”>
       <br>

   </fieldset>

   <input type=”submit” value=”Enviar” >
</form>

El resultado:

[13.9] etiquetado de controles

En todos los ejemplos de código de este capítulo ya se ha usado el elemento de etiquetado label. Su labor es colocar una etiqueta explicativa a cada control.

Los elementos label utilizan un atributo for que sirve para asociar la etiqueta (que es el texto que aparece en pantalla acompañando al control) al control concreto. El valor de for se corresponde con el valor indicado en el atributo id del control.

Esto permite una mejor usabilidad (los navegadores reconocen label y, por ejemplo, al hacer clic en el texto de la etiqueta, el control asociado recibe el foco) y una mejor semántica del código.

Ejemplo para etiquetar un control de tipo textarea:

<form action=”control_form.php” method=”get”>

   <label for=”texto”>Escribe un texto descriptivo:</label>

   <textarea rows=”10” cols=”40” name=”texto” ></textarea><br>
   <input type=”submit” value=”enviar”><br>
</form>

[13.10] datalist

Se trata de un elemento HTML 5 muy potente. Permite añadir entradas a un control de cuadro de texto (y también a cuadros especializados como los de email, url,….). La forma de utilizarlo consiste en usar el atributo HTML5 list existente en la etiqueta input. Ese atributo asociará el cuadro de texto a la lista de valores a través del identificador del datalist. Luego dentro de datalist se colocan etiquetas option para cada opción en la lista (al estilo de los cuadros de tipo select).

Ejemplo:

<form action=”recogida.php” method=”get”>
   <label for=”gustos”>
       Escribe en qué te gusta pasar tu tiempo de ocio
   </label>
   <input type=”text” id=”gustos” name=”gustos” 

			list=”listaGustos” >

   <datalist id=”listaGustos”>

       <option label=”deportes” value=”Deportes” >
       <option label=”teatro” value=”Teatro”>
       <option label=”cine” value=”Cine”>
       <option label=”leer” value=”Leer”>
   </datalist>
   <input type=”submit” value=”enviar”><br>
</form>

No aparece un cuadro combinado, será un cuadro de texto en el que al arrimar el ratón aparecen las entradas indicadas (como sugerencias de escritura), pero podremos escribir lo que queramos (sin elegir ninguna opción de la lista).

El código anterior permitiría esta situación:

El usuario puede elegir cualquiera de las opciones de la lista de sugerencias, pero también puede escribir lo que quiera en el cuadro.

Sin embargo esta forma no funciona en algunos navegadores (solo en los modernos y Safari no ha incorporado esta etiqueta), por ello se suele usar un truco que consiste en meter un elemento select dentro del elemento
datalist. Los navegadores modernos ignorarán la etiqueta select y los viejos el datalist.

<form action=”recogida.php” method=”get”>
   <label for=”gustos”>
       Escribe en qué te gusta pasar tu tiempo de ocio
   </label>
   <datalist id=”listaGustos”>

       <select name=”listaGustos”>

           <option value=”deportes”>Deportes</option>
           <option value=”teatro”>Teatro</option>
           <option value=”cine”>Cine</option>
           <option value=”leer”>Leer</option>

		</select>

   </datalist>
   

	<input id=”gustos” name=”gustos” list=”listaGustos”>
   <input type=”submit” value=”enviar”><br>
</form>

[13.11] controles avanzados

[13.11.1]cuadro de tipo keygen

Es una nueva etiqueta de formulario nacida en HTML 5 que permite enviar claves de cifrado de datos. El elemento genera una lista en la que podemos elegir el tipo de cifrado. Al enviar los datos se generan las dos claves: la pública y la privada, el ordenador local guarda la clave privada y el remoto la pública.

Es una opción para poder cifrar los datos del formulario a fin de autentificar la autenticidad del cliente. Ni Internet Explorer ni Safari son compatibles con este elemento, lo que limita su uso. Hoy en día es más fiable enviar los datos de los formularios usando el protocolo https.

La lista de atributos de keygen es:

[13.11.2]control de tipo output

La etiqueta output (no disponible en Internet Explorer ni en Safari) se utiliza para mostrar resultados procedentes de cálculos sobre otros controles del formulario. El ejemplo siguiente consigue mostrar la suma de los dos números que el usuario indique en sendos cuadros numéricos, esta suma se muestra rápidamente gracias al lenguaje JavaScript:

<form oninput=”res.value=parseInt(n1.value)+parseInt(n1.value)”>

    <input type=”number” id=”n1” name=”n1” value=”0”>

    +<input type=”number” id=”n2” name=”n2” value=”0”>

    =<output name=”total” for=”n1 n2” id=”total”></output>

</form>

Resultado del código:

El atributo for, especifica el nombre de los controles que afectan al resultado de output; en ese atributo cada identificador se separa con espacios.

El valor y el nombre de los elementos output no se envían como los demás datos del formulario, solo sirve para ver el resultado en el página. No es obligatorio su uso, pero da un sentido claro a la función del contenido.

[13.11.3]barras de resultados

59barras de medida, elemento meter

Se trata de un tipo de barra que sirven para indicar de forma gráfica un determinado valor fracción o parte de algo. El elemento meter, que no funciona en Internet Explorer, es el que permite este uso.

Atributos:

Ejemplo:

<meter value=”138” min=”1” max=”200” 

high=”150” low=”60” >138</meter>

Resultado:

Solo mediante JavaScript se obtiene realmente partido de este control (al poder variar y capturar sus valores de forma dinámica). En todo caso, es una forma muy gráfica de presentar ciertos datos.

60barra de progreso, elemento progress

La idea es la misma que en el caso anterior, pero ahora se usa para mostrar información sobre el grado de cumplimiento de una determinada tarea. Esta barra es más sencilla de configurar. Usa estos atributos:

Ejemplo de barra tipo progress:

<progress max=”200” value=”35”>35%</progress>

Resultado: