Formularios (1)

Formularios (1)
 <form>
 Atributos comunes
 Controles
o Botones
o Botones submit
o Botones reset
o Texto
o Contraseña
o Número
o Fecha
o Hora
o Casilla de verificación
o Botón radio
o Color
o Rango
o Oculto
o Área de texto
o Menú

En esta lección y en la lección Formularios (2) se comentan las etiquetas relacionadas

con los formularios
En esta lección se comentan las etiquetas y atributos más básicos.

El formulario: <form>
<form>

Un formulario es un conjunto de controles (botones, cajas de texto, casillas de

verificación, botones radio, etc) que permiten al usuario introducir datos y enviarlos al
servidor web para su procesamiento.
<form action="ejemplo.php" method="get">
<p>Nombre: <input type="text" name="nombre" size="40"></p>
<p>Año de nacimiento: <input type="number" name="nacido" min="1900"></p>
<p>Sexo:
<input type="radio" name="hm" value="h"> Hombre
<input type="radio" name="hm" value="m"> Mujer
</p>
<p>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
 </p>
</form>

La etiqueta que delimita un formulario es la etiqueta <form> ...</form>. Los atributos

más importantes de la etiqueta <form> son:
 action: contiene el nombre del agente que procesará los datos remitidos al
servidor (por ejemplo, un script de PHP)
 method: define la manera de enviar los datos al servidor. Los valores posibles
son:
o get: los valores enviados se añaden a la dirección indicada en el
atributo action
o post: los valores se envían de forma separada

Si el atributo method no está establecido, el formulario se comporta como si el

valor fuera get.
La etiqueta <form> es un elemento de bloque. En su interior puede haber cualquier
elemento típico de una página web (párrafos, imágenes, divisiones, listas, tablas, etc.),
además de las etiquetas que crean los controles.
Los etiquetas que crean los controles en los formularios
son <input>, <button>, <select>, <optgroup>, <option> y <textarea>. Además, se
pueden estructurar los controles con las etiquetas <fieldset> y <legend>. Por último, la
etiqueta <label> permite mejorar la accesibilidad de los controles.
El navegador envía únicamente los datos de los controles contenidos en el formulario.
En una misma página puede haber varios formularios que envíen datos al mismo o a
diferentes agentes.

Atributos comunes de los controles

Algunos atributos se pueden utilizar en varios tipos de controles.

El atributo type

El atributo type de la etiqueta <input> indica el tipo de control de que se trata.

En HTML 4.01 los tipos de <input> eran: botón para enviar submit, botón para
reiniciar reset, texto text, contraseña password, archivo file, imagen image y
oculto hidden.
En HTML 5 se añadieron los tipos de <input>: botón button, número number,
búsqueda search, teléfono tel, dirección web url, dirección de correo email, fecha date,
hora time, color color y rango range.
En HTML 5.1 se añadieron los tipos de <input>: mes month, semana week y fecha y
hora local datetime-local.

El atributo name
El atributo name identifica al control.
Todos los controles de un formulario deben tener el atributo name porque, en general,
sólo se envían los controles que lo tienen (aunque hay excepciones, como los controles
de tipo imagen o los botones, que no los necesitan).
En general, los atributos name no se deben repetir, porque no se recibiría toda la
información al enviarla. La única excepción es el botón radio, como se explica en el
apartado correspondiente.

El atributo value

El atributo value permite establecer el valor inicial de un control, aunque cada control lo
utiliza de una forma ligeramente distinta y algunos controles no lo admiten (área de
texto, archivo o imagen).
En algunos casos (botones) el valor se muestra al usuario y el usuario no puede
modificarlo. En otros casos (cajas de texto, contraseña) el valor se muestra en la página
y el usuario puede modificarlo. En otros casos (casillas de verificación, botones radio,
opciones de menú, oculto) el valor no se muestra en la página y el usuario no puede
modificarlo.
En algunos casos (botones, oculto, botones radio) el atributo value es necesario. En
otros casos (casilla de verificación, opciones de menú) es conveniente. En otros casos
(cajas de texto, contraseña, imagen) puede omitirse. En el caso del selector de archivo,
los navegadores no lo admiten por motivos de seguridad.

El atributo required

El atributo required permite indicar qué controles es obligatorio rellenar para enviar el
formulario.
<p>Nombre: <input type="text" name="nombre" required></p>

<p>Sexo:
<input type="radio" name="hm" value="h" required> Hombre
<input type="radio" name="hm" value="m" required> Mujer
</p>

Si alguna de las opciones de un botón radio tiene establecido el atributo required, el

control es obligatorio.
<p>Sexo:
<input type="radio" name="hm" value="h" required> Hombre
<input type="radio" name="hm" value="m"> Mujer
</p>

<p>Edad:
<input type="radio" name="edad" value="menor"> Menor
<input type="radio" name="edad" value="adulto" required> Adulto
</p>

