HTML - Formularios

Elementos de formulario

<form action="/submit-form" method="POST">
  <!-- Los controles del formulario van aquí -->
</form>

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

  <label for="message">Mensaje:</label>
  <textarea id="message" name="message"></textarea><br>

  <label for="country">País:</label>
  <select id="country" name="country">
    <option value="usa">EE. UU.</option>
    <option value="canada">Canadá</option>
    <option value="uk">Reino Unido</option>
  </select><br>

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

Tipos de entrada de formulario

HTML ofrece varios tipos de entrada que determinan el comportamiento y la apariencia de los controles de formulario. Cada tipo de entrada tiene un propósito específico y proporciona una interfaz de usuario diferente. Aquí hay algunos tipos de entrada de formulario comúnmente utilizados:

1. Entrada de texto (type="text"): La entrada de texto es el control de formulario más básico. Permite a los usuarios ingresar una sola línea de texto. Se crea utilizando el elemento <input> con el atributo type establecido en "text".

2. Entrada de contraseña (type="password"): La entrada de contraseña es similar a la entrada de texto, pero oculta los caracteres ingresados por el usuario, reemplazándolos con puntos o asteriscos. Esto es útil para información sensible como contraseñas. Se crea utilizando el elemento <input> con el atributo type establecido en "password".

3. Botones de radio (type="radio"): Los botones de radio permiten a los usuarios seleccionar una sola opción de un grupo de opciones mutuamente excluyentes. Se crean utilizando el elemento <input> con el atributo type establecido en "radio". Múltiples botones de radio con el mismo atributo name forman un grupo de radio.

4. Casillas de verificación (type="checkbox"): Las casillas de verificación permiten a los usuarios seleccionar múltiples opciones de un grupo de opciones. Se crean utilizando el elemento <input> con el atributo type establecido en "checkbox". Cada casilla de verificación funciona independientemente de las demás.

5. Carga de archivos (type="file"): La entrada de carga de archivos permite a los usuarios seleccionar y cargar archivos desde su máquina local. Se crea utilizando el elemento <input> con el atributo type establecido en "file".

6. Campos ocultos (type="hidden"): Los campos ocultos no son visibles para los usuarios pero contienen datos que deben enviarse con el formulario. Se crean utilizando el elemento <input> con el atributo type establecido en "hidden". Los campos ocultos se utilizan a menudo para pasar información adicional o metadatos al servidor.

7. Botones de envío y reinicio (type="submit" y type="reset"): Los botones de envío y reinicio se utilizan para controlar el envío del formulario. El botón de envío envía los datos del formulario al servidor para su procesamiento, mientras que el botón de reinicio borra todos los campos del formulario y los restablece a sus valores predeterminados. Se crean utilizando el elemento <input> con el atributo type establecido en "submit" o "reset", respectivamente.

Estos son solo algunos ejemplos de los tipos de entrada disponibles en los formularios HTML. Cada tipo de entrada proporciona una forma específica para que los usuarios interactúen con el formulario e ingresen datos.

Atributos de Formulario

Los elementos de formulario HTML tienen atributos que permiten controlar su comportamiento y proporcionar funcionalidad. Estos atributos ayudan a identificar campos de formulario, establecer valores predeterminados, proporcionar pistas a los usuarios y aplicar validación. Veamos algunos atributos de formulario comúnmente utilizados:

1. El atributo name:

   El atributo name otorga un identificador único a un control de formulario. Es importante para el procesamiento de los datos del formulario en el lado del servidor. Cuando se envía un formulario, los datos se envían como pares clave-valor, donde el atributo name sirve como clave. También se usa para hacer referencia a los controles del formulario usando JavaScript.

2. El atributo value:

   El atributo value especifica el valor inicial o predeterminado de un control de formulario. Para entradas de texto y áreas de texto, establece el texto predeterminado que aparece en el campo. Para botones de radio y casillas de verificación, define el valor que se envía al servidor cuando se selecciona el control. Para botones de envío, establece el texto que aparece en el botón.

3. El atributo placeholder:

   El atributo placeholder proporciona un texto de sugerencia o ejemplo que se muestra dentro de un control de formulario cuando está vacío. Ayuda a los usuarios a entender qué tipo de entrada se espera en el campo. El texto del marcador de posición desaparece cuando el usuario comienza a escribir o el campo recibe el foco.

4. El atributo required:

   El atributo required es un atributo booleano que especifica si un control de formulario debe ser completado antes de que el formulario pueda ser enviado. Si un campo requerido se deja vacío, el formulario no se enviará y se pedirá al usuario que complete la información faltante. Este atributo ayuda con la validación del formulario en el lado del cliente.

5. Los atributos disabled y readonly:

   El atributo disabled se usa para desactivar un control de formulario, haciéndolo no editable y no cliqueable. Los controles de formulario desactivados no se envían con los datos del formulario. El atributo readonly, por otro lado, hace que un control de formulario sea de solo lectura, impidiendo que los usuarios modifiquen su valor pero aún permitiendo que se envíe con el formulario.

Estos atributos proporcionan control adicional y funcionalidad a los elementos de formulario HTML, permitiéndote crear formularios más interactivos y fáciles de usar. Al usar estos atributos, puedes guiar a los usuarios, establecer valores predeterminados, realizar validación básica de formularios y controlar el comportamiento de los controles de formulario.

Validación de Formularios

