Creación de Formularios Web Efectivos con HTML

Contenido del curso

Web Developer Fundamentals

HTML

Etiquetas multimedia

Formularios

CSS

Responsive Design

Accesibilidad

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:54

Creación de Formularios Web Efectivos con HTML

Curso Definitivo de HTML y CSS

Clase 17 de 56

Clase 17 / 56

Recursos

Crear formularios que funcionen bien y que los usuarios quieran completar es una de las responsabilidades más grandes al construir productos web. Un formulario mal diseñado puede hacer que las personas abandonen una compra o un registro, y nunca regresen. Aquí se explica paso a paso cómo construir formularios con las etiquetas correctas, los tipos de input adecuados y los atributos que mejoran la experiencia del usuario.

¿Por qué los formularios son tan importantes en productos web?

Los formularios son el puente principal de comunicación entre un producto web y sus usuarios. A través de ellos se recolecta información esencial: credenciales de acceso, datos de envío, preferencias personales. Sin embargo, un formulario extenso o confuso genera abandono [0:45]. Si alguna vez intentaste registrarte en una página y el formulario era tan largo que decidiste irte, sabes exactamente de qué se trata.

Existe una frase conocida en el mundo del desarrollo: "el mejor formulario es el que no existe" [1:17]. A nadie le gusta llenar formularios. Por eso, como desarrolladores, la meta es hacerlos lo más breves, claros y funcionales posible.

¿Cuál es la diferencia entre usar div y la etiqueta form?

Un error común es envolver los inputs dentro de un simple div [2:07]. Aunque visualmente puede parecer que funciona, esta práctica está mal hecha. La etiqueta correcta es form, que es una etiqueta semántica. Esto significa que le comunica al navegador que el contenido interno es un formulario y que el usuario va a proporcionar información destinada a un servidor [2:42].

La etiqueta form incluye un atributo llamado action, donde se define la URL o endpoint al que se enviará la información recolectada hacia una base de datos [3:05]. Aunque este atributo se aprovecha más adelante con JavaScript, es importante conocerlo desde el inicio.

¿Cómo se relacionan label, input e id?

Dentro de form, cada campo debe construirse con una estructura clara:

La etiqueta label describe para qué sirve el campo.
La etiqueta input es donde el usuario escribe o selecciona información.
El atributo for del label debe coincidir con el atributo id del input [3:35].

Esta relación es fundamental. Cuando el for del label y el id del input coinciden, al hacer clic en el texto de la pregunta se activa automáticamente el campo correspondiente [4:30]. Esto mejora la accesibilidad y la experiencia de uso.

¿Qué tipos de input existen y cuándo usarlos?

El atributo type del input define qué clase de información se va a recolectar. Tres ejemplos prácticos ilustran esto con claridad:

type="text": para capturar texto libre, como un nombre [5:00].
type="date": muestra un selector de calendario para que el usuario elija una fecha sin tener que escribirla manualmente [5:55].
type="time": presenta un selector de hora para indicar, por ejemplo, en qué horario prefiere estudiar una persona [6:30].

Usar el tipo correcto reduce el trabajo del usuario. En lugar de escribir "16/07/2024" a mano, el calendario integrado le permite seleccionar la fecha con clics. Eso es pensar en la experiencia.

¿Qué es el placeholder y cómo ayuda al usuario?

Cuando un formulario tiene campos vacíos, el usuario puede no saber exactamente qué información se espera. Para resolver esto existe el atributo placeholder [7:32]. Este atributo coloca un texto de ejemplo dentro del input que desaparece al comenzar a escribir.

Por ejemplo, en un campo de nombre se puede agregar placeholder="tu nombre", lo que le indica visualmente a la persona qué dato debe ingresar [7:50]. Es un detalle pequeño que marca una gran diferencia en la claridad del formulario.

El formulario resultante tiene tres campos funcionales:

Nombre del alumno con input tipo texto y placeholder.
Fecha de inicio en Platzi con input tipo date.
Horario preferido de estudio con input tipo time.

Cada campo utiliza la etiqueta semántica correcta, tiene su label vinculado por id y emplea el tipo de input que mejor se adapta a la información solicitada. Hacer trabajar menos al usuario es la prioridad [8:25]. Si quieres seguir practicando, intenta construir un formulario tipo calendario con fecha de ida y regreso, como los que usan las páginas de vuelos. ¿Qué otros tipos de input crees que podrías necesitar? Compártelo en los comentarios.

Derek Samuel Paúl Peña

Hace 6 años

Si quieren dar estilos a sus inputs les dejo aquí estilizados los inputs que vimos:

