Introducción

Seguramente, en algún momento, usando un sitio web nos encontramos con algo así:
 Introducción
O con algo así:
Clase 5: Formularios
 Formularios

Los formularios en HTML son una herramienta esencial para recopilar

información de los usuarios en una página web. Los formularios
permiten a los usuarios enviar información, como nombres, direcciones
de correo electrónico y mensajes, directamente a un sitio web.

Los formularios en HTML se crean utilizando una variedad de

elementos, incluyendo etiquetas de formulario, etiquetas de entrada,
botones de envío y elementos de selección. Estos elementos trabajan
juntos para crear un formulario que puede ser presentado al usuario y
utilizado para recopilar información.
 Formularios

Los formularios en HTML también se pueden utilizar para validar la

información que los usuarios ingresan, para asegurarse de que se
ingresen los datos correctos en los campos requeridos. Además, los
desarrolladores pueden utilizar CSS para dar estilo a los formularios y
hacerlos más atractivos y fáciles de usar para los usuarios.
 Cómo funcionan
Para lograr que un formulario funcione correctamente, hacen falta las siguientes 3
instancias:

CAPTURAR VALIDAR PROCESAR

HTML JavaScript Backend

 Cómo funcionan
Primero nos enfocaremos en la parte concerniente al HTML, es decir, que el
formulario se vea correctamente y que capture la información. Más adelante
veremos cómo validar y procesar la información.

CAPTURAR VALIDAR PROCESAR

HTML JavaScript Backend

 La etiqueta <form>
Con esta etiqueta indicamos que vamos a crear un formulario en nuestro documento
HTML. Todos los elementos que queramos incluir en el formulario van a ir dentro de
las etiquetas: <form> </form>.

<form action="/registro" method="POST">

html <!-- Aquí van los campos -->
</form>
 Los atributos de <form>
Esta etiqueta posee dos atributos: action y method.
Cada uno cumple un objetivo particular:

● action define la ruta en donde se va a procesar la información capturada.

● method define cómo se enviará la información. En la versión actual de HTML,
hay solo dos valores posibles: GET y POST.

<form action="/registro" method="POST">

html <!-- Aquí van los campos -->
</form>
 El tag <form>

Estructura básica de la configuración del tag <form> con los atributos detallados
anteriormente. La generación del tag se suele hacer en una sola línea.

El código de la imagen es a modo ilustrativo.

 Nuestro primer formulario parte 1
Para eso, utilizando este archivo base, debemos escribir, en el archivo index.html, la etiqueta necesaria
para crear un formulario, aclarando dos de sus atributos esenciales:

● El atributo method que indique POST como valor.

● El atributo action que indique resultado.html como valor.

Adicionalmente incorpora un h1 dentro del formulario para que nos quede de la siguiente forma:
Input types
 ¡Atención!
A partir de aquí necesitaremos integrar una herramienta adicional
a nuestro aprendizaje, que nos facilite la mejora de la interfaz
básica que provee HTML.

Este es un framework CSS que sin nada de configuración extra,

nos permitirá mejorar rápidamente la interfaz gráfica de nuestros
desarrollos web.

Te invitamos a visitar la página www.milligram.io y a seguir las

instrucciones de integración que el docente y tutores definan.
Input Types

El tag <input> se utiliza para la creación de elementos

de entrada para formularios. Son básicamente los
campos de entrada de datos de todo formulario web.

En estos últimos años, los tag <input> evolucionaron

de una forma positiva, y por ello cuentan hoy con
atributos y eventos que nos permiten configurarlos con
un nivel de detalle altamente profesional.
Input Types

La propiedad predeterminada de los

tag <input> es inline, por lo tanto en
HTML convencional se verán de
forma contigua unos a otros. 😟

Para que nuestra interacción con ellos

sea más agradable, te invitamos a
sumar el framework CSS Milligram a
tu documento HTML. 🙌
 El elemento <input>
Es un elemento multifunción. Cambiando el valor del atributo type, podemos
obtener distintos tipos de campos. El atributo name identifica el campo y lo
diferencia de los demás campos. Es importante saber que los elementos que no
tengan name, no se envían.

