Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Todo sobre formularios HTML con ejemplos

Categorías:  Autor: Diego C Martin 
Apuntes de HTML

En este artículo vamos a ver todo lo necesario para crear formularios en HTML y en la parte final encontrarás los nuevos controles y elementos para formularios que incorpora HTML5.

Lo básico sobre formularios HTML

Un formulario sirve para obtener datos que el usuario de la web introduce.

Es un medio para obtener comentarios sobre el sitio, vender productos o servicios, recolectar información, etc, de forma ordenada y estructurada.

Ejemplos de formularios serían desde los típicos formularios de contacto de cualquier página web, hasta el carrito de la compra de una tienda virtual o el proceso de compra de billetes de avión.

Cómo hacer un formulario HTML

Veamos la sintaxis básica para crear un formulario donde se solicite el nombre, apellidos y edad.

Para crear un formulario debemos utilizar la etiqueta form, que tiene cláusula de comienzo y fin. Dentro de la etiqueta form emplearemos otros elementos para crear botones, campos de texto, cuadros de verificación, botones de opción, etc.

Para empezar, en la apertura de la etiqueta form debemos definir los atributos action y method:

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

Method puede almacenar únicamente dos valores, post get, los cuales definen el método de envío de la información introducida por el usuario.

Normalmente un formulario se envía mediante post, con el que  los datos se envían con el cuerpo del formulario.

En caso de utilizar get, los datos se envían en la cabecera de la petición de la página. Utilizando el método get estamos limitados en la cantidad de datos a enviar, no así con el método post.

La propiedad action es una URL en la que se indica el servidor o archivo al que se enviará a información.

En este punto hay que tener en cuenta que HTML se ocupa simplemente de “pintar” el formulario en la web. Será un lenguaje de programación como PHP el que se ocupe del tratamiento de los datos que se envían.

Ahora veamos el cuadro de texto donde se introduce el nombre:

Nombre:<br>
<input type="text" name="nombre" id="nombre" value="John">

El mensaje “Nombre:” es un texto fijo al que le agregamos un
para que el cuadro de texto aparezca en la siguiente línea.

La etiqueta input permite definir un cuadro de texto si le asignamos a la propiedad type el valor “text”.

Todo cuadro de texto debe usar el atributo name con un nombre para el cuadro de texto. Este será un dato fundamental para poder recuperar el dato una vez se envíe el formulario al el servidor, por ejemplo, mediante PHP.

El atributo value está mostrando un texto pre cargado en el cuadro de texto, que el usuario podrá modificar.

También podemos usar el atributo placeholder para indicar un valor de ayuda que aparece en un color tenue y desaparece automáticamente una vez que el usuario comienza a escribir en el cuadro de texto.

<input type="text" name="nombre" id="nombre" placeholder="John">

Botones de un formulario HTML – input type=”button”

Podemos crear botones mediante el elemento input asignando en el atributo type el valor “button“.

Aunque no podemos hacerla funcionar sin un lenguaje de programación como JavaScript, podemos crear una página que lo muestre.

Ejemplo de calculadora HTML con formulario:

Adicionalmente, modificando el valor del atributo type, podemos hacer uso de otros tipos de botones.

file: el usuario podrá seleccionar un archivo para adjuntarlo al formulario.

submit: sirve para enviar los datos del formulario al servidor. Con el atributo value definimos el texto del botón.

image: botón con aspecto de la imagen definida mediante el atributo src. La funcionalidad es la misma que la de submit.

reset: para limpiar los datos del formulario.

<head>
	<title>Botones de formulario</title>
	<meta charset="utf-8">
</head>
<body>
<div id="contenedor">
	<h2 id="encabezado">Botones de formulario</h2>
	<form id="formulario1" name="formulario1" method="post"
         action="data.php">
		Botón tipo <em>button</em>:<br>
		<input type="button" name="btn_generico" 
                 id="btn_generico" value="Aceptar"><br><br>
		Botón tipo <em>file</em>:<br>
		<input type="file" name="btn_fichero" 
                 id="btn_fichero"><br><br>
		Botón tipo <em>image</em>:<br>
		<input type="image" name="btn_imagen" 
                 id="btn_imagen" src="images/ok.png"><br><br>
		Botón tipo <em>reset</em>:<br>
		<input type="reset" name="btn_reset" 
                 id="btn_reset" value="Limpiar formulario"><br><br>
		Botón tipo <em>submit</em>:<br>
		<input type="submit" name="btn_submit" 
                 id="btn_submit" value="Enviar"><br><br>
	</form>