El atributo placeholder

El atributo placeholder permite mostrar en los controles de texto un texto que

desaparece al escribir en el control.
<p>Apellidos:
<input type="text" name="apellidos" size="40" placeholder="Escriba sus dos
apellidos">
</p>

El atributo size

El atributo size permite establecer la longitud de los controles de texto

(text, password, search, etc.). Por omisión, las cajas suelen tener 20 caracteres de
longitud.
<p>Nombre: <input type="text" name="nombre"></p>

<p>Apellidos: <input type="text" name="apellidos" size="40"></p>

<p>Nacionalidad: <input type="text" name="nacionalidad" size="20"></p>

Los atributos maxlength y minlength

Los atributos maxlength y minlength permiten establecer la longitud máxima y mínima,

respectivamente, que puede escribir el usuario en un control de texto
(text, password, search, etc.).
<p>Usuario: <input type="text" name="usuario" maxlength="6"></p>

<p>Contraseña: <input type="password" name="password" minlength="6"></p>

El atributo autofocus

El atributo autofocus permite indicar el control que debe tener el foco al cargarse el
formulario.
Este atributo facilita la accesibilidad del formulario pues permite que el usuario pueda
empezar a rellenar el formulario sin necesidad de hacer clic en el elemento. Como el
navegador desplaza automáticamente la página hasta la posición del elemento, se
recomienda que el elemento con atributo autofocus se encuentren al principio de la
página, para que el desplazamiento no confunda al usuario.
Nota: En estos apuntes (lecciones y ejercicios) no se utiliza este atributo porque como
en las páginas se incluyen varios formularios en distintas posiciones de la página, el
desplazamiento automático a un elemento con atributo autofocus puede confundir al
lector.

Controles: <input> y otros

Los controles son los elementos que permiten al usuario introducir información.
La mayoría de controles se obtienen mediante mediante la etiqueta vacía <input>.
En HTML 4.01, los controles disponibles eran: botón para
enviar <input type="submit">, botón para reiniciar <input type="reset">,
botón <button>, texto <input type="text">, contraseña <input type="password">,
archivo <input type="file">, imagen <input type="image">,
oculto <input type="hidden">, área de texto <textarea> y menú <select>.
En HTML 5 se añadieron los controles: botón general <input type="button">,
número <input type="number">, búsqueda <input type="search">,
teléfono <input type="tel">, dirección web <input type="url">, dirección de
correo <input type="email">, fecha <input type="date">, hora <input type="time">,
color <input type="color">, rango <input type="range">,
opciones <option> (para <datalist>), lista de valores <datalist>, salida <output>, barra
de progreso <progress> y medidor <meter>.
En HTML 5.1 se añadieron los controles: mes <input type="month">,
semana <input type="week"> y fecha y hora local <input type="datetime-local">.

Botones: <input> y <button>

Los botones se crean mediante la etiqueta <input> o mediante la etiqueta <button>. La

diferencia entre ellos es que <input> sólo puede contener texto, mientras
que <button> permite incluir elementos html como imágenes. El contenido del
botón <input> se define mediante el atributo value, por lo que sólo puede contener
texto. El contenido del botón <button> se escribe dentro del elemento, por lo que puede
incluir texto e imágenes.
Normalmente los botones no suelen llevar atributo name, pero se puede poner si se
quiere (tendría sentido si un formulario contuviera dos botones de envío y quisiéramos
saber en cuál de ellos ha hecho clic el usuario, pero esto no es muy habitual).

Botones Submit mediante <input> o <button>

<input submit>

<button>
El botón Submit es el que permite al usuario remitir los datos al servidor. Se crea
mediante una etiqueta <input> o <button> cuyo atributo type tiene el valor submit.
<input type="submit" value="Enviar">

<button type="submit">
<img src="send.svg" alt="imagen" width="32" height="32" style="vertical-
align: middle">
Enviar
</button>

Si un botón <button> no tiene definido el atributo type, se comporta como un botón de

tipo submit.
<button>
<img src="send.svg" alt="imagen" width="32" height="32" style="vertical-
align: middle">
Enviar
</button>

Si un botón <input> no tiene definido el atributo value, Firefox muestra el texto "Enviar
consulta", mientras que Google Chrome muestra el texto "Enviar", como se comenta en
la página de diferencias entre navegadores. Para garantizar el mismo texto en ambos
navegadores, en estos apuntes se incluye siempre en los botones Enviar el
atributo value con el valor Enviar.

Botones Reset mediante <input> o <button>

<input reset>

<button>

El botón Reset restablece los valores iniciales del formulario. Se crea mediante una
etiqueta <input> o <button> cuyo atributo type tiene el valor reset.
<input type="reset" value="Borrar">

<button type="reset">
 <img src="reset.svg" alt="imagen" width="32" height="32" style="vertical-