<form action="/registro" method="POST">

<input type="text" name="usuario">
<input type="password" name="clave">
html <input type="email" name="email">
<input type="tel" name="telefono">
<input type="number" name="edad">
</form>
 Input Types

El atributo placeholder es otra opción que simplifica el espacio en pantalla, y permite

describir el tipo de dato que se espera que se ingrese en el <input>.

 Input Types

El atributo maxlength es ideal para limitar el total de caracteres que

podrá ingresar el usuario en el <input>. También podemos especificar una

longitud mínima, utilizando minlength.

 Input Types

Los atributos maxlength y minlength aplican no solo para

los elementos <input> del tipo text, sino también para los

del tipo Email, Password, URL, Search y Tel.

 El elemento <label>
Sirve para asociar un texto descriptivo a un campo determinado.

for contenido
Asocia el label con un campo por su Contiene el texto que vamos a mostrar. Si el usuario
propiedad id. hace clic en el texto, el cursor irá al campo asociado.

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

id del campo
Para que el label quede asociado, el campo a asociar debe poseer
un id con el mismo valor que se usó en el for del label.
 El elemento <label>
Por lo general, cada campo o grupo de campos tendrá su label asociado.
Cuando el usuario haga click en el label, se activará automáticamente el campo
que corresponda.

<form action="/registro.html" method="POST">

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

html <label for="email">Email:</label>

<input type="email" name="email" id="email">

<label for="telefono">Edad:</label>
<input type="tel" name="edad" id="telefono">
</form>
 Ingreso de datos
Destino del Descripción
hipervínculo

text Permite el ingreso de caracteres alfanuméricos.

Permite el ingreso de direcciones de correo electrónico, esperando validar al menos un punto (.) y una
email
arroba (@) en el texto ingresado.

