¿Cómo crearás un formulario HTML?

Para crear un formulario HTML, utilizaré el elemento <form>. Dentro de él se colocarán elementos de control, como campos de texto (<input type="text">), campos de contraseña (<input type="password">), casillas de verificación (<input type="checkbox">), botones de radio (<input type="radio">), listas desplegables (<select> y <option>), áreas de texto (<textarea>) y botones de envío (<button type="submit"> o <input type="submit">).

Cada elemento del formulario tendrá un atributo name para identificarlo en el lado del servidor y, generalmente, un atributo id para vincularlo con una etiqueta (<label>).

Atributos de <form>:

• action: URL a la que se enviarán los datos del formulario al enviarlo.
• method: Método de solicitud HTTP para enviar datos (GET o POST).
• enctype: Tipo de codificación de datos al enviar (por ejemplo, multipart/form-data para subir archivos).

Ejemplo de un formulario simple:

<form action="/submit-form" method="post">
  <label for="username">Nombre de usuario:</label><br>
  <input type="text" id="username" name="username"><br><br>

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

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Recordarme</label><br><br>

  <label for="country">País:</label><br>
  <select id="country" name="country">
    <option value="ru">Rusia</option>
    <option value="us">EE.UU.</option>
  </select><br><br>

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

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

La validación del formulario puede implementarse tanto en el lado del cliente (usando atributos de validación HTML5, JavaScript) como en el lado del servidor.

Atributos de validación HTML5:

• required: Campo obligatorio.
• minlength, maxlength: Longitud mínima y máxima del campo de texto.
• min, max: Valor mínimo y máximo para campos numéricos.
• type con diferentes valores (email, url, number, date, etc.) para validación automática en el navegador.
• pattern: Expresión regular para validar la entrada.

Ejemplo usando validación HTML5:

<form action="/submit-form" method="post">
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Edad (de 18 a 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Código postal (5 dígitos):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

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

Para estilizar el formulario se utilizará CSS. Para lógica más compleja o envío asíncrono de datos, se empleará JavaScript. Para mejorar la accesibilidad del formulario, se usarán atributos ARIA adecuados y una estructura HTML correcta.