Etiqueta <form>

La etiqueta <form> se utiliza para crear formularios en HTML, que son fundamentales para recolectar información de los usuarios. Los formularios pueden incluir diferentes tipos de campos, como cuadros de texto, botones de opción, casillas de verificación, y botones de envío.

El formulario se envía a un servidor para ser procesado. Para ello, se utilizan los atributos action (para especificar la URL de destino del formulario) y method (para indicar cómo se enviarán los datos, típicamente GET o POST).

Ejemplo de un formulario básico


<form action="procesar.php" method="post">
    < for="nombre">Nombre:</label><br>
    <input type="text" id="nombre" name="nombre"><br><br>

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

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

En este ejemplo, el formulario incluye campos de texto para ingresar el nombre y el correo electrónico, y un botón de envío. Cuando el usuario haga clic en "Enviar", los datos se enviarán al servidor para ser procesados (en este caso, se envían a procesar.php utilizando el método POST).

Componentes comunes dentro de un formulario

  • <input>: Para crear diversos tipos de campos como texto, contraseñas, correos electrónicos, etc.
  • <textarea>: Para crear áreas de texto donde los usuarios puedan escribir párrafos largos.
  • <select> y <option>: Para crear menús desplegables.
  • <button>: Para crear botones adicionales, como los de resetear o realizar una acción personalizada.

Ejemplo con más campos de formulario


<form action="procesar.php" method="post">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre"><br>

    <label for="comentarios">Comentarios:</label>
    <textarea id="comentarios" name="comentarios"></textarea><br>

    <label for="sexo">Sexo:</label>
    <input type="radio" id="masculino" name="sexo" value="masculino">
    <label for="masculino">Masculino</label>
    <input type="radio" id="femenino" name="sexo" value="femenino">
    <label for="femenino">Femenino</label><br>

    <label for="intereses">Intereses:</label>
    <input type="checkbox" id="deporte" name="intereses[]" value="deporte">
        Deporte
    <input type="checkbox" id="musica" name="intereses[]" value="musica">
        Música<br>

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

Este ejemplo muestra cómo usar diferentes campos dentro de un formulario, como un área de texto (<textarea>), botones de opción (<input type="radio">), casillas de verificación (<input type="checkbox">), además del botón de envío.

Anterior Siguiente