Permite el ingreso de direcciones web, esperando validar al menos una estructura con punto (.), http o
url
https, dos puntos (:) y la doble barra (//). Es bastante estricta en el formato de ingreso de una URL.

password Permite el ingreso de texto alfanumérico, mostrando en su lugar caracteres del tipo asterisco (*).

search Permite el ingreso de caracteres alfanuméricos, con una estructura similar a un campo de búsqueda.

Permite el ingreso de caracteres limitados a los propios de un número telefónico: números entre (0-9),
tel
guiones (-), espacios, el signo más (+), paréntesis, el caracter asterisco (*) y el caracter numeral (#).

Aquí tenemos algunos otros tipos de input de uso general.

 Nuestro primer formulario parte 2
Queremos que exista un campo dentro del formulario para que el usuario pueda ingresar su nombre.. Para eso, debemos
agregar dos etiquetas dentro del formulario:

● La etiqueta <label> para informarle al usuario que debe ingresar su nombre. La misma deberá tener el atributo for
con el valor nombre.
● La etiqueta <input> con atributo type con el valor text (para que el usuario pueda ingresar su nombre) y el
atributo id con el valor nombre. Por último, también debemos declarar el atributo name con el valor nombre ya que
si este atributo no figura, no se enviará el campo como resultado.

Recordemos que si están bien configurados los atributos for de la etiqueta <label> y el atributo id de la etiqueta <input>,
al hacer click en el <label>, el cursor para escribir se posicionará automáticamente en el <input> relacionado.
 Nuestro primer formulario parte 2
El resultado deseado será de la siguiente forma::
 Nuestro primer formulario parte 3
Queremos tener tres campos para que el usuario pueda ingresar un nombre, un e-mail y una contraseña. Deberemos usar
las siguientes etiquetas:

● Una etiqueta <input> para que el usuario ingrese su nombre.

● Una etiqueta <input> para que el usuario ingrese su e-mail.
● Una etiqueta <input> para que el usuario ingrese su contraseña.
● Una etiqueta <label> para cada uno de los <input>.

Los tres <input> deberán tener el atributo name declarado, con los valores nombre, email y password para que la
información efectivamente viaje al enviar el formulario.
 Nuestro primer formulario parte 3
El resultado deseado será de la siguiente forma:
Input numéricos
 Ingreso de datos
Destino del Descripción
hipervínculo

number Permite el ingreso de caracteres numéricos.

date Permite el ingreso de una fecha. Despliega un calendario para su rápida selección.

datetime Igual que el type=”date”, pero agrega la posibilidad de configurar hora y minutos.

time Permite el ingreso de hora y minutos, también a través de una interfaz de configuración rápida.

week Permite el ingreso de un número de semana, entre los valores 1 y 53.

month Permite el ingreso de un número de mes, entre los valores 1 y 12.

year Permite el ingreso de un año, en formato cuatro dígitos.

range Permite el ingreso de un rango numérico, entre un valor mínimo y máximo predefinido.
 Input numéricos
HTML5 cuenta también con <input>
que soportan el ingreso de datos
del tipo numéricos, como ser:
● number
● date
● datetime
● time
● week
● month
● year
● range
 El input de fecha
Nos permite ingresar una fecha incluyendo año, mes y día.
Para crear un elemento de tipo date usamos un input a cuyo atributo type le
damos el valor date.
Dentro de los atributos del elemento, la fecha siempre se formatea como
aaaa-mm-dd, por ejemplo 2020-10-25. Por fuera tomará el formato que
corresponda según el idioma del usuario.

html <input type="date" name="fecha">

 Las propiedades y sus valores
min
type Es opcional. Nos permite definir la
Crea un input de tipo date. fecha mínima que puede ser ingresada.

html <input type="date" name="fecha" value="2021-07-22" min="2018-01-01" max="2022-12-31">

value max
Si necesitamos mostrar una fecha por Es opcional. Nos permite definir
defecto, usamos el atributo value. la fecha máxima que puede ser
ingresada.
 Cómo se ve en el navegador
Los inputs de tipo date se van a ver diferente en cada navegador, pero el
aspecto general es parecido al siguiente:

Fecha de cumpleaños: mm / dd / aaaa

 Input numéricos

En estos <input>, podemos aprovechar a los atributos min y

max, para configurar los valores mínimos y máximos de los
datos que pueden ingresarse en ellos.

Algunos cuentan también con el atributo placeholder, para

guiar al usuario sobre qué dato se espera que se ingrese.
 Input numéricos

Definir el <input> correcto según el dato que esperamos recibir, es

clave no solo para los usuarios que navegan vía computadora, sino
también para los usuarios móviles.

En una computadora, el navegador web limita el tipo de dato a

ingresar. En un dispositivo móvil, se activa el teclado adaptativo o
los widgets específicos para inputs avanzados como son los de
fecha, hora y números, entre otros.
 El elemento <textarea>
Los anteriores campos, especialmente los de texto, están pensados para poca
información, una sola línea de texto generalmente. El textarea nos permite
texto de gran tamaño y con múltiples líneas. A diferencia del input, el textarea
tiene etiqueta de apertura y cierre.

<form action="/contact" method="POST">

<label for="comentario">Deje su Comentario:</label>
html
<textarea name="comentario" id="comentario">Contenido</textarea>
</form>
 Input para comentarios

El tag textarea nos permite definir un campo de comentarios.

Cuenta con el atributo placeholder, y el maxlength para limitar

la cantidad de caracteres, además de configurar su ancho y alto
a través de los atributos cols y rows, respectivamente.
Botones del formulario
 El elemento <button>
Nos permite generar un botón. Con la propiedad type definimos el tipo.
● Un botón de tipo reset reinicia el formulario a su estado inicial.
● Un botón de tipo submit se encarga de enviar el formulario.
● Un botón de tipo button no realizará ninguna acción por defecto. Por lo
general, programaremos una con ayuda de JavaScript.

<form action="" method="">

<label for="usuario">Ingrese el usuario:</label>
<input type="text" name="usuario">
html
<button type="reset">Cancelar</button>
<button type="submit">Enviar</button>
</form>
 Ejemplo

<form action="/login" method="POST">

<p>
<label>Nombre:</label>
<input type="text" name="usuario">
</p>
<p> Nombre:
html <label>Email:</label>
<input type="email" name="email"> Email:
</p>
<p>
<button type="submit">Enviar</button>
Enviar
</p>
</form>
 Botones del formulario
Ambos botones se definen utilizando el tag <input>.

El atributo type=”submit” define al botón que dispara el

evento de envío de datos configurado en el atributo action
del tag <form>.

El atributo type=”reset”, es el que permite borrar de forma

automática todos los datos cargados en el formulario.

💡En ninguno de los casos, los botones requieren de una configuración adicional.
El atributo type de cada botón le indica al navegador web qué función cumplen, y
es el navegador web quien se ocupa de ejecutar las acciones asociadas.
 Nuestro primer formulario parte 4
Para este ejercicio tenemos un formulario ya definido que está casi completo. Queremos agregar algo fundamental que le
está faltando:

● un botón que diga "ENVIAR" para que el usuario pueda, efectivamente, enviar sus datos.

Adicionalmente le agregaremos también:

● un botón que diga “RESETEAR” para que el usuario pueda limpiar los campos ingresados.
 Nuestro primer formulario parte 4
El resultado deseado será de la siguiente forma:
Validaciones y Restricciones
 Validaciones y restricciones

El atributo required, soportado por la mayoría de los <input>, nos facilita

establecer un mecanismo de obligatoriedad de ingreso de datos en uno o
más campos del formulario. Además, es un atributo del tipo booleano, por
lo cual, solo basta agregarlo al (o los) input type que necesitamos que sea
obligatoria su completitud.
Validaciones y restricciones

Como podemos ver en la imagen contigua, por cada input type

que no es completado, el mismo navegador web nos avisa a
través de un mensaje la necesidad de que se completen los
campos.

Además, en campos especiales como email, valida que el dato

ingresado contenga el formato esperado.

El formulario nunca podrá ser enviado, hasta tanto se cumpla el

ingreso de datos en todos los campos requeridos.
 Validaciones y restricciones

Y para establecer restricciones específicas sobre algunos tipos de datos a ingresar, contamos
con el atributo pattern. Este permite ingresar una estructura que limita aún más el tipo de
dato a ingresar, basándose en expresiones regulares: RegExp.

Las expresiones regulares nos ayudan a definir, por ejemplo, que una contraseña deba
cumplir con el ingreso de mayúsculas, minúsculas, caracteres especiales, y números, además
de un mínimo y/o máximo de caracteres.
 Validaciones y restricciones
El aprendizaje de expresiones regulares lleva un tiempo
pero es muy útil, además de servirnos para que sean
aplicadas en cualquier otro lenguaje de programación.

Si necesitas en algún momento establecer un patrón

determinado con una complejidad, como puede ser una
dirección IP v4.0, IP v6.0, nombres de usuario con una
estructura específica, códigos postales, o números de
tarjetas de crédito, entre otros, te invitamos a visitar el
sitio www.html5pattern.com donde encontrarás una guía
para estas situaciones.
 Validaciones y restricciones

Si quisiéramos definir un <input>, y que una persona El intérprete HTML del motor web se ocupará
elija su nombre de usuario bajo una estructura de 5 a 15
de notificar, de manera genérica, que dicho
caracteres alfabéticos, en minúsculas, entonces
<input> debe respetar un formato específico…
debemos definir el patrón especificado en la imagen.

Además, debemos agregar el atributo required.

Validaciones y restricciones
Para que el mensaje que recibe el usuario no
sea tan genérico, podemos agregar una
etiqueta <span> a continuación, guiando al
usuario en cómo debe ingresar los datos
solicitados.

También, el atributo title en el <input>, nos

ayudará a comunicar la información que se
espera en ese campo, despegándonos así de
los mensajes genéricos de HTML5.
 Input Types

Existen también otros caminos más avanzados para

especificar el mensaje o notificación al usuario en base a

los datos esperados en <input types>, que esperan un

patrón específico, pero esto lo lograremos combinando

CSS y JavaScript, para tener así un control más estricto.

Servicios freemium para probar el envío de datos
Servicios freemium para el envío de datos

Los formularios de datos en HTML pueden funcionar

sin la necesidad de un backend específico y/o sin tener
que programar un algoritmo en lenguajes como
JavaScript.

Para ello, existen algunos servicios online que nos

permitirán poner el broche de oro en el trabajo
realizado a lo largo de esta clase.
Servicios freemium para el envío de datos

Mailthis.to
Una API web que nos permite definir en el
atributo action, la URL de procesamiento de
los datos de nuestro formulario, para que
esta información llegue a una dirección de
correo electrónico específica.
Servicios freemium para el envío de datos

formsubmit.co
Otra API web alternativa, con el mismo
objetivo que propone Mailthis.to

Ambos servicios funcionan

prácticamente igual.
Servicios freemium para el envío de datos

Ten presente SIEMPRE, leer la documentación de estos servicios,

dado que nunca son 100% gratuitos. En algunos casos limitan a una
cantidad determinada el envío gratuito de los datos de un formulario,
luego se debe pagar un canon para poder seguir utilizándolo.
Servicios freemium para el envío de datos

Además, estos servicios requieren que se utilicen, en algunos casos,

campos ocultos dentro de nuestro formulario HTML los cuales cumplen
el rol de aportar información adicional a la API web, y/o funcionan
como prevención ante un envío indiscriminado de datos, a través de
diversas técnicas de hacking web.
Servicios freemium para el envío de datos

También, al utilizar el servicio por primera vez, puede Cuando el servicio comience a funcionar, recibiremos un
que nos solicite validar previamente nuestra identidad, Email por cada vez que se complete el formulario,
al email elegido. Estemos atentos porque este email de similar a esta imagen.
validación, puede caer en la casilla de SPAM de dicha
cuenta.
El elemento <select> y sus <option>
 El elemento <select>
Este elemento nos permite agregar un componente que muestra opciones.
Como el resto de los campos, debe llevar el parámetro name para enviarse.

<form action="/colors.html" method="GET">

<label>Seleccione un color:</label>
<select name="color">
<option value="#ff0000">Rojo</option>
html <option value="#00ff00">Verde</option>
<option value="#0000ff">Azul</option>
<option value="#770077">Morado</option>
</select>
</form>
 El elemento <option>
Las opciones de un select son representadas por elementos option.
Los elementos option tienen etiqueta de apertura y cierre.

value selected
Es el valor que será enviado por el formulario. Es opcional, se encarga de preseleccionar la opción.

<option value="#ff0000" selected>Rojo</option>

html
<option value="#00ff00">Verde</option>

Contenido de la opción
Es lo que verá el usuario al desplegar el select.
 Nuestro primer formulario parte 5
Vamos a crear un pequeño campo con un desplegable para que el usuario pueda seleccionar su función:

● Para eso, deberemos crear una etiqueta <select> con atributo y valor name="job". Dentro del <select>, tendremos
que crear 4 etiquetas <option>, una por cada trabajo, aclarando en cada caso el texto que leerá el usuario:
○ Desarrollador front-end
○ .Desarrollador back-end
○ Desarrollador full-stack
○ Diseñador web

No olvidemos, además, escribir el atibuto value en cada una de las etiquetas <option>..
 Nuestro primer formulario parte 5
El resultado deseado será de la siguiente forma:
El elemento tipo checkbox
 El checkbox
Representa una opción ⏹, al hacer clic en él queda seleccionado y con otro clic
quitamos la selección.
Para crear un elemento de tipo checkbox usamos un input cuyo atributo type
tiene el valor checkbox.
Podemos agrupar elementos de tipo checkbox y, en ese caso, se podrán elegir
múltiples opciones del conjunto. Para agruparlos, todos los elementos deben
tener el mismo valor en el atributo name.

<input type="checkbox" name="hobbies[]" value="Música">

html <input type="checkbox" name="hobbies[]" value="Pintura">
<input type="checkbox" name="hobbies[]" value="Juegos">
 Las propiedades y sus valores
value
type Acá va la información que se enviará si el
Crea un botón de tipo checkbox. usuario selecciona este checkbox.

<input type="checkbox" name="hobbies[]" value="Pintura">

html
<input type="checkbox" name="hobbies[]" value="Juegos" checked>

name checked
Para que el usuario pueda seleccionar más de una opción, Es opcional, se encarga de
tenemos que asignarle el mismo nombre a todos los preseleccionar la opción.
inputs de tipo checkbox que sean del mismo grupo.
 Un uso particular
Un uso particular del checkbox es utilizarlo para recolectar información que
responde a preguntas con respuestas como sí/no porque permite tildar o
destildar en un solo elemento.
En ese caso no es necesario agregar un valor, ya que, en caso de seleccionarse
la opción, llegará con el valor “on”.

<label for="terminos">Acepto los términos.</label>

html
<input type="checkbox" name="terminos">

<label for="newsletter">¡Quiero ese newsletter!</label>

html
<input type="checkbox" name="newsletter">
 Cómo se ve en el navegador
Los input de tipo checkbox se van a ver de la siguiente manera:

Seleccionar tus hobbies:

Fútbol
Magic
Andar en bici
Cantar
Checkbox en acción

<input type=”checkbox”> permite establecer

una casilla de verificación del tipo check ✅.

Si queremos predeterminar como tildada alguna

de las casillas, simplemente agregamos el
atributo booleano: checked.
 Nuestro primer formulario parte 6
Queremos crear unos campos para saber los hobbies del usuario.

Para eso, dentro del formulario ya declarado, debemos:

● Crear un <label> con el texto "¿Cuáles son tus intereses?".

● Crear tres etiquetas <input> de tipo checkbox con las opciones: desarrollo, diseño y negocios.
● Crear tres etiquetas <label> de cada una con un atributo for coincidentes con los diferentes id de los tres inputs.
● Configurar el atributo name="intereses" a todos los <input> para que asocie que estamos hablando del mismo
campo.
● Por último, no debemos olvidarnos de agregar el atributo value a cada <input> para poder averiguar luego qué es
lo que eligió el usuario.
 Nuestro primer formulario parte 6
El resultado deseado será de la siguiente forma:
El elemento tipo radio
 El radio
En los radio buttons, al hacer clic en 🔘, éste queda seleccionado.
Para crear un elemento de tipo radio usamos un input cuyo atributo type tiene el
valor radio.
Podemos agrupar elementos de tipo radio y, en ese caso, solo se podrá elegir una
opción del conjunto. Para agruparlos usamos para todos los elementos el mismo
valor en el atributo name.

<input type="radio" name="medio-de-pago" value="Efectivo">

html <input type="radio" name="medio-de-pago" value="Débito">
<input type="radio" name="medio-de-pago" value="Tarjeta">
 Las propiedades y sus valores
value
type Acá va la información que se enviará si el
Crea un botón de tipo radio. usuario selecciona este radio-button.

<input type="radio" name="medio" value="Efectivo">

html
<input type="radio" name="medio" value="Débito" checked>

name checked
Para que el usuario pueda seleccionar solo una opción Es opcional, se encarga de
tenemos que asignarle el mismo nombre a todos los preseleccionar la opción.
inputs de tipo radio que sean del mismo grupo.
 Cómo se ve en el navegador
Los inputs de tipo radio se van a ver de la siguiente manera:

Método de pago preferido:

Efectivo
Débito
Tarjeta
Radio en acción

<input type=”radio”> permite establecer una casilla de

selección simple 🔘 entre múltiples opciones.

Debemos especificar en su atributo name, el mismo nombre

para todos los elementos, así podemos seleccionar uno solo de
ellos. Si no, el comportamiento será de selección múltiple.
 Nuestro primer formulario parte 7
Queremos crear unos campos para saber si el usuario quiere recibir noticias por correo:.

Para eso, dentro del formulario ya declarado, debemos:

● Crear un <label> con el texto "Recibir noticias por correo:".

● Agregar dos radio-button para darle la opción "Si, me gustaría recibir noticias" y la opción "No enviarme noticias".
● Crear dos etiquetas <label> de cada una con un atributo for coincidentes con los diferentes id de los dos inputs.
● Configurar el atributo name="newsletter" en ambos <input> para que asocie que estamos hablando del mismo
campo.

Atención: Para poder averiguar, luego, qué es lo que eligió el usuario, no debemos olvidarnos de agregarle el atributo
value a cada <input>.
 Nuestro primer formulario parte 7
El resultado deseado será de la siguiente forma:
El elemento tipo color
Otros Input Types

<input type=”color”> despliega una paleta de selección

de colores 🎨.

En su atributo value almacena el color seleccionado en

formato RGB mientras que en el cuerpo del elemento
HTML tendremos la vista previa del color seleccionado.
El elemento tipo file
 El input de archivos
Nos permite cargar uno o más archivos desde la computadora.
Para crear un elemento de tipo file usamos un input a cuyo atributo type le
damos el valor file.

<label>Seleccionar una imagen para el perfil:</label>

html
<input type="file" name="avatar" accept=".jpg" multiple>
 Las propiedades y sus valores
accept
type Nos permite definir qué tipo de
Crea un input de tipo file. archivos serán aceptados.

html <input type="file" name="avatar" accept=".jpg" multiple>

multiple
Por defecto solo permite un archivo, si deseáramos
aceptar más de uno, usamos multiple.
 Cómo se ve en el navegador
Los inputs de tipo file se van a ver de la siguiente manera:

Seleccionar una imagen para el perfil:

Choose Files No file chosen

Otros Input Types

<input type=”file”> permite seleccionar un archivo a

adjuntar en el formulario de datos.
En su atributo accept nos ayuda a definir algún o algunos
formatos de archivos específicos.
Su atributo multiple, booleano, permite seleccionar más
de un archivo a adjuntar.
 Otros Input Types
Algunos tipos de archivos configurables en el atributo accept:

Formato/Extensión Descripción

image/* Todos los tipos de imágenes soportados por el navegador web.

image/jpg Tipos de imágenes en formato JPG.
image/png Tipos de imágenes en formato PNG.

.doc,.docx, Documentos de Microsoft Word con soporte para la extensión clásica y la

application/msword extensión moderna.

video/* Todos los tipos de archivos de video soportados.

audio/* Todos los tipos de archivos de audio soportados.

.pdf Para archivos mucho más específicos, como ser el formato PDF, TXT, o tal
.txt vez alguno personalizado, definimos directamente un punto más la
.abc extensión esperada.
 Nuestro primer formulario parte 8
Queremos crear unos campos para que el usuario cargue su avatar:.

Para eso, dentro del formulario ya declarado, debemos:

● Crear un <label> con el texto "Foto de perfil:", no olvides el atributo for.

● Creamos un <input> que recibe solo archivos de tipo imagen.

No olvides configurar el atributo name y el id del input.

 Nuestro primer formulario parte 8
El resultado deseado será de la siguiente forma:
Resumiendo los inputs types
 Nuestro primer formulario parte 9
Queremos crear unos campos para saber si el usuario quiere recibir noticias por correo:.

Para eso, dentro del formulario ya declarado, debemos:

● Crear dos <label> con el texto "Fecha de nacimiento:" y “Biografia”.

● Crear dos etiquetas <textearea> e <input> de tipo fecha cada una con un atributo for coincidentes con los
diferentes id de los dos inputs.

No olvides configurar el atributo name y el id del input.

 Nuestro primer formulario parte 9
El resultado deseado será de la siguiente forma:
Accesibilidad
 Situar correctamente las etiquetas label
Antes del campo para:
● text
Arriba del
● textarea
campo
● select
● password
● file

A la izquierda
del campo
 Situar correctamente las etiquetas label
Detrás del campo para los tipo:
● checkbox (multiselección)
● radio button (excluyente) Detrás del campo
Etiquetar los controles de forma correcta
label for
La relación entre la etiqueta y el control del
formulario al que pertenece debe estar
siempre asociada con for.

htm <label for="fname">Nombre</label>

l <input id="fname" type="text" name="nombre">

for debe ser siempre igual al id del control del

formulario y cada id debe ser único.
Label no debe usarse para los campos:
● Image, como puede ser el caso de un botón enviar.
En estos elementos utilizamos el atributo alt.

● Para los tipos submit y reset debemos usar value.

● Para los button en los que su contenido se usa como una etiqueta.
Usar etiquetas de agrupamiento
Utilizamos las etiquetas de agrupamiento cuando sea necesario y/o aclaratorio,
por ejemplo:
● Agrupamos semánticamente un número de controles del formulario
mediante el campo fieldset, como en una agrupación de opciones de
radios o checks.

● Añadimos una descripción a esta agrupación con el elemento legend.

● Con optgroup podemos agrupar una serie de options dentro de un

select. Con este elemento ayudamos a los usuarios a encontrar la
información de una forma más simple, sobre todo en listas muy largas.

Veamos algunos ejemplos:

Etiquetas de agrupamiento optgroup
optgroup nos permite agrupar <p> Elije un auto:
las opciones de selección de una
<select>
lista de un formulario.
<optgroup label="Ferrari">
<option>458 Spider</option>
label es obligatorio en este
elemento y debería proveer a <option>F12 Berlinetta</option>
los usuarios una pista o <option>California T</option>
descripción acerca de los </optgroup>
contenidos del grupo. html
<optgroup label="Porsche">
<option>Macan</option>
La agrupación de opciones <option>918 Spyder</option>
en un control select puede </optgroup>
mejorar la legibilidad y la
</select>
facilidad de uso.
</p>
Usar etiquetas de agrupamiento
Etiquetas de agrupamiento fieldset
Fieldset Legend
Nos permite agrupar cuando haya varios Es el texto que describe el grupo
elementos de formulario asociados . de asociados de los elementos
Cada fieldset debe tener una leyenda. de formulario.

<fieldset>
<legend>Tipo de equipo</legend> <br />
<input id="pc" type="radio" name="rb3" value="radiobutton">
html <label for="pc">PC</label>
<input id="laptop" type="radio" name="rb3" value="radiobutton">
<label for="laptop">Laptop</label>
</fieldset>
Identificación correcta de campos obligatorios

Poniendo directamente el texto “obligatorio”

vamos a evitar más confusiones en la
interpretación.
Por ejemplo, “Email (obligatorio)”.

Usar el * para indicar que un campo es

requerido. Se debe añadir el texto “Los
campos con * son obligatorios” o similar.
Identificación correcta de campos obligatorios

Identifiquemos los errores marcando el foco

con cambio de color en el campo que se ha
producido, y además describiendo con texto
el error cometido.

No identifiquemos un campo obligatorio

solo con color. Esto podría no funcionar
para las personas con daltonismo.
Identificación correcta de campos obligatorios
Los textos de los mensajes de la validación deben ser lo más descriptivos
posible y aclarar al usuario lo que está sucediendo.

No es útil “Se han dejado campos obligatorios sin completar”.

Con este tipo de mensaje es complicado que el usuario sepa en qué
ha fallado.

Probemos por ejemplo con “El email que completaste no es

correcto, por favor, introduce algo similar a mimail@gmail.com”.
 Tabindex
Una de las formas más comunes de la navegación a través de un formulario es
utilizando la tecla Tab.
Una persona llena un campo, presiona la tecla Tab, rellena el campo siguiente,
y así sucesivamente, hasta que se alcanza el final del formulario.
Para lograrlo debemos establecer el orden en que se asignan esas tabulaciones
de la siguiente manera:

<a href="documento2.html" tabindex="2" style="float:

html right;"> Segundo documento.</a>
<a href="documento1.html" tabindex="1">Primer documento.</a>
 Tabindex

● Un número entero que indica la posición del elemento en la navegación

por tabulación. Si varios elementos comparten el mismo tabindex, su
orden relativo sigue la posición relativa en el documento.

● Si el valor es negativo (usualmente tabindex="-1"), el elemento se

encontrará excluido de la navegación por tabulación.

● Si este atributo es omitido, el navegador determinará automáticamente la

posición de todos los elementos capaces de recibir el enfoque de acuerdo
a su posición en el código.
 Nuestro primer formulario parte 10
Queremos agregar un poco mas de accesibilidad a nuestro formulario, para ello, dentro del formulario debemos:

● Crear tres <fieldset>

● Dentro de los fieldset pondremos un <legend> con el texto:
○ <span> 1 </span> Datos Principales
○ <span> 2 </span> Tu perfil
○ <span> 3 </span> Newsletter
 Nuestro primer formulario parte 10
El resultado deseado será de la siguiente forma:
Muchas gracias.