Formularios

[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
paso 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.
paso 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

atributo significado
Codificación de caracteres que se utilizará para pasar los contenidos del
accept-
formulario, por ejemplo ISO-8859-1. Por defecto se usa la codificación de la
charset
propia página web.
Puede tomar los valores on u off. Si se activa esta opción (con valor on), el
navegador automáticamente completará los datos del formulario basándose en
los valores para esos mismos controles que el usuario haya rellenado en otros
autocomplete formularios.
Este atributo está disponible también para cada control (así podremos indicar
el auto completado en unos controles y en otros no).
No funciona en el navegador Opera.
Solo es válido para el método POST. Indica el formato en el que los datos del
formulario son enviados. Nunca se suele usar. Posibles valores:
 aplication/x-www-form-urlencoded. Formato predeterminado para
el envío de los datos.
 multipart/form-data. Formato de dato binario, solo se usa si con el
enctype
formulario se envía un archivo.
 text/plain. Texto plano, compatible con antiguos programas de
recepción de datos de formulario (por ejemplo viejos programas CGI en
el servidor).

Los navegadores compatibles con HTML 5 tienen la capacidad de validar

algunos datos (por ejemplo en los cuadros numéricos se valida que el usuario
novalidate
realmente ha escrito un número). Si usamos este atributo (que no tiene valor
asociado), esas validaciones no se harán
Es el mismo atributo que en la etiqueta a. Si se usa con valor _blank, entonces
target
la respuesta al formulario se da en otra ventana.
[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:

atributo significado
Indica el tipo de control. Sus posibles valores se explican en las siguientes
type
secciones del manual
Atributo fundamental que da un nombre al control. Este nombre es el que se
name le pasa al servicio receptor de los datos del formulario; realmente se le pasa el
nombre y el valor que el usuario ha introducido en el control.
Tamaño, en caracteres, que tendrá el cuadro (especialmente útil en los
size
cuadros de texto y numéricos)
Permite dar un valor al elemento. Antes de que el usuario rellene datos en él,
value
aparecerá el valor indicado con este atributo.
disabled El control aparecerá deshabilitado para su edición.
Permite que el navegador rellene automáticamente el contenido del control
autocomplete en base a la información que posee del usuario. Los valores posibles
son on u off.
Hace que elemento obtenga el foco (el foco hace que el control del
autofocus formulario que lo tenga sea el que recibe las pulsaciones de teclado del
usuario) en cuanto cargue la página.
disabled El control estará deshabilitado
Recibe el identificador del formulario al que pertenece el control. Se usa
form cuando el elemento está fuera de la etiqueta form . Internet Explorer no es
compatible con este atributo. Es un atributo de HTML 5
formnovalidate
Hace que el control no sea validado cuando se envíen los datos
d
Permite indicar el máximo número de caracteres que se admitirán al rellenar
maxlength
el control
Este atributo es el común a todos los elementos HTML. En el caso de los
formularios su uso no era habitual ya que necesitan del uso de name que ya
se puede entender que identifica a cada control.
Sin embargo se aconseja usar siempre id en los controles por estas razones:
 El atributo name ya hace bastantes años que se quería eliminar.
Aunque esta no es razón para ello ya que, por ahora, el atributo name
es la forma de pasar los datos de un control de formulario al servicio
que los recibe
id
 La nueva etiqueta label (introducida en HTML 5) que sirve como
texto de acompañamiento de los controles de un formulario, requiere
que el control al que etiqueta esté identificado.
 La manera más habitual para acceder desde JavaScript a un control del
formulario es a través de su identificador. Como es habitual usar
JavaScript cuando se usan los formularios, es un excelente hábito
indicar siempre valor para el atributo id.

readonly Indica que el control es de solo lectura; es decir, no se podrá escribir en él.
atributo significado
Atributo de HTML 5 que hace que el elemento sea de obligado rellenado; es
required decir que no se puede dejar vacío, el usuario tendrá que darle algún valor.
No funciona en Safari no en versiones de Internet Explorer anteriores a la 9
Permite colocar una expresión regular en un cuadro de texto. De esa forma
no se admitirán los valores que no cumplan esa expresión (salvo que
indiquemos novalidate)
Ejemplo (cuadro de texto que solo acepta introducir 5 letras mayúsculas y tres
números):

<form action=”servicio.php”
pattern 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>
Un placeholder es un texto que ayuda a rellenar un cuadro de un formulario
(está especialmente pensado para los cuadros de texto) colocando un texto
inicial en el cuadro que se va en cuanto el cuadro obtiene el foco del usuario
(el foco se obtiene, por ejemplo, haciendo clic en el control de texto).
Ejemplo:

<form action=”servicio.php”
method=”get”>
<label for=”texto”>
placeholder 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>
El resultado es:

[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
botó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).
botó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:

atributo significado
Atributo incorporado en HTML 5 (las versiones de Internet Explorer
inferiores a la 10 no le soportan), que asignado a un botón de
tipo submit o image, permite indicar el servicio al que se enviarán los datos
del formulario.
formaction
Normalmente un botón submit envía los datos al servicio indicado por el
atributo action del elemento form, esto permite un destino alternativo, de
modo que podríamos tener dos botones cada uno de ellos indicando un destino
distinto para los datos.
Con las mismas características que el anterior, en este caso permite indicar el
formethod
método de paso (GET o POST) de los datos
Con las mismas premisas que los dos atributos anteriores, indica la forma de
codificación de los datos (como el atributo type del elemento form), puede
ser:
formenctype  application/x-www-form-urlencoded
 multipart/form-data
 text/plain

Los datos que se envían no se validarán (como el atributo validate del

formnovalidat
elemento form). No funciona en Safari (además de en las versiones anteriores
e
a la 10 de Internet Explorer).
El destino de los datos se mostrarán en una ventana aparte si se le da el
formtarget
valor _blank a este atributo.
botó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.
botó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.
botó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
elementoslabel 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 inputcorrespondiente).
[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 checkedde
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.
atributos relacionados con los cuadros de archivo

atributo significado
Permite indicar el tipo MIME de archivos que aceptará el servidor. Por
ejemplo image/* indicará que se acepta cualquier formato de imagen. Otras
accept
posibilidades son audio/* y video/* o indicar un tipo MIME completo
como image/jpeg.
multiple Si aparece, permite especificar más de un 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:

atributo significado
max Establece el máximo valor que se puede escribir en el cuadro
min Establece el mínimo valor que se puede escribir en el cuadro
Valor en el que se puede incrementar el número. Por defecto vale 1, lo que impediría
step introducir valores decimales. Para decimales por ejemplo habría que indicar un step
de 0.01
[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):

atributo significado
name Nombre del botón
id Identificador del botón
value Permite dar un valor al botón
Indica el tipo de botón, puede ser:
 submit. Envío de datos (valor por defecto)
type  reset. Borrado de la información introducida en el formulario
 button. Botón genérico.

disabled Deshabilita el botón

form Recibe el identificador del formulario al que pertenece el botón
HTML 5. Destino de los datos del formulario cuando se pulsa este botón
formaction
(suponiendo que sea de tipo submit)
HTML 5. Método de paso (GET o POST) de los datos (si el botón es de tipo
formethod
submit)
formenctype HTML 5. Tipo de codificación (si el botón es de tipo submit)
formnovalidat
Los datos que se envían no se validarán
e
El destino de los datos se mostrarán en una ventana aparte si se le da el
formtarget
valor _blank a este atributo.
[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

atributo significado
name Nombre del cuadro combinado
id Identificador del cuadro combinado
autofocu
HTML5. El control adquiere el foco en cuanto carga la página
s
disabled El cuadro aparece deshabilitado
form Recibe el identificador del formulario al que pertenece el botón
El cuadro se convierte en un cuadro de selección de múltiples valores. Es una opción
multiple
muy importante ya que este tipo de controles a veces es imprescindible
required HTML 5.EEs obligatorio al menos elegir una opción del cuadro.
Número de opciones visibles a la vez. Si elegimos 5, para ver la sexta habrá que usar
size
la barra de desplazamiento del contro..
[13.6.2]atributos del elemento option

atributo significado
atributo significado
disabled La opción aparece deshabilitada en el vuadro combinado
Versión de texto de la opción más corta. No funciona en Firefox ni en Internet
label
Explorer anterior a la versión 7
selected Opción seleccionada por defecto
Valor que se envía al servicio que recibe los datos del formulario cuando se elige esta
value
opción
[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

atributo significado
name Nombre del control
id Identificador del control
atributo significado
value Especifica un contenido para el control
autofocus HTML5. El control adquiere el foco en cuanto carga la página
cols Anchura del cuadro en caracteres
disabled El cuadro aparece deshabilitado
form Recibe el identificador del formulario al que pertenece el botón
maxlength Máximo número de caracteres permitidos en el cuadro
HTML 5. Coloca un texto inicial en el cuadro que se va en cuanto el cuadro obtiene
placeholder el foco del usuario (el foco se obtiene, por ejemplo, haciendo clic en el control de
texto). Se usa como texto de ayuda.
readonly El cuadro de texto es de solo lectura (no se puede cambiar su contenido)
required HTML 5.EEs obligatorio al menos elegir una opción del cuadro.
Número de filas visibles en el cuadro (si se rellenan más, se accederá a ellas con
rows
una barra de desplazamiento).
Forma de encapsular el texto cuando se envían los datos al servicio de destino.
wrap
Puede ser soft o hard.
[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:

atributo uso
autofocu
El control obtendrá el foco cuando el formulario se cargue
s
challenge Es una cadena de desafío que se presentará junto con la clave pública
disable Deshabilita el control
Permite especificar el identificar del formulario al que se asociará esté control (de
form
uso obligado en caso de estar fuera de una etiqueta form)
keytype Indica el tipo de cifrado. Puede ser: rsa, dsa o ec. Por defecto cifra mediante RSA.
name Nombre del control
[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
barras 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:

atributo significado
max Máximo valor del rango, ese será el valor relacionado con el final de la barra
min Mínimo valor del rango, es el valor relacionado con el valor de la barra.
Valor más alto a alcanzar (meta). Por debajo de este valor, el color de la barra se
high
muestra de color amarillo (aún no hemos alcanzado el valor a alcanzar)
Valor más bajo en el rango de la barra de progreso. Por debajo de este valor, la barra
low
se muestra roja (puesto que no hemos alcanzado el mínimo)
Valor actual de la barra. La barra se colorea desde el inicio hasta llegar a la posición
value
que le correspondería a este valor en la barra.
optimu Valor marcado como óptimo en la barra de progreso. No provoca ningún efecto
m visual en la actualidad.
Identificador del formulario al que pertenece este control (salvo que el control esté
form
dentro de una etiqueta form)
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.
barra 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:

atributo significado
max Máximo valor. Se toma este valor como la meta a alcanzar
Valor actual. Desde el inicio hasta el valor se pintará en la barra de
value
progreso
Ejemplo de barra tipo progress:

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

Resultado: