Creación de formularios HTML

¡Bienvenido a la próxima lección! En esta lección, aprenderá a crear formularios mediante HTML. Los formularios son esenciales para recopilar datos introducidos por el usuario, que posteriormente puede procesar con PHP. ¡Empecemos!

¿Qué son los formularios HTML?

Los formularios HTML se utilizan para recopilar datos introducidos por el usuario. Permiten a los usuarios rellenar campos, realizar selecciones y enviar datos a un servidor para procesarlos.

Ejemplo: Un formulario de inicio de sesión en el que los usuarios introducen su nombre de usuario y contraseña.

Punto clave: Los formularios actúan como puente entre el usuario y sus scripts de PHP.

Crear un formulario sencillo

Así se crea un formulario HTML básico:

Explicación:

• action: Especifica el archivo PHP que procesará los datos del formulario.
• method: Especifica cómo se enviarán los datos (GET o POST).
• required: Garantiza que el campo se rellene antes del envío.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Elementos de formulario

Los formularios pueden incluir varios tipos de entrada para recopilar distintos tipos de datos:

• text: Para introducir texto en una sola línea.
• email: Para direcciones de correo electrónico.
• password: Para introducir contraseñas.
• checkbox: Para selecciones múltiples.
• radio: Para selecciones únicas.
• submit: Para enviar el formulario.

Ejemplo:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Usar botones de opción

Los botones de opción permiten a los usuarios seleccionar una opción de un grupo. Ejemplo:

Consejo: Utilice el mismo atributo name para todos los botones de opción de un grupo.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

Usar casillas de verificación

Las casillas de verificación permiten a los usuarios seleccionar varias opciones. Ejemplo:

Consejo: Utilice una sintaxis de array (hobbies[]) para recopilar varios valores.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

Menús desplegables

Los menús desplegables permiten a los usuarios elegir una opción de una lista. Ejemplo:

Consejo: Utilice selected para establecer una opción predeterminada.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Accesibilidad de los formularios

Asegúrese de que sus formularios sean accesibles para todos los usuarios:

• Utilice etiquetas label vinculadas a los campos de entrada mediante atributos for.
• Agrupe los campos de entrada relacionados mediante fieldset y legend.
• Pruebe la facilidad de uso de los formularios en dispositivos móviles.

Consejo: ¡Los formularios accesibles mejoran la experiencia de usuario para todos!

¡Excelente trabajo!

¡Enhorabuena! Ha aprendido a crear formularios HTML con varios tipos de entrada, incluidos campos de texto, botones de opción, casillas de verificación y menús desplegables. Los formularios son la base de la entrada de datos del usuario en el desarrollo web. En la próxima lección, aprenderemos a procesar los datos de los formularios mediante PHP. ¡Sigamos programando!