</div>	
</body>
</html>

Existe otro valor que podemos utilizar en el atributo type de la etiqueta input que se llama hidden y que sirve para almacenar datos sin que se muestren al usuario (ocultos). tiene los atributos name value:

<input type="hidden" name="campo_oculto" value="Xx">

Este campo tiene sentido, por ejemplo, si realizamos un cálculo con un lenguaje de programación como JS y queremos guardarlo para que se envíe junto al formulario, pero no que se muestre al usuario.

Cuadro de contraseña en formulario HTML – input type=”password”

Podemos crear un campo para introducción de contraseña mediante input con el valor password en el atributo type.

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="data.php" method="post">
Nombre: 
<input type="text" name="nombre" size="20">
<br>
Contraseña: 
<input type="password" name="clave" size="12">
<br>
<input type="submit" value="Enviar">
<input type="reset" value="Limpiar">
</form>
</body>
</html>

La sintaxis nueva para definir un cuadro de texto para la contraseña:

<input type="password" name="clave" size="12">

Utilizamos el mismo elemento input, pero inicializamos la propiedad type con el valor “password”, con esto logramos que cuando el visitante introduzca la contraseña, se visualicen asteriscos en lugar de los caracteres.

input type=”reset” para limpiar el formulario

Para definir un botón que permita borrar todos los datos introducidos hasta el momento en el formulario HTML:

<input type="reset" value="borrar">

Otra cuestión a tener en cuenta es que la propiedad name de cada elemento input debe ser única.

También vemos en el ejemplo anterior que se especifica un tamaño a los input. Esto es el número de caracteres que pueden aceptar y el valor predefinido es 20, aunque en realidad no se emplea demasiado ya que mediante CSS podemos modificar cómodamente el tamaño por otras vías.

Áreas de texto en formularios para que el usuario te cuente sus penas

El elemento textarea permite la introducción de varias líneas de texto a diferencia del cuadro de texto.

En el ejemplo a continuación se especifica un tamaño y un texto inicial, pero ninguna de las dos cosas son en absoluto obligatorias.

<html>
<head>
	<title>Área de texto</title>
	<meta charset="utf-8">
</head>
<body>
<div id="contenedor">
	<form id="formulario1" name="formulario1" 
         method="post" action="data.php">
	<h3>área de texto</h3>
	<textarea rows="14" cols="50">Esto es un
         texto pre cargado dentro del área de texto 
	</textarea>
	</form>
</div>	
</body>
</html>

Como se puede observar, la sintaxis para definir un área de texto es distinta. En este caso no usamos un input, es otra etiqueta que requiere cláusula de comienzo y fin.

Con los atributos rows y cols se le asignan filas y columnas de espacio para escribir.

Cuadros de verificación en formualrios HTML – input type=”checkbox”

Checkbox es otro control de formulario que sirve para incluir casillas de verificación que puede tomar dos valores, seleccionado o no seleccionado.

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="data.php" method="post">
Introduzca su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione los lenguajes que conoce:
<br>
<input type="checkbox" name="java">Java<br>
<input type="checkbox" name="cmasmas">C++<br>
<input type="checkbox" name="c">C<br>
<input type="checkbox" name="csharp">C#<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Como se puede observar, si queremos que aparezca un mensaje junto al checkbox lo agregamos a continuación del input.

Botones de opción en el formulario – input type=”radio”

Lo usamos cuando tenemos un conjunto de opciones, pero sólo una puede ser seleccionada.

Para crearlo también utilizamos el elemento input inicializando type con el valor “radio“:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="data.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione el máximo nivel de estudios que tiene:
<br>
<input type="radio" name="estudios" value="1">Sin 
estudios<br>
<input type="radio" name="estudios" value="2">Primaria<br>
<input type="radio" name="estudios" value="3">Secundaria<br>
<input type="radio" name="estudios" value="4">Universidad<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Como podemos observar, todos tienen el mismo valor en la propiedad name. Con esto se logra que cuando seleccionamos uno, se deseleccione el seleccionado previamente, para que sólo uno quede seleccionado.