align: middle">
Borrar
</button>

Si una caja de texto u otro control similar tienen establecidos los

atributos value o placeholder, el botón Reset restablece estos valores, pero no deja vacío
el control.
<p>Caja de texto: <input type="text" name="texto" value="Bla bla bla"></p>

<p><input type="reset" value="Borrar"></p>

<p>Caja de texto: <input type="text" name="texto" placeholder="Bla bla

bla"></p>

<p><input type="reset" value="Borrar"></p>

Caja de texto: <input type="text">

<input text>

Las cajas de texto de una sola línea se crean mediante una etiqueta <input> cuyo
atributo type tiene el valor text.
<input type="text" name="texto">

El atributo value (optativo) permite incluir un texto en la caja de texto para que el
usuario lo modifique. HTML 5 introdujo el atributo placeholder, mucho más cómodo
para el usuario, ya que no tiene que borrar el texto de ayuda.
<input type="text" name="texto" value="Escriba algo">

<input type="text" name="texto" placeholder="Escriba algo">

Caja de texto de contraseña: <input type="password">

 <input password>

Las cajas de texto de una sola línea específicas para contraseñas se crean mediante una
etiqueta <input> cuyo atributo type tiene el valor password.
<input type="password" name="contrasena">

Al escribir en una caja de contraseña, en vez de letras aparecen puntos gruesos. Es

importante señalar que estas cajas no proporcionan ninguna seguridad en la transmisión,
simplemente ocultan al usuario lo que este escribe.

Número: <input type="number">

<input number>

Las cajas de texto de una sola línea específicas para números se crean mediante una
etiqueta <input> cuyo atributo type tiene el valor number.
En principio, los valores admitidos por el control son números enteros.
Escriba un número:
<input type="number" name="numero">

El atributo step permite que el control admita números decimales. Los navegadores
alertan al usuario cuando no ha escrito un valor correcto, como mínimo al enviar el
formulario.
En el caso de los números decimales:
 Chrome admite la coma (,) y el punto (.) como separadores de la parte decimal.
 Firefox sólo admite la coma (,) como separador de la parte decimal.

Escriba un número cualquiera:

<input type="number" name="numero" step="any">

El atributo min establece un valor mínimo en la respuesta:

Escriba un número mayor o igual que 20:
<input type="number" name="numero" min="20">

El atributo max establece un valor máximo en la respuesta:

Escriba un número menor o igual que 100:
<input type="number" name="numero" max="100">

El atributo step establece la cantidad, entera o decimal, en la que aumenta o disminuye

el valor:
Escriba un múltiplo de 10:
<input type="number" name="numero" step="10">

Escriba un valor de 0,5 en 0,5:

<input type="number" name="numero" step="0.5">

Para poder escribir cualquier número, el atributo step debe tener el valor any:
Escriba un número cualquiera:
<input type="number" name="numero" step="any">

Fecha: <input type="date">

<input date>

Las cajas de texto de una sola línea específicas para fechas (días, meses, años) se crean
mediante una etiqueta <input> cuyo atributo type tiene el valor date. El dato se envía
con el formato AAAA-MM-DD donde AAAA es el número de año, MM el número de
mes y DD el número de día.
Fecha: <input type="date" name="fecha">

Hora: <input type="time">

<input time>

Las cajas de texto de una sola línea específicas para tiempos (horas, minutos) se crean
mediante una etiqueta <input> cuyo atributo type tiene el valor time. El dato se envía
con el formato HH-MM donde HH son las horas y MM los minutos.
Hora: <input type="time" name="hora">
Casilla de verificación: <input type="checkbox">

<input checkbox>

Las casillas de verificación se crean mediante una etiqueta <input> cuyo

atributo type tiene el valor checkbox.
<input type="checkbox" name="casilla">Casilla 1

Si el atributo checked tiene el valor checked, la casilla aparece marcada.

<input type="checkbox" name="casilla" checked>Casilla 1

Las casillas de verificación sólo se envían si se han marcado. El atributo value contiene
el valor que envía el formulario si la casilla de verificación está marcada. Si el
atributo value no está establecido, el formulario envía el valor on.
<input type="checkbox" name="casilla">Casilla 1

<input type="checkbox" name="casilla" value="hola">Casilla 1

Botón radio: <input type="radio">

<input radio>

Los botones radio se crean mediante una etiqueta <input> cuyo atributo type tiene el
valor radio.
<input type="radio" name="boton" value="1">Opción 1

Lo botones radio que tienen el mismo atributo name forman un grupo, es decir, que si se
marca uno de ellos se desmarca automáticamente el resto.
<input type="radio" name="boton" value="1">Opción 1<br>
<input type="radio" name="boton" value="2">Opción 2<br>
<input type="radio" name="boton" value="3">Opción 3
Si los atributos name no tienen el mismo valor, los botones radio son independientes (al
marcar uno no se desmarca el otro):
<input type="radio" name="boton1" value="1">Opción 1<br>
<input type="radio" name="boton2" value="2">Opción 2

