TEMA 15

Formularios: opciones fundamentales y

novedades
Cualquier página HTML se puede enriquecer con formularios interactivos que inviten a sus
visitantes a enviar información: escribir texto, seleccionar opciones, confirmar con un
botón...

Sin embargo, estamos llegando a los límites de HTML, ya que es entonces necesario
analizar la información que el usuario ha introducido, y esto no se puede hacer en HTML.
Como veremos, el tratamiento de los resultados debe hacerse en otro lenguaje de
programación, como el PHP.

Crear un formulario
Para empezara insertar un formulario en la página HTML, necesitamos para comenzar con
la etiqueta <form> </form>. Esta es la principal etiqueta de formulario, permite indicar su
principio y el fin.

<p> texto antes del formulario </p>

<form>
<p> texto dentro del formulario </p>
</form>
<p> texto después del formulario </p>

Esa es la estructura básica, a partir de aquí, la cosa se complica. Supongamos que

nuestro visitante llega a escribir un comentario en el formulario, como por ejemplo un
mensaje que le gustaría publicar en su foro. Este mensaje debe ser enviado para que
usted lo reciba y que lo ponga a disposición de otros visitantes. Aquí surgen varias
cuestiones:

 ¿Cómo enviar el texto introducido por el visitante? ¿Por qué medios?

 Una vez que los datos se han enviado, ¿cómo deben ser tratados? ¿Te gustaría
recibir automáticamente un mensaje de correo electrónico con su contenido o
prefieres un programa que guarde estos datos en algún sitio y luego los muestre
en una página visible para todo el mundo?

Para dar respuesta a estos problemas, debe agregar dos atributos a la etiqueta <form>:

 method: Especifica los medios por los cuales los datos serán enviados
(respondemos a la primera cuestión antes planteada). Hay dos formas de enviar
los datos en la red:

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 1

 o method="get": se trata de un método suele ser bastante inadecuado