por si desean ver un resultado previo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FORMS</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    .email_container {
      margin: 15px;
      display: flex;
      padding: 15px;
      justify-content: space-between;
      align-items: center;
      border-radius: 25px;
      background-color: #fff8dc;
      border: 2px solid #f8cf2c;
      color: #1575c2;
      font-weight: bold;
      font-size: 14px;
    }
    input {
      padding: 2px;
    }
    input[type="email"], input[type="password"] {
      box-sizing: border-box;
      border: none;
      -webkit-box-shadow: 0 0 0px 1000px cornsilk inset;
      outline: none;
      color:#986f00;
    }
    input[type="submit"] {
      outline: none;
      box-sizing: border-box;
      /* margin: 15px; */
      /* display: flex; */
      padding: 15px;
      /* justify-content: space-between; */
      /* align-items: center; */
      border-radius: 25px;
      background-color: rgb(255, 216, 89);
      border: none;
      width: 100%;
      color: #00519e;
      font-weight: bold;
    }
    input[type="file"] {
      outline: none;
      cursor: pointer;
    }
    input[type="file"]::before {
      font-weight: bold;
      font-size: 14px;
      content: 'Elije tu foto:';
      background: linear-gradient(top, #f9f9f9, #e3e3e3);
      -webkit-user-select: none;
    }
    input[type="file"]::-webkit-file-upload-button {
      visibility: hidden;
    }
    input[type="date"] {
      border: none;
      background: none;
      color: #a8733d;
      outline: none;
      margin-left: 6px;
    }
    input[type="time"] {
      background: none;
      color: #a8733d;
      border: none;
      font-size: 18px;
      font-weight: bold;
      outline: none;
    }
  </style>
</head>
<body>
  <form action="">
    <label for="email" class="email_container">
      <span class="title">G-mail:</span>
      <input type="email" id="email" placeholder="example@example.com">
      <span>📧</span>
    </label>
    <label for="password" class="email_container">
      <span class="title">Password:</span>
      <input type="password" id="password" placeholder="****************">
      <span>🔑</span>
    </label>
    <label for="file" class="email_container">
      <input type="file" id="file">
      <span>📁</span>
    </label>
    <label for="date" class="email_container">
      <span class="title">Fecha de nacimiento:</span>
      <input type="date" id="date">
    </label>
    <label for="date" class="email_container">
      <span class="title">Horas en las que transitas:</span>
      <input type="time" id="date">
    </label>
    <input type="submit" value="Regístrate">
  </form>
  <!-- FORMAS DE HACERLO INCORRECTAS <div>
    <input type="text">
    <input type="file">
    <input type="number">
    <input type="email">
    <input type="date">
  </div> -->
</body>
</html>

Jorge Alberto Ruiz Jaimes

Hace 5 años

Excelente aporte... Ayuda bastante para aplicarlo en futuras pruebas técnicas y "descrestar".... Muchísimas gracias

Yampier Quispe

Hace 5 años

sale pa poner tarjet DE CREDIDO

Comentarios (592)592 comentarios

Zoe Uribe Eugenio

Héctor Tello

Joel Dominguez Merino

Cesar Hernández Ramírez

Ricardo Moncayo

Carlos Eduardo Gomez García

Mauricio Doncel

Andy Antonio Paz Cambara

Patricio Manuel Ugarte

Miguel Andres Rendon Reyes

Juan Esteban Ramirez Avila

Jesus Velasco

Abril Rios

Carlos Alberto Basilio Torres

Aldo Miguel Ortiz Parodi

Raúl Cordero Ibarra

Gianfranco Iván Misari Ortega

Luis Aaron Lopez Ramirez

Hace 4 años

Santiago alfonso Gutiérrez Agostini

Diego Alejandro Pinto Moreno

Gabriela Carolina Navarro Quintero

Alexis Daniel Sanchez Arias

DANIEL SUAREZ

José Juan Pineda

Cristopher Reynaldo Huaroc Olivera

Andres Salazar

Nestor Quiroga Suárez 🧑🏼‍🚀

Geraldine Claros

Hitler Manrique Heredia

Ricardo Alfonso Chavez Vilcapoma

Carlos Abel Tarazona Aranda

Alex Macias

Korpi delfin

Héctor Alonso Padilla Ramírez

Juan David González Rodríguez

Cristobal Torres

Luis Alberto Ducuara Blandón

Albert Jose Salas Yustiz

Hace un año

Edward Cabrera

Eric López

Hace 3 años

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Responsive Design

Responsive Design: Estrategias Mobile First

Patrones de Diseño Responsive: Mobile First a Desktop

Media Queries para Diseño Responsive Mobile y Tablet

Patrón Layout Shifter en Diseño Mobile First

Patrón de Diseño Responsive: Column Drop en CSS

Diseño Responsive: Estrategias y Ejemplos Prácticos

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Accesibilidad

Accesibilidad Web: HTML Semántico para Proyectos Inclusivos

Uso de medidas relativas para accesibilidad en texto web

Atributos HTML para Mejorar la Accesibilidad Web

Próximos pasos

Próximos Pasos en Desarrollo Web: Mobile First y Más

Recursos Visuales para Desarrolladores Web

Creación de Formularios Web Efectivos con HTML