Los botones radio sólo se envían si se han marcado. El atributo value contiene el valor
que envía el formulario si el botón radio está marcado.Si el atributo value no está
establecido, el formulario envía el valor on, así que para poder saber cuál ha sido la
opción elegida por el usuario es necesario establecer con valores distintos los
atributos value de todos los elementos de un botón radio.
<input type="radio" name="boton"> Hombre<br>
<input type="radio" name="boton"> Mujer

<input type="radio" name="boton" value="hombre"> Hombre<br>

<input type="radio" name="boton" value="mujer"> Mujer

Si uno de los botones tiene el atributo checked con el valor checked, el botón aparece
marcado de forma predeterminada.
<input type="radio" name="boton" value="1">Opción 1<br>
<input type="radio" name="boton" value="2" checked>Opción 2

Una vez se ha hecho clic en uno de los botones radio, siempre habrá una opción
seleccionada. Para desactivar un botón radio, se necesita un botón Reset.
<input type="radio" name="boton" value="1">Opción 1<br>
<input type="radio" name="boton" value="2">Opción 2<br>
<input type="reset" value="Borrar">

El inconveniente del botón Reset es que reinicia todos los controles del formulario. Este
problema no tiene una solución sencilla. Algunos recomiendan incluir en los botones
radio una opción neutra, de manera que el usuario pueda cambiar su respuesta sin tener
que reiniciar todo el formulario. El problema es que el usuario puede malinterpretar esa
opción como una opción más y elegirla a propósito, por lo que se recomienda valorar en
cada caso la mejor solución. Quizás en formularios con pocos controles no merezca la
pena incluir esa opción neutra, y hacerlo sólo en formularios con muchos controles en
los que el usuario tendría que volver a completar todo el formulario si utiliza el botón
Reset
<p>Nombre: <input type="text" name="nombre"></p>
<p>
<input type="radio" name="boton" value="1">Opción 1<br>
<input type="radio" name="boton" value="2">Opción 2<br>
<input type="radio" name="boton" value="0" checked>Sin respuesta
</p>

Selector de color: <input type="color">

<input color>

El control de selector de color se crea mediante una etiqueta <input> cuyo

atributo type tiene el valor color. Permite elegir un color mediante el selector de color
proporcionado por el sistema operativo.
<input type="color" name="colorElegido">