El valor que se envía al servidor es el dato almacenado en la propiedad value.

Si queremos disponer varios grupos de input de este tipo, debemos definir la propiedad name con nombres distintos para cada grupo.

Listas desplegables en formularios – select

Permite al usuario seleccionar uno o varios valores de una lista desplegable:

Como se puede observar es una etiqueta con cláusula de apertura y cierre que contiene a las opciones de la lista en otra etiqueta option.

Veamos los atributos que aparecen:

name: nombre de la lista, imprescindible para hacer referencia a la lista.

disabled: para inhabilitar la funcionalidad de la lista, al igual que en los cuadros de texto.

multiple: permite seleccionar múltiples valores en la lista.

size: se suele usar junto con multiple para mostrar directamente todas las opciones desplegadas. Por defecto tiene el valor 1.

También podemos agrupar opciones con la etiqueta y su respectiva cláusula de cierre dentro de select para crear subgrupos:

Etiquetas y agrupamiento de secciones de formularios HTML

Existen etiquetas de formulario que nos permiten organizar y jerarquizar su información: labelfieldset legend.

Label: nos permite asociar un título a un elemento del formulario. Normalmente la usamos con cuadros de texto, áreas de texto y listas desplegables. Dispone del atributo for, en el que indicamos el id del elemento referenciado.

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

Cuando el usuario hace clic sobre la etiqueta, es como si lo hiciera sobre el elemento.

Fieldset tiene el objetivo de contener y poner en un borde a un conjunto de controles de un formulario.

Debemos encerrar todos los controles a agrupar entre las etiquetas de apertura y cierre <fieldset> y </fieldset> respectivamente. Además, para agregar un título a este recuadro podemos agregar otro elemento HTML llamado legend.

<!DOCTYPE html>
<html>
<head>
	<title>Encuesta</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<div id="contenedor">
	<h2 id="encabezado">Cuestionario de Cine</h2>
	<form id="formulario1" name="formulario1" method="post" action="data.php">
  	<fieldset id="datos_personales">
	<legend>Datos personales</legend>
		<label for="nombre">Nombre:</label><br>
		<input type="text" name="nombre" id="nombre"><br>
		<label for="apellidos">Apellidos:</label><br>
		<input type="text" name="apellidos" id="apellidos"><br>
		<label for="dni">DNI:</label><br>
		<input type="text" name="dni" id="dni" maxlength="9"><br>
		<label for="edad">Edad:</label><br>
		<input type="text" name="edad" id="edad" size="2" maxlength="2"><br>
		<label for="sexo">Sexo:</label><br>
		<select id="sexo" name="sexo">
		<option value="X" selected="selected">...</option>
		<option value="M">Másculino</option>
		<option value="F">Femenino</option>
		</select>
	</fieldset>
	<fieldset id="mejor_pelicula">
	<legend>Mejor Película</legend>
		<input type="radio" name="pelicula" value="1">El Padrino<br>
		<input type="radio" name="pelicula" value="2" checked="checked">Crepúsculo<br>
		<input type="radio" name="pelicula" value="3">Los odiosos 8<br>
		<input type="radio" name="pelicula" value="4">Anatomía de un asesinato
	</fieldset>
	<fieldset id="grupo_opinion">
		<legend>Tu opinión</legend>
		<textarea id="opinion" name="opinion" rows="10" cols="50"></textarea>
	</fieldset>
	<br>
	<input type="reset" value="Borrar formulario">    <input type="submit" value="Enviar">
  </form>
</div>	
</body>
</html>

Nuevos controles y elementos de formulario en HTML5

Nuevos controles de formulario HTML5

En HTML5 disponemos de nuevos controles de formulario para la etiqueta input, es decir, que para usarlos debemos usarlos como valor del atributo type:

color: para seleccionar un color de una paleta de colores.

<input type="color" name="escogecolor">

datetime: como date pero incluyendo hora y zona horaria.

datetime-local: como la anterior pero sin zona horaria. Esta es de uso más agradable para el usuario que la anterior, ya que aparece un calendario para seleccionar la fecha.

email: campo de texto específico para email que además valida automáticamente la estructura.

month: como date, pero para seleccionar meses.

number: campo de texto específico para números que además valida automáticamente. Adicionalmente, podemos agregar los atributos min y max para permitir sólo la entrada de valores dentro del intervalo.

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

