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.
|
| method | Es el método como se envían los datos. El valor por defecto es GET
|
| 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
|
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>
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
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>
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.
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>