El atributo value permite especificar un color inicial. El color se debe indicar en formato
hexadecimal (#RRGGBB).
<input type="color" name="colorElegido" value="#ff0000">

Rango: <input type="range">

<input range>

El control de rango se crea mediante una etiqueta <input> cuyo atributo type tiene el
valor range. El rango de valores predeterminado es de 0 a 100 (valores enteros).
Indique su nivel:
<input type="range" name="rango">

Los atributos min, max y step permiten elegir respectivamente el valor mínimo, el
máximo y el incremento.
Indique su nivel (de 1 a 10, de 3 en 3):
<input type="range" name="rango"
min="1" max="10" step="3">
Indique su nivel (de 0 a 1, de 0,1 en 0,1):
<input type="range" name="rango"
min="0" max="1" step="0.1">

El atributo list debería permitir añadir etiquetas al control, pero actualmente (enero de
2023) los navegadores admiten el atributo parcialmente
 Si el atributo list contiene el id de un elemento datalist que contiene
elementos option con atributos value, el control muestra marcas en la posición
correspondiente a esos valores:

Indique su nivel (de 0 a 6):

<input type="range" name="rango"
min="0" max="10" list="lista-rango">
<datalist id="lista-rango">
<option value="2">
<option value="4">
<option value="6">
<option value="8">
</datalist>

 Si el elemento datalist contiene elementos option con atributos label, el control

debería mostrar esas etiquetas en las posiciones de las marcas, pero actualmente
(enero de 2023), ni Chrome ni Firefox lo hacen:

Indique su nivel (Malo, Regular, Bueno):

<input type="range" name="rango"
min="1" max="3" list="lista-rango">
<datalist id="lista-rango">
<option value="1" label="Malo">
<option value="2" label="Regular">
<option value="3" label="Bueno">
</datalist>

Control oculto: <input type="hidden">

 <input hidden>

El control oculto se crea mediante una etiqueta <input> cuyo atributo type tiene el
valor hidden. Lógicamente, los navegadores no muestran estos controles en la pantalla
(aunque pueden verse en el código fuente).
<input type="hidden" name="nombre" value="pepito">

Los controles ocultos se pueden utilizar, por ejemplo, para dividir en varias páginas un
formulario largo. El problema de dividir en varias páginas es que cada página es
independiente de las demás y HTML no permite relacionar una con otra por lo que no se
sabría que la información enviada en el segundo formulario completa la del primero (los
lenguajes de programación de servidor, como PHP, sí que disponen de mecanismos para
relacionar unas páginas con otras, por ejemplo mediante cookies o sesiones). Una
solución es guardar en el segundo formulario la información enviada en el primer
formulario en controles ocultos, de manera que cuando el usuario envía el segundo
formulario, está enviando a la vez la información del primero y así sucesivamente en los
siguientes formularios.
Escriba su nombre: <input type="text" name="nombre">
Escriba su edad: <input type="number" name="edad"><br>
<input type="hidden" name="nombre" value="...">

Hay un caso especial de control oculto. Si un control oculto tiene el atributo name con
el valor _charset_ y no tiene atributo value, ese control envía el juego de caracteres de
los datos enviados
<input type="hidden" name="_charset_">

Área de texto: <textarea>

<textarea>

Las cajas de texto de varias líneas se crean mediante la etiqueta <textarea>. Los
atributos obligatorios rows y cols establecen el número de filas y columnas iniciales de
la caja, aunque los navegadores permiten modificarlo arrastrando la esquina inferior
derecha.
<textarea name="texto" rows="4" cols="20"></textarea>
<textarea name="texto" rows="3" cols="30"></textarea>

Si se escribe texto en el interior de la etiqueta, este se muestra en la caja de texto.

HTML 5 introdujo el atributo placeholder que puede ser más cómodo para el usuario si
tiene que borrar todo el texto incluido.
<textarea name="texto" rows="4" cols="40">Escriba algo</textarea>

<textarea name="texto" rows="4" cols="40" placeholder="Escriba

algo"></textarea>

Menú: <select>

<select>

<option>

<optgroup>

Los menús se crean mediante la etiqueta <select>. Cada opción del menú se define
mediante la etiqueta <option>.
<select name="menu">
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>

El valor que se envía es el texto que aparece en el menú, salvo si el

elemento <option> contiene el atributo value.
<select name="menu">
<option>Uno</option>
<option value="2">Dos</option>
<option value="three">Tres</option>
</select>
El atributo selected indica la opción por omisión.
<select name="menu">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3" selected>Tres</option>
</select>

Si ningún elemento posee el atributo selected, los navegadores muestran la primera

opción del menú.
<select name="menu">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>

El problema de mostrar una de las opciones de forma predeterminada es que al recibir el

formulario no se puede saber si el usuario ha elegido realmente esa opción o
simplemente no ha modificado el control. Por ello, se aconseja incluir una opción en
blanco al principio de los menús
<select name="menu">
<option value="0">...</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>

El atributo size permite definir la altura del control.

<select name="menu" size="3">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="4">Cuatro</option>
<option value="5">Cinco</option>
</select>
El atributo multiple permite elegir varias opciones simultáneamente (con ayuda de la
tecla Control o Mayúsculas). En este caso el atributo name debe incluir corchetes
([]) para que se puedan enviar en su caso varios valores en forma de matriz.
<select name="menu[]" size="5" multiple>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="4">Cuatro</option>
<option value="5">Cinco</option>
</select>

Se pueden agrupar opciones utilizando la etiqueta <optgroup>.

<select name="menu">
<option selected>...</option>
<optgroup label="Grupo1">
<option value="1">Opción uno</option>
<option value="2">Opción dos</option>
<option value="3">Opción tres</option>
</optgroup>
<optgroup label="Grupo2">
<option value="4">Opción cuatro</option>
<option value="5">Opción cinco</option>
<option value="6">Opción seis</option>
</optgroup>
</select>

Diseño web con HTML y CSS

Formularios

Hasta ahora, la única forma que hemos visto de interactuar con una web son los
enlaces, haciendo clic en ellos. Pero existe otra opción más potente para que el
usuario interactúe con una web: los formularios. Son una herramienta muy útil
para enviar información a un servidor. Cuando nos registramos en una web,
rellenamos una serie de datos (e-mail, contraseña, etc.) mediante un formulario.
Así pues, un formulario contiene una serie de elementos (llamados
normalmente “controles” o “campos”) que colocamos en una página web para
que el usuario pueda introducir información. Veremos a continuación qué tipos
de elementos puede tener un formulario y cómo se colocan en la página.
1. Estructura básica de un formulario
Todo el contenido de un formulario va encerrado entre una pareja de
etiquetas form. Esta etiqueta tiene, entre otros, los siguientes atributos:

 action: sería el equivalente al href de los enlaces. Indica a qué página

queremos ir cuando rellenemos el formulario y lo enviemos. Podemos
utilizar, como en los enlaces, una ruta relativa o absoluta a la página. Lo
normal es que la página a la que ir en el action de un formulario sea una
página escrita en lenguaje de servidor (PHP, JSP, ASP… según el lenguaje
que hayamos elegido), ya que normalmente el servidor debe recoger la
información que envía el usuario en el formulario, procesarla y hacer algo
con ella. Por ejemplo, si nos estamos registrando en la web, el servidor
deberá procesar nuestros datos y darnos de alta en la base de datos de
usuarios de la web.
 method: indica la forma en que se envían los datos al servidor. Puede
valer get (los datos son visibles en la barra de direcciones del navegador
cuando los enviamos) o post (los datos no son visibles desde la barra de
direcciones, y por tanto es algo más seguro).

<form action="mipagina.php" method="post">

... Contenido del formulario
</form>

 autocomplete: puede tomar los valores on y off, siendo on el valor por

defecto. Si está activado, al rellenar cada campo del formulario se
mostrará un listado de términos que hemos escrito recientemente, para
ayudarnos a completar la información en el caso de que queramos que
sea la misma. Por ejemplo, en campos de tipo e-mail se mostrará una
lista con los últimos e-mails que hayamos escrito en formularios. Este
mismo atributo también existe en los controles internos del formulario,
de modo que podemos habilitar el autocompletado para el formulario en
general, y deshabilitarlo para ciertos controles.

2. Elementos básicos de un formulario

Dentro de las etiquetas form que engloban al formulario, podemos poner
diferentes tipos de controles. Los más habituales son:

 Cuadros de texto: para introducir en una línea una información corta y

concreta, como por ejemplo un e-mail o un password.
 Áreas de texto: para introducir textos largos, de más de una línea. Por
ejemplo, el contenido de una noticia.
  Checkboxes: casillas de verificación que se marcan y desmarcan
 Botones de radio o radio buttons: conjunto de botones u opciones
entre los que sólo puede haber uno seleccionado.
 Listas: desplegables o fijas
 Botones: para enviar el formulario, o borrar los datos del mismo, por
ejemplo
 Etiquetas: dan información de otros controles, indicando para qué sirven.

La mayor parte de estos controles (cuadros de texto, checkboxes, botones de

radio, botones normales…) se añaden con la etiqueta input. Otros controles
necesitan de otras etiquetas. Veremos todas ellas a continuación.

2.1. La etiqueta input

La etiqueta input se utiliza para definir distintos tipos de controles,
dependiendo de lo que valga su atributo type. Este atributo puede valer:

 text: para definir cuadros de texto simples (de una sola línea).
 password: para definir cuadros de texto enmascarados (para contraseñas)
 file: para definir controles para subir archivos al servidor. Aparecerá un
cuadro de texto y un botón para que, al pinchar en él, podamos elegir el
archivo. Estos controles no son de mucha utilidad sin un lenguaje de
servidor que les ayude a completar la tarea, como PHP, JSP o ASP.NET. Se
puede añadir el atributo multiple en el caso de que queramos poder
adjuntar varios archivos.
 checkbox: para definir casillas de verificación o checkboxes
 radio: para definir botones de radio.
 submit: para definir el botón que servirá para enviar el formulario al
pulsarlo
 reset: para el botón que servirá para borrar el contenido del formulario al
pulsarlo
 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.

Veamos un 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.

<form action="mipagina.php" method="post">

<p>Introduce tu nombre:</p>
<input type="text" name="nombre" size="20" placeholder="Nombre completo">
<br>

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

<input type="checkbox" name="casado"> Casado

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

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

</form>

Esto se vería más o menos así en la página:

Diseño web con HTML y CSS

Formularios

Hasta ahora, la única forma que hemos visto de interactuar con una web son los
enlaces, haciendo clic en ellos. Pero existe otra opción más potente para que el
usuario interactúe con una web: los formularios. Son una herramienta muy útil
para enviar información a un servidor. Cuando nos registramos en una web,
rellenamos una serie de datos (e-mail, contraseña, etc.) mediante un formulario.
Así pues, un formulario contiene una serie de elementos (llamados
normalmente “controles” o “campos”) que colocamos en una página web para
que el usuario pueda introducir información. Veremos a continuación qué tipos
de elementos puede tener un formulario y cómo se colocan en la página.

1. Estructura básica de un formulario

Todo el contenido de un formulario va encerrado entre una pareja de
etiquetas form. Esta etiqueta tiene, entre otros, los siguientes atributos:

 action: sería el equivalente al href de los enlaces. Indica a qué página

queremos ir cuando rellenemos el formulario y lo enviemos. Podemos
utilizar, como en los enlaces, una ruta relativa o absoluta a la página. Lo
normal es que la página a la que ir en el action de un formulario sea una
página escrita en lenguaje de servidor (PHP, JSP, ASP… según el lenguaje
que hayamos elegido), ya que normalmente el servidor debe recoger la
información que envía el usuario en el formulario, procesarla y hacer algo
con ella. Por ejemplo, si nos estamos registrando en la web, el servidor
deberá procesar nuestros datos y darnos de alta en la base de datos de
usuarios de la web.
 method: indica la forma en que se envían los datos al servidor. Puede
valer get (los datos son visibles en la barra de direcciones del navegador
cuando los enviamos) o post (los datos no son visibles desde la barra de
direcciones, y por tanto es algo más seguro).

<form action="mipagina.php" method="post">

... Contenido del formulario
</form>

 autocomplete: puede tomar los valores on y off, siendo on el valor por

defecto. Si está activado, al rellenar cada campo del formulario se
mostrará un listado de términos que hemos escrito recientemente, para
ayudarnos a completar la información en el caso de que queramos que
sea la misma. Por ejemplo, en campos de tipo e-mail se mostrará una
lista con los últimos e-mails que hayamos escrito en formularios. Este
mismo atributo también existe en los controles internos del formulario,
de modo que podemos habilitar el autocompletado para el formulario en
general, y deshabilitarlo para ciertos controles.

2. Elementos básicos de un formulario

Dentro de las etiquetas form que engloban al formulario, podemos poner
diferentes tipos de controles. Los más habituales son:
  Cuadros de texto: para introducir en una línea una información corta y
concreta, como por ejemplo un e-mail o un password.
 Áreas de texto: para introducir textos largos, de más de una línea. Por
ejemplo, el contenido de una noticia.
 Checkboxes: casillas de verificación que se marcan y desmarcan
 Botones de radio o radio buttons: conjunto de botones u opciones
entre los que sólo puede haber uno seleccionado.
 Listas: desplegables o fijas
 Botones: para enviar el formulario, o borrar los datos del mismo, por
ejemplo
 Etiquetas: dan información de otros controles, indicando para qué sirven.

La mayor parte de estos controles (cuadros de texto, checkboxes, botones de

radio, botones normales…) se añaden con la etiqueta input. Otros controles
necesitan de otras etiquetas. Veremos todas ellas a continuación.

2.1. La etiqueta input

La etiqueta input se utiliza para definir distintos tipos de controles,
dependiendo de lo que valga su atributo type. Este atributo puede valer:

 text: para definir cuadros de texto simples (de una sola línea).
 password: para definir cuadros de texto enmascarados (para contraseñas)
 file: para definir controles para subir archivos al servidor. Aparecerá un
cuadro de texto y un botón para que, al pinchar en él, podamos elegir el
archivo. Estos controles no son de mucha utilidad sin un lenguaje de
servidor que les ayude a completar la tarea, como PHP, JSP o ASP.NET. Se
puede añadir el atributo multiple en el caso de que queramos poder
adjuntar varios archivos.
 checkbox: para definir casillas de verificación o checkboxes
 radio: para definir botones de radio.
 submit: para definir el botón que servirá para enviar el formulario al
pulsarlo
 reset: para el botón que servirá para borrar el contenido del formulario al
pulsarlo
 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.

Veamos un 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.

<form action="mipagina.php" method="post">

<p>Introduce tu nombre:</p>
<input type="text" name="nombre" size="20" placeholder="Nombre completo">
<br>

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

<input type="checkbox" name="casado"> Casado

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

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

</form>

Esto se vería más o menos así en la página:

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.

2.1.1. Más sobre los botones

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>

2.2. Las etiquetas de formularios: 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).

