Completando los formularios

En la página dedicada a la introducción a los formularios se usabann los argumentos básicos de un formulario: method y action. Pero este elemento es un componente de la página complejo: es un contenedor de campos de datos. Como cualquier otro elemento acepta los atributos globales de HTML y además posee una serie de atributos propios que aumentan su flexibilidad y utlidad. Aquí te los resumo todos y los usaremos en un ejemplo. Recuerdo que los argumentos no son obligatorios.

Attribute Description
accept−charset Código de caracteres usados. Lo habitual es usar el juego UTF-8, sistema internacional y el ISO-8859-1 para idiomas latinos. Por defecto se usa el de la página en que se encuentre el formulario
action Dirección del programa al que se envían los datos del formulario. suele ser un programa escrito en php o asp, y se ejecuta en el servidor.
autocomplete Indica si los campos aceptan o no auto relleno.
enctype

Se indica como deben codificarse los datos cuando se envián por el método POST, no se usa en el caso de GET.

  • text/plain: para depurar
  • multipart/form-data: para enviar archvios
  • application/x-www-form-urlencoded: vaor por defecto
method

Es el método como se envían los datos. El valor por defecto es GET

  • GET: los datos se agregan a la url del programa: validar.php?nombre="Juan"&edad="12". Por defecto.
  • POST: los datos van con la petición al servidor de forma invisible para el usuario. Es más seguro
name Es el nombre que se le da al formulario para referenciarlo en otros elementos o en scripts.
novalidate Si aparece este valor el formulario se envía sin validar, es decir, sin comprobar los campos con condiciones.
target

Se refiere a donde se abrirá la página resultante del procesamiento de los datos. Por defecto este valor es _self: la misma ventana donde está la página con el formulario

  • _self : Ventana actual
  • _blank: Ventana nueva
  • _parent: Ventana padre de la actual
  • _top: Ventana padre de todas
  • frame: nombre de un iframe

Excepto accept-charset y autocomplete, los restantes atributos pueden ser sustituidos por el correspondiente atributo formaction, formmethod, formenctype, formnovalidate, formtarget de los elementos <input type="submit">, <input type="image"> o <button>, los usados para cerrar el formualrio y enviar los datos. Especialmente importante es el atributo enctype cuando el formualrio es utilizado para enviar archivos (input type="file"). En esta utilización es necesario que este atributo tenga el valor multipart/form-data

<p>No validar los datos</p>

<p>Acepta cualquier valor para url (no valida)</p>

<form action="/editor/verdatos.php" novalidate >

Web de títulos:

<input type="url" name="web">

<input type="submit" value="Enviar" name="envio">

</form><br>

Este otro avisa si no la url no es correcta

<p>Ejemplo de target</p>

<form action="/editor/verdatos.php" target="_blank">

Web de títulos:

<input type="url" name="web">

<input type="submit" value="Enviar" name="envio">

</form>

Ejemplo del atributo novalidate
En el primer ejemplo tienes el atributo novalidate y cuando envías una url mal escrita el formulario te avisa y te obliga a colocar una url válida.

En el segundo ejemplo la página de resultado del formulario se abre en otra pestaña del navegador.

Antes de seguir con la entrada de datos

Es más seguro usar el método POST para el envío de datos al programa de gestión

Entrada de datos

La otra parte fundamental en un formulario son los campos o controles de datos. Has visto en la introducción a los formularios como utilizar algunos tipos del elemento <input>para entrar datos, existen otras formas de hacerlo como listas de valores o textos largos, entre otros.

Algunos de estos elementos poseen atributos para modificar su comportamiento o aspecto, se ven en otra sección de la web.

<select>
Permite ofrecer una lista cerrada de opciones, es como la típica lista desplegable de Windows. No permite teclear texto que no se encuentre en la lista. Dentro de select se pueden establecer grupos de valores.
<textarea>
Si el texto de INPUT se nos queda pequeño podemos usar el área de texto, un cuadro que abarca varias líneas para entrar el texto que deseemos. Entre otros admite los atributos rows (filas) y columns (columnas) para definir su tamaño.
<datalist>
Ofrece una lista de valores predeterminados para un campo <input>. Al seleccionar el input se despliega la lista con valores sugeridos. Es un autocompletar con valores determinados por la página. Este elmento se asocia mediante su atributo id y a un input con el mismo valor en el list.

Estudia este ejemplo de uso de estos campos. El tamaño del campo de texto (textarea) está definido como 4 filas y 40 columnas.

<!doctype html>

<html lang="es">

<head>

<meta charset="utf-8">

</head>

<body>

