Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Desafío: Input y Label | Formularios
HTML Definitivo

book
Desafío: Input y Label

🏁 Objetivo

Mejore la experiencia del usuario del sitio web creando un formulario interactivo que requiera introducir el nombre, el correo electrónico y la contraseña, con etiquetas asociadas.

Incorpora a tu sitio web un formulario fácil de usar que mejore la participación y la interacción de los usuarios. Tu tarea consiste en:

  • Para la Entrada Name: Crea una entrada de texto que recoja los nombres de los usuarios. Utiliza los atributos correctos para garantizar una experiencia fluida;
    1. Define el type apropiado para la entrada de texto;
    2. Establece el placeholder como John;
    3. Asegúrate de que la entrada está enfocada por defecto.
  • Para la Entrada Email: Establece una entrada de email que recoja las direcciones de correo electrónico de los usuarios. Garantiza la exactitud de los datos utilizando los atributos adecuados;
    1. Define el type correcto para la entrada email;
    2. Establece el placeholder como example@gmail.com;
    3. Marca el campo como obligatorio.
  • Para la Entrada Password: Crea una entrada de contraseña segura que mantenga a salvo los datos del usuario. Utiliza los atributos adecuados para mejorar la protección de datos.
    1. Define el type correcto para la entrada de la contraseña;
    2. Marca el campo como obligatorio.
html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<!-- Change the code below -->
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="___" id="name" name="name" placeholder="___" ___ />

<label for="___">Email:</label>
<input type="___" id="email" name="email" placeholder="___" ___ />

<label ___="___">Password:</label>
<input type="___" ___="___" name="password" ___ />

<button type="submit">Submit</button>
</form>
</body>
</html>
  1. autofocus: Enfoca automáticamente el campo de entrada cuando se carga la página;
  2. required: Marca el campo de entrada como obligatorio, impidiendo el envío del formulario si se deja vacío;
  3. placeholder: Proporciona una pista o texto de ejemplo para el campo de entrada;
  4. for y id: Asocian una etiqueta con un campo de entrada para mejorar la accesibilidad;
  5. type: Especifica el tipo de datos esperados en el campo de entrada (por ejemplo, texto, correo electrónico, contraseña).
html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="John" autofocus />

<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="example@gmail.com"
required
/>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required />

<button type="submit">Submit</button>
</form>
</body>
</html>
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 6
some-alt