2.3. Á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>

2.4. 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:

<select name="navegador" size="5">

<option value="ie">Internet Explorer</option>
<option value="firefox" selected>Firefox</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Ejercicio 1:

Crea una página llamada formDatos.html para rellenar tus datos personales.
Añade un encabezado 1 (h1) que diga “Rellena tus datos”, y debajo un
formulario como el que tienes a continuación:
Ejercicio 2:

Crea una página llamada formMatricula.html para simular un proceso de

matrícula en ciclos formativos:
Deberás tener en cuenta que:

 El campo Fecha de nacimiento es de tipo date

 El campo Correo electrónico es de tipo email
 El campo Hermanos en el centro es de tipo numérico (number)

3. Algunas opciones avanzadas

3.1. Validación de formularios en cliente

Desde HTML5, podemos incorporar una serie de atributos en los controles de
los formularios para establecer una validación básica. De este modo, podemos
obligar a que algunos campos se rellenen, incluso que tengan un patrón o valor
determinado. Para ello, podemos hacer uso de estos atributos:

required

Este atributo se puede aplicar desde HTML 5 en los campos de un formulario

que sea obligatorio cumplimentar, de forma que el formulario directamente no
se envía si están vacíos. Por ejemplo, en el siguiente formulario es obligatorio
rellenar el campo login:

