Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Crear un Formulario con Campos de Entrada y Etiquetas | Formularios HTML y Entrada de Usuario
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
HTML Definitivo

bookDesafío: Crear un Formulario con Campos de Entrada y Etiquetas

Objetivo

Mejorar la experiencia del usuario en el sitio web mediante la creación de un formulario interactivo que requiera entradas para nombre, correo electrónico y contraseña, cada uno con sus respectivas etiquetas.

Tarea

Agregar un formulario sencillo y fácil de usar a la página. Siga estos requisitos:

  1. Entrada de nombre
    • Utilizar un campo de texto.
    • Establecer el marcador de posición en John.
    • Hacer que el campo esté enfocado por defecto (autofocus).
  2. Entrada de correo electrónico
    • Utilizar un campo de correo electrónico.
    • Establecer el marcador de posición en example@gmail.com.
    • Marcar el campo como obligatorio.
  3. Entrada de contraseña
    • Utilizar un campo de contraseña.
    • Hacer que este campo sea obligatorio.
index.html

index.html

index.css

index.css

copy
  1. autofocus: enfoca automáticamente el campo de entrada al cargar la página.
  2. required: marca el campo de entrada como obligatorio, impidiendo el envío del formulario si queda vacío.
  3. placeholder: proporciona un texto de ejemplo o sugerencia para el campo de entrada.
  4. for y id: asocia una etiqueta con un campo de entrada para mejorar la accesibilidad.
  5. type: especifica el tipo de dato esperado en el campo de entrada (por ejemplo, text, email, password).
index.html

index.html

index.css

index.css

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 6

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain how the form validation works in this example?

What happens if a required field is left empty?

How can I further customize the appearance of the form?

bookDesafío: Crear un Formulario con Campos de Entrada y Etiquetas

Desliza para mostrar el menú

Objetivo

Mejorar la experiencia del usuario en el sitio web mediante la creación de un formulario interactivo que requiera entradas para nombre, correo electrónico y contraseña, cada uno con sus respectivas etiquetas.

Tarea

Agregar un formulario sencillo y fácil de usar a la página. Siga estos requisitos:

  1. Entrada de nombre
    • Utilizar un campo de texto.
    • Establecer el marcador de posición en John.
    • Hacer que el campo esté enfocado por defecto (autofocus).
  2. Entrada de correo electrónico
    • Utilizar un campo de correo electrónico.
    • Establecer el marcador de posición en example@gmail.com.
    • Marcar el campo como obligatorio.
  3. Entrada de contraseña
    • Utilizar un campo de contraseña.
    • Hacer que este campo sea obligatorio.
index.html

index.html

index.css

index.css

copy
  1. autofocus: enfoca automáticamente el campo de entrada al cargar la página.
  2. required: marca el campo de entrada como obligatorio, impidiendo el envío del formulario si queda vacío.
  3. placeholder: proporciona un texto de ejemplo o sugerencia para el campo de entrada.
  4. for y id: asocia una etiqueta con un campo de entrada para mejorar la accesibilidad.
  5. type: especifica el tipo de dato esperado en el campo de entrada (por ejemplo, text, email, password).
index.html

index.html

index.css

index.css

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

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