Formularios en HTML

1. Estructura Básica de un Formulario

Los formularios están definidos por la etiqueta <form> y pueden contener varios elementos de entrada.

<form action="/enviar_datos" method="get">
    <!-- Contenido del formulario -->
</form>
            

2. Elementos de Entrada

Los formularios pueden incluir diferentes tipos de entradas como texto, correo y contraseñas.

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre">

<label for="email">Correo:</label>
<input type="email" id="email" name="email" placeholder="correo@ejemplo.com">

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

3. Botones de Envío y Restablecimiento

Los botones permiten enviar el formulario o restablecer sus campos.

<button type="submit">Enviar</button>
<button type="reset">Restablecer</button>
            

4. Selectores de Opciones

HTML permite crear opciones seleccionables como botones de radio, casillas de verificación y menús desplegables.

<label>Género:</label>
<input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="femenino"> Femenino

<label>Aficiones:</label>
<input type="checkbox" name="aficion" value="deporte"> Deporte
<input type="checkbox" name="aficion" value="música"> Música

<label for="pais">País:</label>
<select id="pais" name="pais">
    <option value="mexico">México</option>
    <option value="españa">España</option>
</select>
            

5. Ejemplo Completo de Formulario

Este es un ejemplo de formulario que incluye varios tipos de entradas para datos personales.

<form action="/enviar_datos" method="get">
    <label for="nombre">Nombre Completo:</label>
    <input type="text" id="nombre" name="nombre" required placeholder="Escribe tu nombre completo">

    <label for="email">Correo Electrónico:</label>
    <input type="email" id="email" name="email" required placeholder="correo@ejemplo.com">

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

    <label>Género:</label>
    <input type="radio" name="genero" value="masculino"> Masculino
    <input type="radio" name="genero" value="femenino"> Femenino

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

    <label for="pais">País:</label>
    <select id="pais" name="pais">
        <option value="mexico">México</option>
        <option value="españa">España</option>
        <option value="argentina">Argentina</option>
    </select>

    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje" rows="4" cols="50" placeholder="Escribe tu mensaje aquí..."></textarea>

    <button type="submit">Enviar</button>
    <button type="reset">Restablecer</button>
</form>
            

Conclusión

Los formularios en HTML son esenciales para recoger y enviar datos del usuario. Practica con diferentes tipos de entrada para dominar este tema.