Saltar al contenido principal
Codigo Heroe
Tarea anterior
Formularios: introducción6/16
A la lista de tareas
  1. 1. El primer formulario
  2. 2. Un campo de texto
  3. 3. El identificador y el valor predeterminado
  4. 4. La etiqueta de un campo
  5. 5. Asociar una etiqueta y un campo mediante id
  6. 6. Agregar otro campo
  7. 7. Un campo de contraseña
  8. 8. El botón de envío del formulario
  9. 9. Un campo de texto de varias líneas
  10. 10. Una casilla de verificación
  11. 11. Un botón de opción
  12. 12. Un grupo de botones de opción
  13. 13. Una lista desplegable
  14. 14. Una lista de selección múltiple
  15. 15. Un campo para subir archivos
  16. 16. Un campo oculto
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Agregar otro campo

Es hora de agregar otro campo al formulario.

Hagámoslo siguiendo las buenas prácticas: además del nombre, asigna un identificador al campo, agrega una etiqueta y asócialos.

Podríamos asociar el campo y su etiqueta envolviéndolos en <label>. Pero en este ejercicio vamos a practicar la opción más compleja: usar id y for.
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Agregar otro campo</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Iniciar sesión</h1> <form action="https://echo.htmlacademy.ru/courses" method="post"> <label for="login-field">Tu nombre de usuario</label> <input type="text" name="login" id="login-field"> <br> <br> <!-- agrega la etiqueta aquí --> <!-- agrega el campo aquí --> </form> </body> </html>
CSS
h1 { font-size: 18px; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Agrega un segundo campo de texto después del primero, con el nombre password y el identificador password-field.
    2. Agrega la etiqueta Tu contraseña y asóciala con el segundo campo mediante el atributo for.
    Codigo Heroe

    © 2023-2026, codigoheroe.com