porque está limitado a 255 caracteres, y por lo tanto, solo sirve para
formularios sencillos. La particularidad es que la información será enviada
dentro de la url de la página (http://...). La mayoría de las veces, es
recomendable el siguiente método.
o method= post": este es el método preferido para enviar formularios, ya
que permite enviar una gran cantidad de información. Los datos
introducidos en el formulario no pasa a través de la barra de direcciones, si
no que se hace de forma oculta.
 action: Esta es la dirección de la página o programa que tratar la información
enviada (y así respondemos a la segunda cuestión antes planteada). Esta página
se encargará de enviarte un e-mail con el mensaje, si eso es lo que quieres, o
guardar el mensaje con todos los otros enviados en una base de datos.

Esto no se puede hacer en HTML y CSS, si no que generalmente usaremos otros

lenguajes de programación, por ejemplo, el PHP.

Vamos a completar la etiqueta <form> con los dos atributos que acabamos de ver.

Como method, en nuestro ejemplo, vamos a recurrir al post.

Para action, vamos a usar el nombre de una página ficticia en PHP (recibirdatos.php). Esta
es la página que se llama cuando el usuario hace clic en botón de envío del formulario.

<p> texto antes del formulario </p>

<form method="post" action="recibirdatos.php">
<p> texto dentro del formulario </p>
</form>
<p> texto después del formulario </p>

Por ahora, no sabemos lo que está pasando en la página recibirdatos.php. Como se

escapa del ámbito de nuestro curso, simplemente confiaremos en que funciona
correctamente.

Nuestra prioridad en este momento es encontrar HTML / CSS cómo insertar cuadros de
texto, botones y casillas de verificación en su página web. Esto es lo que vamos a ver
ahora.

Campos de formulario básicos

Vamos a revisar las diferentes etiquetas HTML para introducir texto en un formulario.

Ten en cuenta que hay dos áreas de texto diferente:

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 2

  El cuadro de texto de una sola línea: Como su nombre indica, no se puede
escribir una sola línea de texto. Ella utiliza para introducir textos breves, como un
nombre o un email.
 El cuadro de texto de varias líneas: este cuadro de texto le permite escribir una
gran cantidad de texto en varias líneas.

Cuadro de texto de una sola línea

Para insertar un cuadro de texto en una línea, vamos a utilizar la etiqueta <input />.

Verás esta etiqueta varias veces en el resto de este capítulo. En cada ocasión será es el
valor del atributo type el que le dará una utilidad u otra.

Para crear un cuadro de texto a una línea, debes escribir:

<input type="text" />

Todavía no es suficiente: hay que darle un nombre al cuadro de texto. Este nombre no
aparece en la página, pero necesitarás recordarlo más adelante. De hecho, esto permitirá
(por ejemplo, a PHP) reconocer de dónde proviene la información: se puede saber si este
texto es el nombre del visitante, si dicho texto es la contraseña que eligieron, etc. Como
puedes imaginar, no podemos repetir en el formulario campos con el mismo nombre,
puesto que esto originaría una confusión.

Para dar un nombre a un elemento de formulario, usamos el atributo name. En este

ejemplo se supone que pide al visitante ingresar su nombre de usuario:

<input type="text" name="nombre" />

Para practicar, vamos a tratar de crear un formulario muy básico con nuestro campo de
texto:

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

<p><input type="text" name="nombre" /></p>
</form>

Como de costumbre, te animamos a probar este código para observar el resultado.

Las etiquetas
El cuadro de texto funciona, pero tal y como está no resulta demasiado informativo. Si hay
varios, el usuario no sabrá que escribir en cada uno de ellos. Ese es precisamente el papel
de la etiqueta <label>:

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 3

 <form method="post" action="recibirdatos.php">
<p>
<label>Nombre propio</label> : <input type="text"
name="nombre">
</p>
</form>

Pero esto no es suficiente. Es necesario vincular la etiqueta al cuadro de texto.

Para ello, tenemos que dar un nombre al cuadro de texto, no con el atributo de name, si no
con el atributo ID (que se puede utilizar en todas las etiquetas).

Para enlazar la etiqueta para el campo, se le debe dar un atributo for que el mismo valor
que el ID del campo... Se ve mejor en un ejemplo:

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

<p>
<label for="nombre">Nombre propio</label>: <input
type="text" name="nombre" id="nombre">
</p>
</form>

Solo intentas hacer clic en el texto "Nombre propio" verás que el cursor se coloca
automáticamente en el cuadro de texto.

Algunos atributos adicionales

Puedes agregar otros atributos a la etiqueta <input /> para personalizar su funcionamiento:

 Podemos ampliar el campo con size.

 Puedes limitar el número de caracteres que se pueden introducir con maxlength.
 Podemos pre-llenar el campo con un valor predeterminado con value.
 Podemos dar una indicación de los contenidos con los que deben ser
cumplimentados el campo con placeholder. Esta indicación desaparecerá en
cuanto el visitante ha ya hecho clic en el interior del campo.

En el siguiente ejemplo, el cuadro de texto contiene una indicación del valor a introducir; el
campo es de 30 caracteres de largo, pero se puede escribir un máximo de 10 caracteres
en su interior:

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

<p>
<label for="nombre">Nombre Propio : </label>
<input type="text" name="nombre" id="nombre"
placeholder="Por ejemplo, Pedro" size="30" maxlength="10">
</p>
</form>

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 4

Area de Contraseña
Puedes fácilmente hacer que el cuadro de texto se comporte como un "cuadro de
contraseña", es decir, un área en la que no se ve en la pantalla con los caracteres
introducidos. Para crear este tipo de campo de entrada, utiliza el atributo type="password".

Vamos a completar nuestro formulario. Ahora solicita al visitante su nombre y contraseña:

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

<p>
<label for="nombre">Nombre Propio : </label>
<input type="text" name="nombre" id="nombre"
placeholder="Por ejemplo, Pedro" size="30" maxlength="10">
<br>
<label for="pass">Tu contraseña :</label>
<input type="password" name="pass" id="pass">
</p>
</form>

Cuadro de texto multilínea

Para crear un cuadro de texto de varias líneas, cambiaremos de etiquetas: usaremos
<textarea> y </textarea>.

Al igual que con cualquier otro elemento de formulario, hay que darle un nombre con el
namey el uso de una label que explica lo que hace.

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

<p>
<label for="sugerencias">Cómo crees que podemos mejorar
nuestra página?</label><br>
<textarea name="sugerencias" id="sugerencias"></textarea>
</p>

Como se puede ver, es un poco pequeña. Afortunadamente, puedes cambiar el tamaño de

<textarea> de dos maneras diferentes.

 CSS: tan sólo con aplicar las propiedades CSS a l width y height del <textarea>.
 Con atributos: añadiendo directamente los atributos rows y cols a la etiqueta
<textarea>. El primero indica el número de líneas de texto que se pueden visualizar
de forma simultánea, y el segundo número de columnas.

Como habrás visto, la etiqueta <textarea> se cierra después de ser abierta, cosa que no
ocurría con las otras etiquetas de formularios que habíamos visto hasta ahora. La razón es
que puede pre-llenar el <textarea> con un valor por defecto. En este caso, no usamos el

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 5

atributo de valor, si no que tan solo enumeramos el texto predeterminado entre la etiqueta
de apertura y la etiqueta de cierre Vamos a verlo

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

<p>
<label for="sugerencias">Cómo crees que podemos mejorar
nuestra página?</label><br>
<textarea name="sugerencias" id="sugerencias">Teniendo en
cuenta una cosa... Que este sitio necesite algún tipo de mejora,
¡por supuesto!
</textarea>
</p>
</form>

Campos de entrada enriquecidos

HTML5 añade muchas nuevas características relacionadas con los formularios. Nuevos
tipos de campos, de hecho, surgieron con esta versión. Sólo con dar el atributo type a la
etiqueta <input /> nos permitirá trabajar con los nuevos valores disponibles. Vamos a hacer
una visión general rápida.

Ante todo, ten en cuenta que los navegadores más antiguos no reconocerán estos campos
de entrada enriquecidos. En su lugar, las versiones más antiguas de navegadores
mostrarán un cuadro de texto de una línea sencilla (como si hubiéramos escrito
type="text". Esto no es ningún problema: los nuevos navegadores pueden disfrutar de las
últimas características, mientras los más viejos mostrarán un sustituto adecuado en forma
de cuadro de texto.

Por lo tanto, es muy interesante utilizar estos campos de entrada siempre que sea
necesario.

E-mail
Puede pedir que introduzcan una dirección de correo electrónico:

<input type="email" />

El campo aparecerá a priori idéntico al que ya conocíamos pero su explorador ahora sabe
que el usuario debe introducir una dirección de correo electrónico. Se puede presentar una
indicación si la dirección no es una dirección de correo válida, eso es lo que hace que
Firefox por ejemplo.

Además, aporta la ventaja de que algunos navegadores, como los navegadores móviles en
iPhone y Android, tienen un teclado adecuada para escribir el correo electrónico, lo que
hace más cómodo el cumplimentar estos campos.

URL

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 6

Con el tipo de url, puedes pedir para tomar una dirección web (que suele comenzar con
http://)

<input type="url" />

El mismo principio: el campo no se ve diferente en su equipo, pero ten en cuenta que

supone que el visitante debe introducir una dirección. Los navegadores móviles muestran
un teclado adecuado para la entrada de URL

Número de teléfono
Este campo se dedica a la entrada de los números de teléfono:

<input type="tel" />

IPhone, por ejemplo, muestra un teclado numérico cuando procede completar este campo.

Número
Este campo permite introducir un número entero:

<input type="number" />

El campo se mostrará generalmente con pequeñas flechas para cambiar el valor. Puedes
personalizar el funcionamiento del campo con los siguientes atributos:

 min: Valor mínimo permitido.

 max: valor máximo permitido.
 step: Si se especifica un paso 2, el campo sólo aceptará valores de 2 en 2 (por
ejemplo, 0, 2, 4, 6...).

Range
El tipo range se usa para seleccionar un número con un control deslizante (también
llamado control deslizante), como en la figura siguiente:

<input type="range" />

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 7

Puedes utilizar de nuevo los atributos min, max y step para restringir los valores
disponibles.

Color
Este campo le permite introducir un color:

<input type="color" />

En la práctica, permanece poco implementada por los navegadores actuales. No te

sorprendas si solo ves solamente un campo de texto clásico, aunque con el tiempo irá
siendo más frecuente.

Fecha
Existen diferentes tipos de selección de fecha campos:

 date: Para la fecha (05/08/1985, por ejemplo);

 time, para la hora (13:37, por ejemplo);
 week: para la semana;
 month: para el mes;
 datetime: para la fecha y la hora (con gestión de zona horaria)
 datetime-local para la fecha y la hora (sin gestión de zona horaria).

Ejemplo:

<input type="date" />

Buscador
Puedes crear un cuadro de búsqueda de esta manera:

<input type="search" />

El navegador que estemos utilizando decide cómo personalizar el cuadro de búsqueda.

Por lo general, se puede añadir una pequeña lupa al campo para significar que se trata de
un campo de investigación y posiblemente memorizará las últimas investigaciones del
visitante para mostrárselas cuando lo use de nuevo.

Los elementos de botón

HTML ofrece campos de formularios para escoger entre una serie de elementos. Estos
son elementos requieren al visitante a elegir entre una lista de posibilidades. Vamos a
revisarlos:

 casillas de verificación;
 botones de opción;

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 8

  menús desplegables.

Las casillas de verificación

Crear una casilla de verificación es muy fácil. Partimos del uso de la etiqueta <input />,
esta vez especificando el tipo de checkbox:

<input type="checkbox" name="opcion" />

Añadiremos un <label> para identificar la opción, y ya lo tenemos. Veamos un ejemplo

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

<p>
Elige tus frutas preferidas:<br>
<input type="checkbox" name="manzana" id="manzana"> <label
for="manzana"> Manzana</label><br>
<input type="checkbox" name="fresa" id="fresa"> <label
for="fresa">Fresa haché</label><br>
<input type="checkbox" name="cereza" id="cereza"> <label
for="cereza">Cereza</label><br>
<input type="checkbox" name="naranja" id="naranja"> <label
for="naranja"> Naranja </label>
</p>
</form>

Recuerda que debes dar un nombre diferente a cada casilla, esto permitirá identificar más
tarde cual escogió el visitante.

Por último, debes saber que puede hacer una casilla está activada de forma
predeterminada con atributo checked:

<input type="checkbox" name="naranja" id="naranja" checked /> <label

for="naranja"> Naranja </label>

Normalmente cualquier atributo tiene un valor. En este caso, sin embargo, no es necesario
agregar un valor: la presencia del atributo es suficiente para dejar claro al ordenador debe
ser marcada.

Botones de opción
Los botones de opción permiten hacer una elección (y sólo una) entre una lista de
posibilidades, a diferencia de lo que ocurría antes, que podíamos marcar tantas como
quisiéramos.

Son parecidas a las casillas de verificación, con una pequeña diferencia: deben ser
organizados en grupos. Las opciones de un mismo grupo tienen el mismo nombre (name),
pero cada opción deben tener un valor (value) diferente.

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 9

La etiqueta para el uso es siempre un <input />, esta vez con el valor radio en el atributo
type.

Lo veremos en un ejemplo:

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

<p>
Indicanos en que rango de edad te encuentras :<br>
<input type="radio" name="edad" value="menos15"
id="menos15"> <label for="menos15">Menos de 15 años</label><br>
<input type="radio" name="edad" value="entre15-25"
id="entre15-25"> <label for="entre15-25">Entre 15 y 25
años</label><br>
<input type="radio" name="edad" value="entre25-40"
id="entre25-40"> <label for="entre25-40">Entre 25-40
años</label><br>
<input type="radio" name="edad" value="mas40" id="mas40">
<label for="mas40">Mas de 40</label>
</p>
</form>

¿Por qué ponemos el mismo nombre para cada opción? Así que el navegador sabe a qué
"grupo" pertenece cada botón.

Si quitas el atributo name, verás es posible seleccionar todos los elementos del grupo de
de opciones, cosa que no queremos. Por ese motivo los vinculamos dándoles el mismo
nombre.

Si dispone de dos bloques de opciones diferentes, debemos dar un name único a cada
grupo, como sigue:

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

<p>
Indicanos en que rango de edad te encuentras:<br>
<input type="radio" name="edad" value="menos15"
id="menos15"> <label for="menos15">Menos de 15 años</label><br>
<input type="radio" name="edad" value="entre15-25"
id="entre15-25"> <label for="entre15-25">Entre 15 y 25
años</label><br>
<input type="radio" name="edad" value="entre25-40"
id="entre25-40"> <label for="entre25-40">Entre 25-40
años</label><br>
<input type="radio" name="edad" value="mas40" id="mas40">
<label for="mas40">Mas de 40</label>

</p>
<p>
Indica tu color preferido:<br>
<input type="radio" name="color" value="rojo" id="rojo">
<label for="rojo">rojo</label><br>

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 10

 <input type="radio" name="color" value="azul" id="azul">
<label for="azul">azul</label><br>
<input type="radio" name="color" value="verde"
id="verde"> <label for="verde">verde</label><br>
<input type="radio" name="color" value="amarillo"
id="amarillo"> <label for="amarillo">amarillo</label>
</p>
</form>

El atributo checked está de nuevo disponible para escoger un valor predeterminado.

Listas desplegables
Las listas desplegables son otra manera elegante de hacer una selección entre varias
alternativas. La operación es un poco diferente. Vamos a utilizar la etiqueta <select>
</select> que indica el inicio y el final de la lista. A esta se añade el atributo name para dar
un nombre a la lista.

Luego, dentro de la <select> </select>, colocaremos varias etiquetas <option> </option>

(uno por cada opción). Debemos añadir el atributo valor a cada una para luego ser
capaces de identificar lo que el visitante ha elegido.

Un ejemplo de uso:

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

<p>
<label for="pais">¿En qué país vives?<br>
<select name="pais" id="pais">
<option value="francia">Francia</option>
<option value="España">España</option>
<option value="Italia">Italia</option>
<option value="reino-unido">Reino Unido</option>
<option value="canada">Canada</option>
<option value="estados-unidos">Estados Unidos</option>
<option value="china">China</option>
<option value="japon">Japon</option>
</select>
</p>
</form></p>

Aquí puedes ver el resultado final:

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 11

Si desea seleccionar una opción por defecto, utiliza el atributo selected:

<option value="canada" selected>Canada</option>

También puedes agrupar las opciones con la etiqueta <optgroup> </optgroup>. En

nuestro ejemplo, podríamos agrupar los países por continentes.

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

<p>
<label for="pais">¿En qué país vives?<br>
<select name="pais" id="pais">
<optgroup label="Europa">
<option value="francia">Francia</option>
<option value="España">España</option>
<option value="Italia">Italia</option>
<option value="reino-unido">Reino Unido</option>
</optgroup>
<optgroup label="America">
<option value="canada">Canada</option>
<option value="estados-unidos">Estados Unidos</option>
</optgroup>
<optgroup label="Asia">
<option value="china">China</option>
<option value="japon">Japon</option>
</optgroup>
</select>
</p>
</form>

De esta forma, un listado extenso puede quedar más ordenado. En nuestro caso, los
continentes no pueden ser elegidos, solo sirven para agrupar los valores disponibles.

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 12

Ultimos retoques y envio del formulario
Ya casi estamos terminando. Vamos a ver cómo mejorar nuestro formulario con algunas
funciones recientes (como la validación) y vamos a agregar el botón para enviar el
formulario.

Campos de grupo
Si el formulario crece y tiene una gran cantidad de campos, puede ser útil agrupar varias
etiquetas dentro <fieldset>. Cada <fieldset> puede contener una etiqueta identificativa con
la etiqueta <legend>. Mira este ejemplo:

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

<fieldset>
<legend>Datos Personales</legend><!-- Título del fieldset -->
<label for="nombre">Cual es tu nombre?</label>
<input type="text" name="nombre" id="nombre">
<br>
<label for="apellido">Cual es tu apellido?</label>
<input type="text" name="apellido" id="apellido">
<br>
<label for="email">Cual es tu e-mail ?</label>
<input type="email" name="email" id="email">
<br>
</fieldset>
<fieldset>
<legend>Datos Privados</legend><!-- Título del fieldset -->

<p>
Indicanos tu estado civil:

<input type="radio" name="ecivil" value="casado"

id="casado"> <label for="casado">casado</label>
<input type="radio" name="ecivil" value="soltero"
id="soltero"> <label for="soltero">soltero</label>
<input type="radio" name="ecivil" value="otro" id="otro">
<label for="otro">otro</label>

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 13

 <input type="radio" name="ecivil" value="nosabe"
id="nosabe"> <label for="nosabe">no sabe, no contesta...</label>
</p>

<p>
<label for="comentarios">Comentarios:</label>
<textarea name="comentarios" id="comentarios" cols="40"
rows="4"></textarea>
</p>
</fieldset>

En la imagen puedes ver el resultado final:

Seleccionar automáticamente un campo

Puedes colocar automáticamente el cursor en uno de los campos del formulario con
el atributo autofocus. Una vez que el visitante carga la página, el cursor se moverá a este
campo.

Por ejemplo, el cursor está en el campo por defecto en el campo nombre:

<input type="text" name="nombre" id="nombre" autofocus />

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 14

Hacer un campo obligatorio
Puedes hacer un campo es obligatorio dándole el atributo required.

<input type="text" name="nombre" id="nombre" required />

El navegador avisa al visitante si el campo está vacio, de que debe ser llenado. Los
navegadores más antiguos que no reconocen este atributo, de manera que enviar el
contenido del formulario sin verificación. Para estos navegadores, será necesario para
completar la verificación, por ejemplo, con scripts de JavaScript.

El botón enviar
Para finalizar, vamos a crear el botón Enviar. Una vez más, la etiqueta <input /> será la
que utilicemos. Está disponible en cuatro versiones:

 type="submit": sirve para enviar el formulario. Este es el que vas a utilizar con más
frecuencia. Los visitantes serán dirigidos a la página indicada en el atributo action
formulario.
 type="reset": borra todo el formulario sin enviarlo.
 type="imagen": botón equivalente submit, pero en esta ocasión se presenta en
forma de imagen. Agregaremos el atributo src para especificar la dirección URL de
la imagen que deseamos mostrar.
 tipo= button": botón genérico, que no tendrá (por defecto) ningún efecto. En
general, este botón se utiliza para gestionar programas en JavaScript y realizar
acciones en la página. No lo vamos a utilizar aquí.

También puedes cambiar el texto que se muestra en el botón con el atributo value. Para
crear un botón de envío escribiríamos, por ejemplo:

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

Esto nos da la figura siguiente.

Al hacer clic en el botón "Enviar", el formulario nos llevará a la página indicada en el

atributo action del formulario. Recuerda, imaginamos para nuestros una página ficticia:
enviardatos.php

El problema es que esta página que procesa el formulario no se puede crear sólo en
HTML. Es necesario aprender un nuevo idioma, como por ejemplo, el PHP, para poder
"recuperar" la información introducida y decidir qué hacer con ella. Por supuesto, ¡también
tenemos cursos de PHP a tu disposición!

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 15 | 15