<form action="/editor/alquilar.php" method="post">

<label>Titulo <select name="Titulo" >

<option value="Los asquerosos">Los asquerosos</option>

<option value="La reina roja">La reina roja</option>

<option value="Solaris">Solaris</option>

</select>

</label>

<p>

<label>Días <input type="number" name="Dias" onfocusout="coste.value = Dias.value*2+' Euros'"></label>

</p>

<p>

Precio: <output name="coste" for="Dias">

Euros</output>

</p>

<p>Observaciones</p>

<textarea name="Observaciones" cols="40" rows="4">

Puedes anotar cualquier observación

Observaciones

<textarea name="Observaciones" cols="40" rows="4">

Puedes anotar cualquier observación

</textarea>

<label>Escribe la marca de tu Ebook:

<input list="ebooks" name="Ebook">

<datalist id="ebooks">

<option value="Xiaomi">

<option value="Kobo">

<option value="BQ">

</datalist>

</label>

<input type="submit" value="Enviar">

</form>

Uso de diferentes campos de entrada de datos
Puedes usar este código para crear tu página de nombre ejercicio06.htm. Cuando lo pruebes fíjate que el control datalist se parece al select, pero, a difenrecia de éste, datalist admite que teclees un texto que no esté en la lista.
El formulario es un elemento importante para que los usuarios interaccionen con la página web

Otros elementos

Aparte de los campos de entrada o de acción construídos con el elemento input, existen otros componentes de los formularios para facilitar su uso, hacerlos más accesibles y más intuitivos. Alguno lo has visto en los ejemplos que hemos venido utilizando.

<output></output>
Es un campo de salida, es un control actualizable por el formulario mediante algún script. Se usa para mostar el resultado de una operación o de una acción del usuario. Este valor no es enviado con los datos del formulario al programa que lo procese, pues no es un dato provisto por el usuario.
  • for: contiene una lista separada por espacios de los identificadores de los elementos con que se actualiza su valor
  • name: nombre del control, necesario apra el script que lo actualzia.
  • form: id del formulario al que pertenece.
<label></label>
Se trata de un elemento de texto explicativa sobre al elemento de elemento del formulario al que esté ligada. Su puede usar conteniendo al elemento input enlazado o fuera de él. Incluso puede estar fuera del formulario. Sus atributos específicos son
  • for Su valor es el id del control input al que se refiere, utilizado cuando el label no contiene al input
  • form Su valor es el id del formulario al que pertenece. Utilizado cuando el label está fuera del form.
<fieldset></fieldset>
Permite agrupar visualmente un conjunto de controles relacionados entre sí. Dibuja un marco que encierra a los controles agrupados incluidos en el fieldset.
  • disabled: Si aparece este valor el conjunto de controles está deshabilitado, no pueden editarse
  • name: Es un nombre para identificar al conjunto de campos
  • form: Contiene el id del formulario al que pertenece, usado cuando el fieldset se define fuera del elemento form. Los controles incluídos deben contener este mismo atributo.
<legend></legend>
Es un elemento hijo de fieldset utilizado para ponerle un titulo a un conjunto de campos agrupados. el texto que se introduzca en este elemento aparece sobre el borde de fieldset.

Este formulario podría ser parte de una página de alquiler de lectores de ebooks. Agrupamos los datos del cliente en un <fieldset> con nombre dado pro el elemento <legend>. Se usa un elemento <output> para mostrar el total del alquiler calculado con el número de días.

Como ves el elemento input para días tiene un atributo onchange, su valor es un código javascript que se ejcuta cuando cambia el valor del campo (onchange es un evento, una señal que avisa de que ha ocurrido algo, en este caso un cambio)

Datos del cliente<br>

<form action="/editor/alquilar.php" method="post">

<p>Precio del alquiler 2 €/dia</p>

<label>Días <input type="number" name="Dias"

onchange="coste.value = Dias.value*2+' Euros'"></label><br>

<p>Total: <output name="coste" for="Dias"> Euros</output></p>

<fieldset>

<legend>Datos del cliente</legend>

<label>

Nombre <input type="text" name="nombre"></label><br>

<label>Apellidos <input type="text" name="apellidos"></label>

</fieldset>

<input type="submit" value="enviar">

</form>

Elementos avanzados de form
Al probar este formulario observa que el valor calculado en output (total) no es pasado al programa señalado en action. Solo se usa en el formulario a modo de información para el usuario. Si ese valor fuera necesario el programa que gestiona el formulario lo debería volver a calcular.
Las etiquetas label permiten que el texto que acompaña a los controles del formulario sean también activos.