Creación de Formularios Web Efectivos con HTML

Clase 17 de 56 • Curso Definitivo de HTML y CSS

Resumen

¿Por qué los formularios son tan importantes?

Los formularios son esenciales en los productos web porque son la principal forma en que interactuamos con los usuarios. Nos permiten solicitar o recibir información de los visitantes, ya sea para registrar cuentas de usuario, completar transacciones de compras o recolectar retroalimentación. Sin embargo, a menudo pueden ser una barrera si no están bien diseñados. Formularios que son confusos o demasiado largos pueden alejar a los usuarios potenciales.

¿Cómo se estructura un formulario HTML correctamente?

Al estructurar un formulario en HTML, es imprescindible usar la etiqueta <form> y añadirle atributos como method y action. Estas etiquetas y atributos direccionan las interacciones del formulario, comunicándole al navegador que los datos introducidos se gestionarán adecuadamente. A continuación, presentamos un ejemplo básico de cómo iniciar esta estructura:

<form action="/submit-data" method="post">
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Enviar</button>
</form>

¿Cómo mejorar la experiencia del usuario?

Para enriquecer la experiencia del usuario en los formularios, puedes seguir estas recomendaciones:

Simplicidad: Reduce los campos a los necesarios.
Guías visuales: Utiliza etiquetas y placeholders que orienten al usuario sobre qué información necesita proporcionar.
Proporciona retroalimentación: Después de enviar, confirma el éxito o indica errores de manera clara.

¿Qué tipos de inputs existen?

HTML ofrece una amplia variedad de tipos de inputs que permiten recibir diferentes formatos de datos. Entre los más comunes están:

Text: Para texto regular, como nombres o direcciones.
Email: Que incluye validación básica para formatos de correo electrónico.
Date: Permite al usuario seleccionar una fecha desde un calendario desplegable.
Time: Brinda una interfaz para que el usuario seleccione una hora específica del día.
Number: Permite inputs numéricos, lo que limita el tipo de información que puede ser ingresada.

Aquí un ejemplo de cómo se configuran estos inputs:

<label for="startdate">Fecha de inicio:</label>
<input type="date" id="startdate" name="startdate">

<label for="timestudy">Hora de estudio:</label>
<input type="time" id="timestudy" name="timestudy">

¿Qué es un Placeholder y por qué es útil?

El atributo placeholder en los inputs HTML es crucial para mejorar la claridad en los formularios. Al proporcionar un texto sugerido dentro del campo de entrada, orienta al usuario sobre el formato o el tipo de información esperada. Por ejemplo:

<input type="text" id="name" name="name" placeholder="Introduce tu nombre completo">

El uso efectivo de placeholders mejora considerablemente la experiencia del usuario al hacer más intuitivo el proceso de llenado del formulario, además de disminuir posibles errores en la introducción de datos.

Los formularios bien diseñados no solo favorecen una mejor experiencia del usuario, sino que también mejoran la interacción y conversión en cualquier plataforma digital. Mantén siempre en mente que un formulario efectivo es fácil de entender y rápido de completar.

Zoe Uribe Eugenio

student•

Creó que también es importante mencionar que se puede colocar el atributo “Required”, que hace obligatorios los campos en html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formularios</title>
</head>
<body>
  <form action="">
    <label for="nombre">
      <span>Cual es tu nombre?</span>
      <input type="text" id="nombre" placeholder="Tu nombre" required>
    </label>
    <label for="inicio-platzi">
      <span>Que dia comenzaste en Platzi?</span>
      <input type="date" id="inicio-platzi" >
    </label>
    <label for="horario">
      <span>En que horario estudias?</span>
      <input type="time" id="horario" >
    </label>
  </form>