search: para cuadros de búsqueda.

tel: para números de teléfono.

time: para selección de hora.

url: para introducir URL. Valida automáticamente.

week: para escoger semanas dentro de un calendario.

Nuevas etiquetas para formularios en HTML5

<datalist>

Nuevo elemento para crear cuadros de texto con autocompletar. Funciona parecido al select, salvo que introduciremos las opciones disponibles mediante la etiqueta option y un atributo value para indicar la opción.

<form name="formulario" action="data.php" method="post">
  <input type="text" list="pelis">
  <datalist id="pelis">
    <option value="Lo que el viento se llevó">
    <option value="King Kong">
    <option value="George de la jungla">
    <option value="4 bodas y un funeral">
  </datalist>
</form>

En esta página de CSS Tricks puedes ver algunas combinaciones con datalist y otros input. (English).

Y aquí una lista con las provincias españolas en forma de lista desplegable con select, pero la podemos transformar fácilmente en un datalist y usar la función de autocompletar.

<keygen>

Sirve para hacer envíos de datos con encriptación y generar conexiones seguras con el servidor. El campo muestra un lista desplegable para seleccionar el grado de encriptación de los datos.

<keygen name="encriptacion">

<output>

Muestra el resultado de una operación matemática especificada en un script que se especifica en el atributo oninput. No tiene mucho sentido sin emplear JavaScript.

<form oninput="suma.value= parseInt(campo1.value) + parseInt(campo2.value)">
<input type="number" id="campo1" value="">
+
<input type="number" id="campo2" value="">
<output name="suma" for="campo1 campo2"></output>
</form>

Validación

Ya hemos visto algunos campos de introducción que implican validación. Por ejemplo, email o url se asegurarán de que introduzcamos respectivamente un email o una url gramaticalmente correctos. Veamos técnicas adicionales con las que asegurar la integridad de nuestros formularios:

En primer lugar, podemos hacer que la introducción de datos en un campo sea obligatoria con el atributo required.

Podemos usarlo como un atributo normal o con sintaxis abreviada.

<input type="text" required="required">
<input type="text" required>

También podemos impedir o permitir valores mediante expresiones regulares en el atributo pattern.

Si por ejemplo queremos almacenar matrículas de vehículos podríamos especificar lo siguiente:

<input type="text" pattern:"[0-9] {4} - [A-Z] {3}">

La expresión anterior especifica que se deben introducir obligatoriamente 4 números, un guión – y tres letras mayúsculas. Si no es así, el navegador mostrará un error.

Más información en W3 Schools  y expresiones típicas en HTML5 Pattern.

Más sobre expresiones regulares.

Resaltado, autocompletar e impedir copiado en formularios HTML

Con el atributo autofocus podemos resaltar el campo inicial por el que el usuario debería comenzar a rellenar el formulario. Podemos usarlo en modo abreviado y no se recomienda usarlo más de una vez por página:

<input type="text" autofocus>

Por defecto los navagadores suelen usar el atributo autocompletar con el valor on. autocomplete=”on”. Esto sirve para que el usuario vea una lista de valores previamente introducidos en campos con el mismo nombre. Podemos desactivarlo con el valor off.

También podemos impedir el copiado y pegado del portapapeles mediante los atributos:

oncopy="return false" onpaste="return false"
<input type="text" oncopy="return false" onpaste="return false">

Puedes ver ejemplos de estilado de formularios con CSS aquí.

Echa un vistazo al Curso Online de HTML5

Aquí puedes ver algunas clases del Curso de HTML5 gratis.

img-7

2 comments on “Todo sobre formularios HTML con ejemplos”

  1. Hola Diego, es posible nos mandes la configuracion en Html de este mismo formulario y como hacer que llegue a nuesto mail, este mismo formato que relleno esta bien para mi blogger, puedes mandar yo copiar pegar y modificar lo justo ?

    máximo se podria añadir el botos de no soy un robot y otro que haceotas ciertas politicas

    Gracias de nuevo Diego

    1. Hola Vicente, como se explica al principio del artículo, estos formularios sólo tienen en cuenta la parte front, es decir, que se pintan en la web pero no gestionan el envío. Para ello necesitas un lenguaje de servidor o si se trata de un CMS como Wordress, algún plugin.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram