Saltar al contenido principal
Codigo Heroe
Lista de tareas
Formularios: introducción1/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

El primer formulario

Los formularios sirven para enviar datos de una página a un servidor web, que puede procesarlos: registrar a una persona, crear un mensaje en un foro, enviar un correo y mucho más. En pocas palabras, los formularios son indispensables en la web.

Para crear un formulario se usa la etiqueta de apertura y cierre <form>, dentro de la cual se colocan los campos. La etiqueta <form> tiene dos atributos importantes:

  • action indica la dirección, o URL, a la que se envía el formulario;

  • method indica el método de envío del formulario.

Por ejemplo:

<form action="https://echo.htmlacademy.ru/courses" method="get">
  campos del formulario
</form>

Para enviar un formulario se suelen usar los métodos get o post. Si no se indica el atributo method, se usa get.

El método get envía los datos del formulario en la cadena de consulta. Es decir, los datos se ven en la barra de direcciones del navegador, después del signo de interrogación. Por ejemplo:

https://www.google.com/search?q=htmlacademy

El método get es una buena opción para los formularios de búsqueda, porque permite obtener un enlace a los resultados y compartirlo.

El método post envía los datos en el cuerpo de la solicitud HTTP. Se usa cuando hay que enviar muchos datos y no se necesita un enlace al resultado de su procesamiento. Por ejemplo, al editar un perfil personal.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La etiqueta form</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Iniciar sesión</h1> <!-- Agrega el formulario aquí --> </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 formulario vacío a la página.
    2. Asígnale la dirección de envío https://echo.htmlacademy.ru/courses.
    3. Establece post como método de envío de los datos.

    Al agregar el formulario vacío no verás ningún cambio en el navegador. Lo resolveremos en el siguiente ejercicio.

    Codigo Heroe

    © 2023-2026, codigoheroe.com