</body>
</html>```

Héctor Tello

student•

Excelente! Creo que en próximas clases se trata el tema de los required.

Joel Dominguez Merino

student•

No lo conocia. Que hace si uno no ingresa el campo? No se activa el boton de enviar por ejemplo o te indica que lo llenes antes de pasar al siguiente elemento?

Joel Dominguez Merino

student•

Ya llego! Ya llego su resumen de cada clase :P Esta clase fue muy valiosa ya que muchas veces habia visto videos de Formularios, pero jamas tan bien explicados como lo hizo Diego^^

Comenzemos. Es importante utilizar la etiqueta <form></form> para indicar que utilizaremos un formulario, ademas de la semantica y buenas practicas. Dentro de estas etiquetas indicaremos los elementos del Formulario como lo son... <label></label> que sera como nuestro "Contenedor" en esta ocasión. dentro de el pondremos la etiqueta <span></span> (No es necesario) para colocar un texto haciendo alusión al contenido esperado (nombre, contraseña, fecha etc...) y viene una de las etiquetas importantes la cual es <input> aqui es importante aclarar que hay muchos tipos de Input, los que veran en este ejemplo son text, password, date, time pero hay muchos mas... Tambien esta el atributo placeholder para colocar un texto como guia dentro de la caja (Input) y este al hacer click sobre el se eliminara. y Creo que es lo mas rescatable! Recuerden aun nos queda mucho por aprender :D

Codigo:

Resultado:

Cesar Hernández Ramírez

student•

Graciaaaaaaaaaas

Ricardo Moncayo

student•

Jajaja un poco específico, hablando sobre la hora de nacimiento 😂👍👍

Carlos Eduardo Gomez García

teacher•

Ok, aquí si creo que hay algo que no está bien, el estandar y lo más común de ver es que las etiquetas label e input estén separadas, no que esté una dentro de otra.

Funciona y es válido poner el input dentro, pero para ese caso no se debe usar el atributo for para al label porque es redundante, el hecho de poner el input dentro es para que cuando le hagas click al label a este se le haga focus automáticamente.

Probablemente lo que más se vayan a encontrar es esta forma:

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

Y es válida y no tiene problemas semánticos, porque precisamente para eso funciona el for, de hecho, incluso diría que es mejor, porque al poner el input dentro del label lo que sucede es que cuando le das click al input, también le estás dando click al label

Carlos Eduardo Gomez García

teacher•

Así es, aunque realmente ese for="" vacio tampoco hace falta

El id depende, porque si luego necesitas obtener el valor de ese campo mediante JavaScript, lo más común es que lo hagas desde su id, pero para este caso, no es necesario ni el for ni el, ya que el input está dentro del label y de esa forma se enlazan automáticamente :D

Mauricio Doncel

student•

Muchas Gracias

Andy Antonio Paz Cambara

student•

estos son algunos inputs mas que podemos usar al momento de crear formularios

input type=hidden input type=text input type=search input type=tel input type=url input type=email input type=password input type=date input type=month input type=week input type=time input type=datetime-local input type=number input type=range input type=color input type=checkbox input type=radio input type=file input type=submit input type=image input type=reset input type=button

Patricio Manuel Ugarte

student•

Dejo link para más información sobre cada uno: https://www.w3schools.com/html/html_form_input_types.asp

Miguel Andres Rendon Reyes

student•

nice

Juan Esteban Ramirez Avila

student•

Hola a todos!, la importancia de los formularios y su diseño amigable es la clave para que los usuarios digiten los datos solicitados, comparto un formulario de una web dinámica que realice para un cliente!

Jesus Velasco

student•

Esta muy bonito!!! oye, como se llama el input de mero abajo el del label "descripción/especialidad"?

Juan Esteban Ramirez Avila

student•

Es una integración del ckeditor , ahí te dejo para que la estudies y la implementes, es super fácil. !Saludos! https://ckeditor.com/docs/ckeditor5/latest/index.html

Abril Rios

student•

Resumen

- <Form>; Es una etiqueta fundamentalmente para tener una mejor semántica.

**- <Label>; Etiqueta que representa la interfaz del usuario.

for=" "; Permite asociar un control, en el se le dará un nombre personalizado
<Input>; Elemento donde el usuario da sus datos para el formulario.
type=“text”; Se aclara que los datos serán tipos textos (por ejemplo, nombre y apellido).
type=“date”; Da una apariencia diferente al input más un calendario donde el usuario podrá poner una fecha mediante los números o facilitándose llenarlo con ayuda del calendario.
type=“time”; También da una apariencia diferente pero para un horario.
id=" "; Se le da un nombre (por así decirlo) al elemento para poder asociarlo junto al mismo nombre que el label en el que se le da al atributo de valor de for.
<span>; Es para aplicar estilo al texto o agrupación de elementos. Lo que haría en si es que se colocará arriba o abajo (dependiendo donde lo pongas en el editor de código) donde obtendrá un texto.

Derek Samuel Paúl Peña

student•

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

student•

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

Yampier Quispe

student•

sale pa poner tarjet DE CREDIDO

Carlos Alberto Basilio Torres

student•

Acostumbrense de una vez a escribir en el input el atributo nombre, es decir:

<label for="nombre">
	<span>¿Cúal es tu nombre?</span>
	<input type="text" id="nombre" name="nombre">
</label>

Me lo agradecerán cuando pasen a backend.

Esta etiqueta es un identificador que le permite al lenguaje de backend identificar como llega la información, es decir:

nombre -> Carlos
apellidos -> Basilio Torres
edad -> 25

espero les ayude este pequeño aporte.

Aldo Miguel Ortiz Parodi

student•

No entendí, pero espero entenderlo cuando llegue.

Raúl Cordero Ibarra

student•

¿Cuál nombre, te refieres a la etiqueta "id" o a la etiqueta "name"?

Gianfranco Iván Misari Ortega

student•

Luis Aaron Lopez Ramirez

student•

Santiago alfonso Gutiérrez Agostini

student•

muy buen aporte muchas gracias

Diego Alejandro Pinto Moreno

student•

Esto esta genial

Gabriela Carolina Navarro Quintero

student•

Los inputs siempre deben ir dentro de labels y estos a su vez de form para que tenga relevancia semántica.

<form action="">
    <label for="">
        <input type="text">
    </label>
</form>

input

Texto

<label for="nombre">
    <span>¿Cuál es tu nombre?</span>
    <input type="text" id="nombre">
</label>

Fecha

<label for="inicio-platzi">
    <span>¿Qué día comenzaste en platzi?</span>
    <input type="date" id="inicio-platzi">
</label>

Hora

<label for="horario">
    <span>¿En qué horario estudias?</span>
    <input type="time" id="horario">
</label>

Alexis Daniel Sanchez Arias

student•

hola!! no en realidad es redundante meter un input dentro de un label ya que asociar for con id del input basta para llamarlo, en la lógica de la web estarias clickeando solo input, mientras si anidas input dentro de label como lo estas mostrando estarias clicleando el label y el input al mismo tiempo

DANIEL SUAREZ

student•

Que buena frase "El mejor formulario es el que no existe" :P

José Juan Pineda

student•

Entiendo el tema de la semántica, pero tengo varias dudas:

¿Por qué debe de ir un input dentro de un label?
¿Por qué los atributos for y id deben de tener el mismo valor en el input y en label?
¿Para qué sirve el atributo for?

Saludos y gracias! :D

Cristopher Reynaldo Huaroc Olivera

student•

Tengo la misma duda ;(

Andres Salazar

student•

Respondiendo:

Un input no debe ir dentro de label, es opcional, no hay regla en ello, se puede colocar luego o antes y tampoco debe llevar <span>, es muy posible que para "ilustrar" y que se entienda que hace label se haya colocado asi. No hay problema si <input> esta fuera, tampoco hay problema semántico
deben tener el mismo valor para que cuando hagas click sobre el texto de <label>, el enfoque vaya al input que le "corresponde" (el id que tiene el nombre en for), tambien hay que tener en cuenta que cada id debe ser distinto para cada input, de colocarse dis input con el mismo id, al hacer click, el enfoque se dará con el primero que tenga el id en el atriburto "for"
Aunque ya lo explique y según lo visto en clase podria decirse que: Esta <etiqueta> es para="nombre", en ingles: This <label> is for="nombre". Internamente el vagador busca el id con ese "for"

Nestor Quiroga Suárez 🧑🏼‍🚀

student•

Realice varias pruebas a las opciones de type que se encontraban en la documentación subida por la comunidad. Les comparto mi formulario. .

Geraldine Claros

student•

Les super recomiendo esta pagina donde ueden probar rapido cualqueir cosa que quieran hacer en HTML, CSS o JavaScript https://jsfiddle.net/

Hitler Manrique Heredia

student•

Muy buen dato, gracias

Ricardo Alfonso Chavez Vilcapoma

student•

Prefiero codilink que es como un Live Server, pero gracias por el aporte :D

Carlos Abel Tarazona Aranda

student•

Alex Macias

student•

No me queda claro cual es la función de la etiqueta <label>, ¿alguien podría ayudarme?

Korpi delfin

student•

¡Hola!

Te comparto la documentación de Mozilla donde explican la etiqueta. Es de buena práctica implementarla para usuarios con debilidad visual.

Alex Macias

student•

¡Gracias! También sirve para activar el input presionando el texto asociado a el, incrementando el hit area del input. :)

Héctor Padilla

student•

Elementos de un formulario form - Defines an interactive form with controls. label - Defines a label for a form control. input - Defines an interactive control within a web form. span - Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.

Juan David González Rodríguez

student•

Gracias !! :D aunque la información en espanglish , pero se logra entender

Cristobal Torres

student•

Buenisimo!

Luis Alberto Ducuara Blandón

student•

Hola gente.

Comentarles que cuando se va a probar unas etiquetas en Safari estás no van a funcionar, saldrán solo como un input normal. Esto se debe a que no hay un selector de fecha nativo para Safari. https://caniuse.com/#feat=input-datetime

Solución:

Probar en otro navegador como Chrome.
Poner un 'placeholder' en el input. <input type="date" id="inicio-platzi" placeholder="yyyy-mm-dd">.

Espero que os sirva de utilidad.

Albert Jose Salas Yustiz

student•

Mi comentario

Es decir con lo que indicas con el navegador safari, no existe una "uniformidad" en la presentación de la información (a pesar de que existe un estándar establecido), bien sea por alguna posible variabilidad de la versión ya sea por alguna obsolescencia de la versión del navegador, aunado a que los navegadores están "evolucionando" según sus nuevas actualizaciones mostradas en las nuevas versiones y cada grupo de desarrolladores de cada navegador suele colocar su huellas, por lo que para estar 100% seguros de que la visualización sea la correcta es mejor realizar las respectivas pruebas.

Edward Cabrera

student•

Eric López

student•

Gracias por tu aporte...