La validación de formularios mejora la integridad de los datos y la experiencia del usuario. HTML proporciona atributos y mecanismos para la validación de formularios del lado del cliente antes de enviar el formulario al servidor.

La validación de formularios del lado del cliente utiliza atributos HTML y JavaScript. Permite dar retroalimentación instantánea al usuario sobre su entrada y ayuda a evitar que se envíen datos inválidos al servidor.

El atributo pattern se usa comúnmente para la validación de formularios. Te permite especificar un patrón de expresión regular que debe coincidir con el valor de entrada. Si el valor de entrada no coincide con el patrón, el formulario no se enviará.

<input type="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" required>

El atributo pattern en el ejemplo valida un campo de entrada de correo electrónico. El patrón de expresión regular especifica que la entrada debe contener caracteres, dígitos y símbolos específicos, seguidos de un símbolo "@", nombre de dominio y un dominio de nivel superior.

Para validar campos de entrada numéricos, HTML proporciona los atributos min, max y step. Los atributos min y max definen los valores mínimo y máximo permitidos para la entrada, mientras que el atributo step especifica los intervalos numéricos legales.

<input type="number" name="quantity" min="1" max="10" step="1" required>

El atributo min establece el valor mínimo permitido en 1, el atributo max establece el valor máximo permitido en 10, y el atributo step especifica que el valor debe incrementarse en 1.

Para campos de entrada de texto, el atributo maxlength limita el número máximo de caracteres que se pueden ingresar. Esto restringe la entrada a una longitud específica.

<input type="text" name="username" maxlength="20" required>

El atributo maxlength limita la entrada a un máximo de 20 caracteres.

En algunos casos, es posible que desees desactivar la validación de formularios. El atributo novalidate se puede agregar a la etiqueta <form> para indicar que el formulario no debe validarse al enviarlo.

<form action="/submit" method="post" novalidate>
  <!-- Controles del formulario -->
</form>

El atributo novalidate enviará el formulario sin validación del lado del cliente, y cualquier validación deberá manejarse en el lado del servidor.

Aunque la validación del lado del cliente mejora la experiencia del usuario y reduce las solicitudes innecesarias al servidor, no se debe confiar únicamente en ella. La validación del lado del servidor siempre debe implementarse para garantizar la integridad y seguridad de los datos, ya que los usuarios pueden eludir la validación del lado del cliente.

Estilización de Formularios

Puedes estilizar formularios HTML usando CSS para mejorar su apariencia y hacerlos más fáciles de usar. CSS tiene selectores y propiedades que te permiten dirigirte a elementos de formulario y estilizarlos. Aquí hay algunas formas de estilizar formularios.

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px #4CAF50;
}

input:valid {
  border-color: #4CAF50;
}

input:invalid {
  border-color: #ff0000;
}

input[type="text"],
textarea {
  background-color: #f1f1f1;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

select {
  appearance: none;
  background-color: #f1f1f1;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background-image: url("arrow-down.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.error-message {
  color: #ff0000;
  font-size: 12px;
  margin-top: 5px;
}

Envío de formularios

El envío de formularios es el proceso de enviar datos de un formulario desde el lado del cliente (navegador web) al lado del servidor para su procesamiento. Cuando completas un formulario y haces clic en el botón de enviar, los datos del formulario se recopilan y envían al servidor utilizando un método y tipo de codificación específicos.

Cuando se envía un formulario, el navegador envía una solicitud HTTP al servidor con los datos del formulario incluidos en el cuerpo de la solicitud o en los parámetros de la URL, según el atributo method del formulario. El servidor recibe la solicitud, procesa los datos del formulario y generalmente responde con una nueva página o envía datos de vuelta al cliente.

Existen dos métodos comunes para enviar datos de formulario:

Cuando los datos del formulario se envían al servidor, se codifican utilizando un formato específico. Los dos tipos de codificación comunes son:

1. application/x-www-form-urlencoded:

   • Este es el tipo de codificación predeterminado para el envío de formularios.
   • Los datos del formulario se codifican como pares clave-valor separados por símbolos de ampersand (&).
   • Los caracteres especiales se codifican en URL, reemplazándolos con su código ASCII precedido por un signo de porcentaje (%).
   • Ejemplo: nombre=Juan&edad=25

2. multipart/form-data:

   • Este tipo de codificación se utiliza cuando el formulario incluye carga de archivos.
   • Los datos del formulario se dividen en múltiples partes, cada una representando un campo del formulario o un archivo.
   • Cada parte tiene su propio conjunto de encabezados y límites para separarla de otras partes.
   • Esta codificación permite la transmisión eficiente de datos binarios, como archivos, junto con otros campos del formulario.

En el lado del servidor, los datos del formulario se reciben y procesan según la tecnología y el marco del lado del servidor que se esté utilizando. Los lenguajes y marcos comunes del lado del servidor, como PHP, Node.js (Express.js), Ruby on Rails y Python (Django), proporcionan formas de manejar y acceder a los datos del formulario enviados a través de los métodos GET y POST.

<form action="/enviar" method="post" enctype="multipart/form-data">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" required>

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

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

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

Es importante manejar el envío de formularios de forma segura para prevenir ataques como scripts entre sitios (XSS) y falsificación de solicitudes entre sitios (CSRF). La validación del lado del servidor, la sanitización de datos y el uso de tokens CSRF son prácticas recomendadas para protegerse contra estas vulnerabilidades.