Formularios Básicos en HTML

Los formularios en HTML se utilizan para recopilar datos del usuario. Los datos del formulario se pueden enviar a un servidor para su procesamiento, como en una búsqueda en la web, registro de usuario o encuestas.

Estructura Básica de un Formulario

Sintaxis:

<form action="URL-de-enlace" method="método">
    <!-- Campos del formulario -->
</form>

action: Especifica la URL a la que se enviarán los datos del formulario. Si no se especifica, los datos se enviarán a la misma página.method: Define el método HTTP para enviar los datos. Los valores comunes son GET y POST.

• GET: Los datos se envían como parámetros en la URL.
• POST: Los datos se envían en el cuerpo de la solicitud, más adecuado para datos sensibles.

Campos de Formulario Comunes

Campo de Texto (<input type="text">)

Ejemplo:

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

type="text": Campo de entrada de texto de una sola línea.

Campo de Contraseña (<input type="password">)

Ejemplo:

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

type="password": Campo de entrada de texto oculto, útil para contraseñas.

Área de Texto (<textarea>)

Ejemplo:

<label for="comentarios">Comentarios:</label>
<textarea id="comentarios" name="comentarios" rows="4" cols="50"></textarea>

<textarea>: Campo de entrada de múltiples líneas para texto largo.

Botón de Envío (<input type="submit">)

Ejemplo:

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

type="submit": Envía el formulario.

Botón de Restablecer (<input type="reset">)

Ejemplo:

<input type="reset" value="Restablecer" />

type="reset": Restablece todos los campos del formulario a sus valores iniciales.

Casilla de Verificación (<input type="checkbox">)

Ejemplo:

<label>
    <input type="checkbox" name="suscripcion" value="boletin" />
    Suscribirse al boletín
</label>

type="checkbox": Permite seleccionar una o más opciones.

Botón de Radio (<input type="radio">)

Ejemplo:

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

type="radio": Permite seleccionar solo una opción de un grupo.

Menú Desplegable (<select>)

Ejemplo:

<label for="pais">País:</label>
<select id="pais" name="pais">
    <option value="argentina">Argentina</option>
    <option value="brasil">Brasil</option>
    <option value="chile">Chile</option>
</select>

<select>: Crea un menú desplegable. Las opciones se definen con <option>.

Campo de Archivo (<input type="file">)

Ejemplo:

<label for="archivo">Seleccionar archivo:</label>
<input type="file" id="archivo" name="archivo" />

type="file": Permite al usuario seleccionar un archivo para cargar.

Ejemplo Completo de Formulario

<form action="/enviar" method="POST">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" /><br><br>

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

    <label for="comentarios">Comentarios:</label>
    <textarea id="comentarios" name="comentarios" rows="4" cols="50"></textarea><br><br>

    <label>
        <input type="checkbox" name="suscripcion" value="boletin" />
        Suscribirse al boletín
    </label><br><br>

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

    <label for="pais">País:</label>
    <select id="pais" name="pais">
        <option value="argentina">Argentina</option>
        <option value="brasil">Brasil</option>
        <option value="chile">Chile</option>
    </select><br><br>

    <label for="archivo">Seleccionar archivo:</label>
    <input type="file" id="archivo" name="archivo" /><br><br>

    <input type="submit" value="Enviar" />
    <input type="reset" value="Restablecer" />
</form>