<form action="login.php" method="post">

<label for="login">Login:</label>
<input type="text" name="login" required>
<br>
<label for="login">Password:</label>
<input type="text" name="password">
<br>
<input type="submit" value="Enviar">
</form>

Si no lo rellenamos, el navegador nos posicionará sobre ese cuadro de texto con

algún tipo de mensaje (dependiendo del navegador) indicando que debemos
rellenarlo.

pattern

Este atributo permite especificar un patrón de entrada, de forma que para que
el dato que introduce el usuario se considere válido, debe ajustarse a ese
patrón. Por ejemplo, para un campo que pida un número de teléfono podemos
esperar que el usuario escriba entre 9 y 11 dígitos:

<input type="text" name="telefono" pattern="[0-9]{9,11}"

placeholder="Entre 9 y 11 dígitos">

Es habitual también indicar en ese campo del formulario qué tipo de

información se espera a través de un placeholder. La sintaxis que se utiliza para
definir diferentes tipos de patrones es la misma que se usa en JavaScript para
expresiones regulares, por ejemplo, pero no la veremos con detalle en este
tema. Simplemente veremos algunos casos útiles:

 Los corchetes especifican un rango de valores. Por ejemplo, [0-9] indica

cualquier dígito, y [a-zA-Z] cualquier letra.
 Las llaves indican el número de ocurrencias, bien exacto (un solo
número entre llaves) o un número mínimo y máximo de ocurrencias,
separados por comas.
 El símbolo + indica una o más veces. Por ejemplo, uno o más dígitos ( [0-
9]+). Por su parte, el símbolo * indica cero o más veces.
 El símbolo \ se utiliza para representar algunos símbolos especiales,
