Saltar al contenido principal

Cómo crear formularios en HTML: Guía paso a paso con ejemplos prácticos

Creación de formularios con HTML

Los formularios en HTML permiten recopilar datos de los usuarios a través de campos como texto, correo y contraseñas. En esta guía práctica aprenderás cómo crear un formulario en HTML paso a paso, usando las etiquetas esenciales como <form>, <input>, <label> y más. Ideal para quienes dan sus primeros pasos en desarrollo web.

¿Que es un formulario en HTML?​

Un formulario en HTML es una sección de una página web que permite a los usuarios ingresar datos y enviarlos a un servidor para su procesamiento. Los formularios son fundamentales para la interacción del usuario con las aplicaciones web, ya que permiten la recopilación de información como nombres, correos electrónicos, contraseñas y otros datos relevantes.

Estructura Básica de un Formulario y etiquetas comunes​

Un formulario en HTML se define usando la etiqueta <form>. Dentro de esta etiqueta, se incluyen diversos elementos de formulario como campos de texto, botones, cajas de verificación y más.

Ejemplo de Formulario en HTML con etiquetas comunes​

Explicación del Código​

Etiqueta <form>​

El elemento HTML <form> representa una sección del documento que contiene controles interactivos para enviar información, lo cual es esencial para la comunicación entre diferentes sistemas y aplicaciones. Este elemento contiene varios atributos importantes:

El atributo action define la URL a la que se enviarán los datos del formulario.

El atributo method especifica el método HTTP para enviar los datos (GET o POST).

Etiqueta <label>​

Se utiliza para describir el propósito de un campo de formulario. El atributo for debe coincidir con el id del elemento del formulario asociado.

Campos de Entrada <input>​

La etiqueta <input> especifica un campo de entrada de tipo input, es decir, un campo en el que el usuario puede ingresar datos.

Atributo type="text": Campo de texto para la entrada de texto simple.

Atributo type="email": Campo para la entrada de correo electrónico, que valida automáticamente el formato.

Atributo type="password": Campo para la entrada de contraseñas, que oculta el texto introducido.

Atributo name: El nombre del campo que se envía al servidor.

Atributo required: Atributo que hace que el campo sea obligatorio.

Botón de Envío <button>​

El elemento <button> HTML es un elemento interactivo que el usuario activa mediante el ratón, el teclado, el dedo, un comando de voz u otra tecnología de asistencia. Una vez activado, realiza una acción como enviar un formulario o abrir un cuadro de diálogo.

Atributo type="submit": El atributo type="submit" en un elemento <button> en HTML sirve para enviar un formulario al que pertenece ese botón.

Cuando un <button type="submit"> se encuentra dentro de un <form>, al hacer clic en él:

  • Se activa el evento de envío (submit) del formulario.

  • El navegador intenta validar el formulario (por ejemplo, que los campos required estén completos).

  • Si la validación pasa, se envían los datos del formulario a la URL indicada en el atributo action del <form>, usando el método definido en method (por defecto es GET).

Etiquetas más comunes en formularios HTML​

Los formularios en HTML utilizan diversas etiquetas para crear campos de entrada, botones y otros elementos interactivos. A continuación, se describen las etiquetas más comunes utilizadas en la creación de formularios.

Campos de Texto​

Campos para que los usuarios introduzcan texto.

HTML
<label for="name">Nombre: </label> <input type="text" id="name" name="name" />

Campos de Contraseña​

Campos para que los usuarios introduzcan contraseñas. El texto introducido se oculta.

HTML
<label for="password">Contraseña: </label>
<input type="password" id="password" name="password" />

Campos de Correo Electrónico​

Campos específicamente para direcciones de correo electrónico, con validación automática.

HTML
<label for="email">Correo Electrónico: </label>
<input type="email" id="email" name="email" />

Campos de Número​

Campos para que los usuarios introduzcan números, como edades o cantidades.

HTML
<label for="age">Edad: </label> <input type="number" id="age" name="age" />

Campos de Fecha​

Campos para que los usuarios seleccionen una fecha, como su fecha de nacimiento.

HTML
<label for="birthdate">Fecha de Nacimiento: </label>
<input type="date" id="birthdate" name="birthdate" />

Botones de Radio​

Los botones de radio permiten a los usuarios seleccionar una única opción de un conjunto.

HTML
<label>Género: </label>
<input type="radio" id="masculino" name="gender" value="masculino" />
<label for="masculino"> Masculino </label>
<input type="radio" id="femenino" name="gender" value="femenino" />
<label for="femenino"> Femenino </label>

Casillas de Verificación​

Las casillas de verificación permiten a los usuarios seleccionar múltiples opciones de un conjunto.

HTML
<label>Intereses: </label>
<input type="checkbox" id="musica" name="interest" value="musica" />
<label for="musica"> Música </label>
<input type="checkbox" id="deportes" name="interest" value="deportes" />
<label for="deportes"> Deportes </label>
<input type="checkbox" id="lectura" name="interest" value="lectura" />
<label for="lectura"> Lectura </label>

Menús Desplegables​

Los menús desplegables permiten a los usuarios seleccionar una opción de una lista predefinida.

HTML
<label for="country">País: </label>
<select id="country" name="country">
  <option value="argentina">Argentina</option>
  <option value="brasil">Brasil</option>
  <option value="chile">Chile</option>
  <option value="mexico">México</option>
</select>

Área de Texto​

Un área de texto permite a los usuarios ingresar múltiples líneas de texto.

HTML
<label for="comment">Comentarios: </label>
<textarea id="comment" name="comment" rows="3" cols="40"></textarea>

Botón de Envío​

Un botón de envío permite a los usuarios enviar el formulario.

HTML
<button type="submit">Enviar</button>

Conclusión​

Crear formularios con HTML es una habilidad fundamental para cualquier desarrollador web. Entender cómo utilizar las diversas etiquetas de formulario y cómo aplicar estilos con CSS puede ayudarte a crear interfaces de usuario efectivas y atractivas. Este artículo te proporciona una base sólida para comenzar a trabajar con formularios en tus proyectos web.

¡Sigue practicando y experimentando con diferentes elementos y estilos para dominar esta área crucial del desarrollo web!

Recursos
Ejercicios

🚀 Poné a prueba tus conocimientos con estos ejercicios básicos de formularios: