Lección 10: Formularios HTML

Introducción a los formularios HTML

Los formularios HTML son una parte esencial de la web interactiva. Permiten a los usuarios enviar datos al servidor web, facilitando la interacción entre el usuario y el sitio web. Los formularios se utilizan para una variedad de propósitos, como inicios de sesión, búsquedas, encuestas y más.

Elementos básicos de un formulario

Un formulario básico en HTML se crea con la etiqueta <form>. Dentro de esta etiqueta, se incluyen varios elementos de entrada como campos de texto, botones, casillas de verificación, etc.

Ejemplo de un formulario simple:

HTML


                    <form>

                      <label for="nombre">Nombre:</label>

                      <input type="text" id="nombre" name="nombre"><br><br>

                      <label for="email">Email:</label>

                      <input type="email" id="email" name="email"><br><br>

                      <input type="submit" value="Enviar">

                    </form>

Resultado visible:

Tipos de inputs

HTML5 introdujo varios nuevos tipos de inputs que facilitan la recopilación de datos específicos:

text: Para texto simple
email: Para direcciones de correo electrónico
password: Para contraseñas (oculta los caracteres)
number: Para valores numéricos
date: Para seleccionar fechas
checkbox: Para opciones que se pueden seleccionar o deseleccionar
radio: Para seleccionar una opción de un grupo
submit: Botón para enviar el formulario

Ejemplo de diferentes tipos de inputs:

HTML


                    <form>

                      <input type="text" placeholder="Texto"><br>

                      <input type="email" placeholder="Email"><br>

                      <input type="password" placeholder="Contraseña"><br>

                      <input type="number" placeholder="Número"><br>

                      <input type="date"><br>

                      <input type="checkbox"> Acepto los términos<br>

                      <input type="radio" name="opcion"> Opción 1

                      <input type="radio" name="opcion"> Opción 2<br>

                      <input type="submit" value="Enviar">

                    </form>

Resultado visible:

Etiquetas y accesibilidad

Las etiquetas (<label>) son importantes para la accesibilidad. Asocian un texto descriptivo con un elemento de formulario.

HTML


                    <form>

                      <label for="usuario">Nombre de usuario:</label>

                      <input type="text" id="usuario" name="usuario">

                    </form>

Resultado visible:

Validación de formularios

HTML5 proporciona atributos para la validación básica del lado del cliente:

required: Hace que un campo sea obligatorio
minlength y maxlength: Especifica la longitud mínima y máxima para campos de texto
min y max: Establece valores mínimos y máximos para campos numéricos
pattern: Permite usar expresiones regulares para validar la entrada

Ejemplo:

HTML


                    <form>

                      <label for="nombre">Nombre (requerido, mínimo 2 caracteres):</label>

                      <input type="text" id="nombre" name="nombre" required minlength="2"><br><br>

                      <label for="edad">Edad (entre 18 y 100):</label>

                      <input type="number" id="edad" name="edad" min="18" max="100"><br><br>

                      <input type="submit" value="Enviar">

                    </form>

Resultado visible:

Envío de formularios con Formspree

Para enviar formularios sin necesidad de un servidor propio, podemos usar Formspree. Aquí te explicamos cómo:

Ve a Formspree y crea una cuenta gratuita.
Una vez en tu dashboard, haz clic en "New Form" y dale un nombre a tu formulario.
Formspree te proporcionará una URL única para tu formulario.
Utiliza esta URL en el atributo action de tu formulario y establece el método como POST.

Ejemplo de un formulario configurado con Formspree:

HTML


                    <form action="https://formspree.io/f/tu_codigo_unico" method="POST">

                      <label for="nombre">Nombre:</label>

                      <input type="text" id="nombre" name="nombre" required><br><br>

                      <label for="email">Email:</label>

                      <input type="email" id="email" name="email" required><br><br>

                      <label for="mensaje">Mensaje:</label><br>

                      <textarea id="mensaje" name="mensaje" required></textarea><br><br>

                      <input type="submit" value="Enviar">

                    </form>

Nota: Reemplaza "tu_codigo_unico" con el código que Formspree te proporciona.

Cuando alguien envíe este formulario, recibirás un email con la información. Formspree también ofrece una interfaz web donde puedes ver todos los envíos.

Ejercicio práctico

Crea un formulario de contacto que incluya:

Campos para nombre, email y mensaje
Validación adecuada para cada campo
Un campo de selección para el motivo del contacto (consulta, sugerencia, otro)
Configúralo para usar Formspree

Lección anterior Siguiente lección