como por ejemplo el punto (\.)
min, max y otras validaciones numéricas

Para campos numéricos o de tipo rango (range) podemos establecer con estos
dos atributos los valores mínimo y/o máximo que se permiten (inclusive).

<input type="number" name="numero" min="1" max="5">

Además, podemos definir un atributo step para indicar el incremento que se

admite. Esto permitirá definir si admitimos sólo números enteros, por ejemplo…
<input type="number" name="numero" min="1" max="5" step="1">

… o si también admitimos números reales, hasta las centésimas, por ejemplo:

<input type="number" name="numero" min="1" max="5" step="0.01">

Estos elementos también pueden aplicarse a los campos de tipo range:

<input type="range" name="porcentaje" min="0" max="100" step="5">

Otras validaciones de facto

Algunos controles de formularios incorporados desde HTML5, como el input

type="email", input type="url" o input type="number" incorporan una
validación de facto en ellos, de forma que si el contenido que escribimos no se
asemeja a un e-mail válido o a un dato numérico, respectivamente, también se
mostrará un mensaje de error y no se enviará el formulario.
Ejercicio 3:

Vamos a aplicar validación al formulario del Ejercicio 2. En concreto, deberá

cumplir lo siguiente:

 El nombre completo y el e-mail son obligatorios

 El móvil de contacto debe empezar por 6, 7 u 8, y contener en total 9
dígitos
 El número de hermanos admite valores entre 0 y 10, ambos inclusive

3.2. Conjuntos de campos o fieldsets

Podemos agrupar conjuntos de controles en una especie de “marcos”, para
poder dividir mejor la información del formulario cuando éste muestra
demasiados campos. Estos marcos se crean con la pareja de etiquetas fieldset.
Esta etiqueta contiene una subetiqueta legend que es el título de ese marco. Un
ejemplo:
<fieldset>
<legend>Datos personales</legend>
<label for="nombre">Nombre</label>
<br>
<input type="text" name="nombre">
<br>
<label for="apellidos">Apellidos</label>
 <br>
<input type="text" name="apellidos">
<br>
<label for="dni">DNI</label>
<br>
<input type="text" name="dni" size="10" maxlength="9">
<br>
</fieldset>

que se vería así en el navegador:

3.3. Agrupar opciones en listas

La etiqueta select admite algunas opciones más para agrupar los elementos
que contiene en categorías, cuando hay muchos elementos que mostrar. Para
ello se utiliza la etiqueta optgroup, con un atributo label que da nombre a cada
categoría. Veamos un ejemplo y cómo se vería en el navegador:
<label for="programa">Programa seleccionado</label>
<br>
<select name="programa">
<optgroup label="Sistemas Operativos">
<option value="Windows">Windows</option>
<option value="Mac">Mac</option>
<option value="Linux" selected>Linux</option>
<option value="Otro">Otro</option>
</optgroup>
<optgroup label="Navegadores">
<option value="IE">Internet Explorer</option>
<option value="Firefox">Firefox</option>
...
Ejercicio 4:

Crea una página llamada formProducto.html con el siguiente formulario (más

el encabezado 1 con el texto “Información sobre el producto”, y un botón de
“Enviar” en la parte inferior):
ttps://nachoiborraies.github.io/htmlcss/md/es/02e.html

Formularios (1). HTML. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco.
www.mclibre.org

ttps://www.mclibre.org/consultar/htmlcss/html/html-formularios.html