Introducción a los Formularios en HTML

En el desarrollo web, los formularios en HTML son la principal herramienta para recopilar información de los usuarios. Todo dato que introduzca un usuario en una página web, como su nombre, correo electrónico o una contraseña, se captura a través de un formulario. Posteriormente, estos datos pueden almacenarse en una base de datos para su procesamiento.

Un formulario en HTML se define con la etiqueta <form>. Dentro de esta etiqueta se incluyen diferentes controles o elementos de entrada que permiten al usuario escribir, seleccionar o enviar información.

Elementos principales de un formulario html

  1. Etiqueta <form>


    Define el inicio y el fin del formulario. Puede contener atributos como:

    • action: indica a dónde se enviarán los datos (normalmente a un archivo en el servidor).

    • method: define cómo se enviarán los datos. Los más comunes son:

      • GET: envía los datos en la URL (visible).

      • POST: envía los datos de forma oculta (más seguro para información sensible).

  2. Etiqueta <input>


    Permite capturar datos en diferentes formatos. Los tipos más comunes son:

    • text: campo de texto.

    • password: campo para contraseñas (oculta los caracteres).

    • email: campo para correos electrónicos.

    • number: campo numérico.

    • submit: botón para enviar el formulario.

  3. Etiqueta <label>


    Sirve para colocar una descripción a cada campo de entrada. Mejora la accesibilidad y la comprensión del formulario.

  4. Etiqueta <textarea>


    Permite que el usuario escriba un texto más largo, como un comentario o descripción.

  5. Etiqueta <select> y <option>


    Se utilizan para crear listas desplegables donde el usuario puede elegir una opción.

  6. Botones de envío


    Generalmente se crean con <input type="submit"> o <button type="submit">. Son los que mandan la información al servidor.

Formulario html

Instrucciones para crear un formulario en HTML

  1. Abre un editor de texto (como Visual Studio Code, Sublime Text o el bloc de notas).

  2. Escribe la estructura básica de un documento HTML. Todo archivo debe iniciar con la etiqueta <!DOCTYPE html> para indicar que usaremos HTML5.

  3. Agrega la etiqueta <html> que encierra todo el documento, y dentro coloca las secciones <head> y <body>.

  4. Dentro de <head>, escribe el título de la página con la etiqueta <title>. Este título aparecerá en la pestaña del navegador.

  5. En la sección <body> colocaremos el formulario. Abre la etiqueta <form> para indicar el inicio del formulario.

  6. Dentro del formulario, agrega los campos de entrada (<input>) junto con sus etiquetas (<label>).

    • Primero un campo de texto para el nombre.

    • Luego un campo de tipo email para el correo electrónico.

    • Después un campo de tipo tel para el teléfono.

  7. Finalmente, agrega un botón de tipo submit para enviar la información.

  8. Cierra la etiqueta </form> y luego </body> y </html>.

Innovación

Publicidad inteligente basada en datos estratégicos.

Estrategia

Creatividad

atencion@estrategik.net

+52-322-246-9870

estrategik.net © 2025. All rights reserved.