Formularios HTML
¿Qué son los formularios en HTML?
Los formularios HTML son elementos de las páginas web que nos sirven para recuperar información del
usuario y enviarla al servidor para que pueda ser procesada.
La sintaxis para definir un formulario será mediante el elemento form:
<form>...</form>
Campos de Formularios
Dentro de los campos que podemos incluir en formularios HTML encontramos los siguientes:
Campos de entrada de datos
o Campos de textos
o Contraseñas
o Checkbox
o Radios
o Botones de envío
o Botones de borrado
o Ficheros
o Campos Ocultos
o Imágenes
o Botones
Áreas de texto
Combos de selección
Campos de entrada de datos
Son los elementos básicos de un formulario ya que son los que nos permiten recuperar información del
usuario de diferentes formas.
El elemento que representa los campos de entrada de datos es input. La estructura básica de un
campo de entrada es la siguiente:
<input type="tipo" id="identificador" size="tamaño"
name="nombre" value="texto por defecto"/>
Si vemos los atributos que tiene el elemento input nos encontramos los siguientes:
type, indica el tipo de campo de entrada de datos que vamos a utilizar. Dependiendo del tipo
que indiquemos obtendremos un resultado u otro. Los valores que puede tener el atributo
type son: “text”, “password”, “checkbox”, “radio”, “submit”, “reset”, “file”, “hidden”, “image”
y “button”.
id, es el identificador del campo. Es importante ya que será el nombre por el cual podremos
identificar, de forma unívoca, al campo.
size, será el tamaño del campo. Es decir, el número de caracteres que podríamos insertar en el
campo de texto.
name, es el nombre del campo el cual se enviará desde el formulario al servidor.
value, será el valor por defecto que tendrá el campo de texto y que le aparecerá al usuario al
cargar el formulario.
Cuando enviemos el formulario al servidor, se coge el la combinación name=value para ser enviada.
Campos de texto
El campo de texto, como bien indica su nombre, es el que nos permite insertar texto en un formulario.
El usuario podrá insertar texto visible sobre el campo.
En este caso el tipo de elemento input que utilizaremos será “text”. Así, para definir un campo de texto
lo haremos de la siguiente forma:
<input type="text" id="identificador" size="tamaño"
name="nombre" value="texto por defecto"/>
De esta forma si queremos crear un campo de texto para poder insertar 70 caracteres que contenga un
email, lo definiremos de la siguiente forma:
<input type="text" id="email" name="email"
size="70" value="usuario@[Link]"/>
Contraseñas
Cuando un usuario inserte una contraseña dentro de un formulario necesitaremos, casi seguro, que el
valor de la contraseña no aparezca y que por el contrario aparezcan caracteres como asteriscos.
Para insertar un campo que acepte contraseñas dentro de un formulario vamos a utilizar un tipo
“password” dentro del elemento input.
<input type="password" id="identificador" size="tamaño" name="nombre"/>
En este caso, aunque podemos poner un valor por defecto, si bien, no parece tener mucho sentido. Si
queremos definir un campo que acepte contraseñas de 20 caracteres lo codificaremos de la siguiente
forma:
<input type="password" id="clave" name="clave" size="20"/>
Checkbox
Un checkbox nos permite capturar un dato del usuario mediante un elemento de check. El check
puede tener dos valores, seleccionado o no seleccionado. El tipo del elemento input que utilizaremos
será “checkbox”. Así lo definiremos de la siguiente forma:
<input type="checkbox" id="identificador" name="nombre"/>
En el caso del checkbox no tienen sentido el atributo tamaño ni el valor por defecto. Ya que,
recordemos que solo podemos tener el check seleccionado o no. Pero lo que sí podemos hacer es
generar un checkbox que esta preseleccionado. Para ello utilizamos el atributo checked.
<input type="checkbox" id="identificador" name="nombre" checked="checked"/>
Pero ¿dónde está el texto que acompaña al checkbox? Realmente el checkbox no tiene definido que
acompañe al checkbox. Si no que hay que añadir el texto directamente al lado del checkbox.
<input type="checkbox" id="identificador" name="nombre" checked="checked"/>
Texto del checkbox
Aunque más adelante vamos a ver una forma más correcta de asociar el texto al checkbox.
Así, si queremos crear un checkbox que nos pregunte si estamos de acuerdo con unas condiciones
podríamos codificarlo de la siguiente forma:
<input type="checkbox" id="condiciones" name="condiciones"/>Está de acuerdo
con las condiciones explicadas más arriba.
Los checkbox suelen ir en grupos para seleccionar varias opciones. Por ejemplo podríamos tener el
siguiente código con el que podamos seleccionar qué lenguaje de programación queremos aprender.
<input type="checkbox" name="lenguaje" value="html">HTML
<input type="checkbox" name="lenguaje" value="javascript">Javascript
<input type="checkbox" name="lenguaje" value="css">CSS
<input type="checkbox" name="lenguaje" value="xml">XML
Hasta aki
Radios
Con los elementos de radio podemos ofrecer un conjunto de opciones al usuario de tal manera que
solo pueda elegir una de ellas. El tipo de elemento input que utilizamos es “radio”.
La sintaxis que seguiremos en los elementos input de tipo radio será la siguiente:
<input type="radio" id="identificador" value="valor" name="nombre"/>
En el caso de los elementos radio toma un papel principal el atributo name. Ya que para poder
agrupar opciones deberemos de tener el mismo valor de atributo name.
Así, si queremos crear un grupo de radios para que nos elija una edad le podremos crear de la siguiente
forma:
<input type="radio" id="menos18" value="menos18" name="edad"/>Menos de 18
<input type="radio" id="18a30" value="18a30" name="edad"/>18 a 30
<input type="radio" id="31a50" value="31a50" name="edad"/>31 a 50
<input type="radio" id="mas50" value="mas50" name="edad"/>Más de 50
Al igual que sucedía con los campos de entrada de tipo check, podemos cargar campos de tipo radio en
nuestro formulario con un elemento preseleccionado. Para ello volvemos a recurrir al atributo
checked.
<input type="radio" id="identificador" value="valor" name="nombre"
checked="checked"/>
Ficheros
Cuando diseñemos un formulario es posible que necesitemos enviar un fichero de datos al servidor. En
este caso el campo de entrada de datos nos tiene que dar la posibilidad de acceder al sistema de
fichero del dispositivo para poder seleccionar uno.
En este caso vamos a necesitar un campo de entrada de tipo “file”. La sintaxis de los campos de
entrada para tipos file sería:
<input type="file" id="identificador" value="valor" name="nombre"/>
Campos Ocultos
Otra de las opciones que nos podemos encontrar dentro de los formularios es con la necesidad de
enviar información oculta. Es decir, información que tiene que ir anexa al formulario pero que no
necesita ser introducida por el usuario. Para ello tenemos la posibilidad de crear campos de datos
ocultos.
La sintaxis para los campos de entrada ocultos es:
<input type="hidden" id="identificador" value="valor" name="nombre"/>
En estos casos el campo valor siempre va relleno, ya que no hay otra forma de que el usuario le asigne
un valor.
Imágenes
Uno de los tipos de elementos input es el tipo “image”. Mediante el tipo “image” podemos crear un
botón de envío que sea una imágen. La imagen se cargará mediante el atributo src. La estructura
para elementos input de este tipo es:
<input type="image" src="url-image" name="nombre" alt="texto-alternativo"/>
Como sucede cada vez que manipulamos imágenes hay que rellenar el atributo alt con un texto
alternativo por motivos de accesibilidad.
Cuando pulsemos sobre la imagen se enviará el formulario, además se enviarán dos
atributos name.x y name.y con los datos de las coordenadas x,y en las que se pulsó sobre la imagen.
Áreas de texto
Un elemento algo más avanzado que el campo de entrada de datos es el área de texto. Mediante un
área de texto tenemos la capacidad de que el usuario inserte una gran cantidad de datos y además que
esos datos puedan estar en diferentes líneas.
Para poder insertar un área de texto en nuestro formulario utilizamos el elemento textarea. La sintaxis
del elemento textarea será la siguiente:
<textarea rows="numerofilas" cols="numerocolumnas"
name="nombre"></textarea>
A diferencia del elemento input, el textarea tiene una etiqueta de inicio y una de fin.
Los atributos que nos encontramos en un textarea son:
rows, indica el número de filas que tiene el área de texto.
cols, indica el número de columnas que tiene el área de texto.
name, al igual que sucede con otros elementos del formulario, name contiene el nombre del
campo, el cual será enviado al servidor para ser procesado.
De esta forma, si queremos crear un área de texto de 20 filas por 100 columnas en el que un usuario
pueda insertar un comentario tendríamos el siguiente código:
<textarea rows="20" cols="100" name="comentario"></textarea>
Si queremos que el área de texto vaya con un valor por defecto, tendremos que añadir dicho contenido
entre las etiquetas de textarea.
<textarea rows="20" cols="100" name="comentario">Contenido de
comentario...</textarea>
Combos de opciones
Otro elemento que podemos insertar dentro de un formulario es un combo de opciones. Es decir, un
elemento en el que el usuario pueda elegir un elemento o varios de una lista.
El elemento que nos permite insertar un combo de opciones es select. La sintaxis básica de
un elemento select es:
<select name="nombre" size="valoresvisibles" multiple="multiple">
</select>
De los valores que nos encontramos en el elemento select destacamos:
name, que al igual que en anteriores casos sirve para dar un nombre al campo que se enviará
al servidor.
size, indica el número de opciones que aparecen visibles por defecto. En el caso de que haya
más opciones que las elegidas por defecto lo que nos aparecerá será un scroll para poder
localizar todas.
multiple, este atributo nos servirá para poder elegir varias de las opciones. Es decir, para tener
una elección múltiple.
Como hemos visto el elemento select sólo demarca el combo de las opciones. Para definir cada una de
las opciones tenemos el elemento option.
La sintaxis básica del elemento option es la siguiente:
<option label="etiqueta" value="valor"></option>
Dónde el atributo label indica el texto que aparecerá para poder ser seleccionado en el combo
y value el valor realmente de ese item. En el caso de que no pongamos el atributo label o el atributo
value, el valor que cogerán dichos atributos será el texto que encontremos entre los elementos de
option.
Por lo tanto, si juntamos la sintaxis del elemento select y el elemento option tenemos la siguiente
codificación:
<select name="nombre" size="valoresvisibles" multiple="multiple">
<option label="etiqueta" value="valor"></option>
</select>
Si queremos crear un combo de opciones donde podamos elegir un equipo de fútbol tendríamos el
siguiente código:
<select>
<option>Atlético de Madrid</option>
<option>Real Betis</option>
<option>FC. Barcelona</option>
<option>Real Madrid</option>
<option>Zaragoza</option>
</select>
Si queremos que una de las opciones del combo vaya marcada recurriremos al atributo selected. Así,
en nuestro ejemplo si marcamos como predefinido el equipo del Betis tendríamos el siguiente código:
<select>
<option>Atletico de Madrid</option>
<option selected="selected">Betis</option>
<option>FC. Barcelona</option>
<option>Real Madrid</option>
<option>Zaragoza</option>
</select>
Otra de las cosas que podemos realizar dentro de un combo es agrupar opciones. Si la lista de
opciones es muy grande podemos utilizar el elemento optgroup.
La sintaxis del elemento optgroup es la siguiente:
<optgroup label="etiqueta"></optgroup>
Dentro del elemento optgroup encontraremos todos los elementos option que queramos agrupar.
Si por ejemplo, queremos ofrecer un combo de ciudades y las queremos agrupar por continentes,
tendríamos el siguiente código:
<select name="ciudad">
<optgroup label="Europa">
<option>Madrid</option>
<option>Londres</option>
<option>Paris</option>
</optgroup>
<optgroup label="Suramerica">
<option>Santiago</option>
<option>Sao Paulo</option>
<option>Lima</option>
<option>Bogota</option>
</optgroup>
<optgroup label="Africa">
<option>Casablanca</option>
<option>Ciudad del Cabo</option>
</optgroup>
</select>
Botones
Una vez que hemos insertado campos de texto en nuestro formulario es hora de insertar
botones. Mediante los botones podremos realizar operaciones de envío del formulario, de
manipulación de datos, borrado,…
Existen dos formas de insertar botones dentro de un formulario: el elemento input y el elemento
button. La primera es recurre nuevamente al elemento input que hemos visto anteriormente para los
campos de texto.
La sintaxis para un botón mediante un elemento input será:
<input type="button" value="TextoBotón"/>
Si bien, este botón no hace nada por sí solo y tendríamos que darle un comportamiento vía Javascript
para que el botón tuviera funcionalidad.
Botones de envío
En el caso del elemento input podemos poner botones de otras dos formas y en estos casos ya con
funcionalidad. Estos son los tipos “submit” y “reset”.
Para crear un botón que nos envíe los datos del formulario al servidor tenemos el tipo submit. Su
sintaxis es la siguiente:
<input type="submit" value="TextoBotón"/>
Una vez que pulsemos sobre el botón se enviarán los datos que el usuario haya insertado en el
formulario.
Botones de borrado
El otro tipo de botón con funcionalidad es el que nos permite el borrado de los datos del formulario.
Para ello tenemos el tipo “reset”. La sintaxis de este botón será:
<input type="reset" value="TextoBotón"/>
Cuando el usuario pulse sobre el botón de borrado. Todos los valores que el usuario haya insertado en
el formulario se eliminarán.
El elemento button
Como hemos visto hasta ahora los botones que hemos insertado han sido mediante el elemento input,
si bien contamos con otro elemento para poner botones en el formulario que es el elemento button.
Cuya funcionalidad es la misma que la del elemento input.
La sintaxis del elemento button es:
<button name="nombre" type="TipoBoton" value="ValorBoton"></button>
Dependiendo del tipo que asignamos al atributo type obtendremos un comportamiento u otro:
submit, crea un botón para el envío de formulario.
reset, crea un botón para el borrado de datos del formulario.
button, crea un botón normal.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Formulario Incentivo Emprende</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #e0f2ff;
display: flex;
justify-content: center;
padding: 20px;
}
.formulario {
background-color: #0096d6;
color: white;
padding: 20px;
border-radius: 10px;
width: 500px;
}
.formulario h2 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: none;
}
.botones {
text-align: center;
margin-top: 20px;
}
.botones button {
background-color: #006699;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
margin: 5px;
cursor: pointer;
}
.botones button:hover {
background-color: #004466;
}
</style>
</head>
<body>
<div class="formulario">
<h2>Registro - Incentivo Emprende</h2>
<form action="#" method="post">
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos" name="apellidos"
required>
<label for="nombres">Nombres:</label>
<input type="text" id="nombres" name="nombres"
required>
<label for="fecha">Fecha de Nacimiento:</label>
<input type="date" id="fecha" name="fecha" required>
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" required>
<label for="genero">Género:</label>
<select id="genero" name="genero" required>
<option value="">Seleccione</option>
<option value="mujer">Mujer</option>
<option value="hombre">Hombre</option>
<option value="otro">Otro</option>
</select>
<label for="nacionalidad">Nacionalidad:</label>
<input type="text" id="nacionalidad"
name="nacionalidad" required>
<h3>Lugar de Residencia</h3>
<label for="provincia">Provincia:</label>
<select id="provincia" name="provincia" required>
<option value="">Seleccione</option>
<option value="azuay">Azuay</option>
<option value="pichincha">Pichincha</option>
<option value="guayas">Guayas</option>
<!-- puedes agregar todas las provincias -->
</select>
<label for="canton">Cantón:</label>
<input type="text" id="canton" name="canton"
required>
<label for="parroquia">Parroquia:</label>
<input type="text" id="parroquia" name="parroquia"
required>
<label for="direccion">Dirección:</label>
<textarea id="direccion" name="direccion"
rows="2"></textarea>
<h3>Información de Contacto</h3>
<label for="telefono">Teléfono Celular:</label>
<input type="tel" id="telefono" name="telefono"
placeholder="Ej: 0992946588" required>
<label for="correo">Correo Electrónico:</label>
<input type="email" id="correo" name="correo"
placeholder="Ej: usuario@[Link]" required>
<h3>Información Cuenta Bancaria</h3>
<label for="banco">Institución Financiera:</label>
<select id="banco" name="banco" required>
<option value="">Seleccione</option>
<option value="pichincha">Banco
Pichincha</option>
<option value="pacifico">Banco del
Pacífico</option>
<option value="guayaquil">Banco de
Guayaquil</option>
</select>
<label for="tipoCuenta">Tipo de Cuenta:</label>
<select id="tipoCuenta" name="tipoCuenta" required>
<option value="">Seleccione</option>
<option value="ahorros">Cuenta de
Ahorros</option>
<option value="corriente">Cuenta
Corriente</option>
</select>
<label for="numCuenta">Número de Cuenta:</label>
<input type="text" id="numCuenta" name="numCuenta"
required>
<label>
<input type="checkbox" required> Acepto los
términos y condiciones
</label>
<div class="botones">
<button type="submit">Registrar</button>
<button type="reset">Cancelar</button>
</div>
</form>
</div>
</body>
</html>