HTML - Control de formularios

Campos de Entrada

Los campos de entrada son el tipo más común de control de formulario. Permiten a los usuarios ingresar varios tipos de datos, como texto, números y fechas. Aquí están algunos campos de entrada comúnmente utilizados:

Casillas de Verificación y Botones de Radio

Las casillas de verificación y los botones de radio se usan cuando los usuarios necesitan seleccionar una o más opciones de un grupo de opciones.

Listas Desplegables y Cuadros de Selección

Las listas desplegables y los cuadros de selección proporcionan una forma para que los usuarios elijan una o más opciones de una lista predefinida.

Botones

Los botones se utilizan para activar acciones o enviar formularios.

Áreas de Texto

Las áreas de texto se utilizan para ingresar texto de varias líneas.

Los atributos rows y cols se pueden usar para establecer las dimensiones iniciales del área de texto. El atributo rows establece el número de líneas de texto visibles, mientras que el atributo cols establece el ancho promedio de caracteres. Las áreas de texto son redimensionables por defecto, permitiendo a los usuarios ajustar el tamaño del área de entrada. El comportamiento de redimensionamiento se puede controlar usando propiedades CSS como resize.

Elementos de Etiqueta

El elemento <label> se utiliza para crear una etiqueta para un control de formulario. Proporciona una descripción de texto que se asocia con un control de formulario específico, como un campo de entrada, una casilla de verificación o un botón de opción. El texto de la etiqueta ayuda a comprender el propósito del control del formulario y qué información se debe ingresar o seleccionar.

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

Asociación de Etiquetas con Controles de Formulario

Para asociar una etiqueta con un control de formulario, puedes usar el atributo for del elemento <label>. El valor del atributo for debe coincidir con el atributo id del control de formulario correspondiente. Esto crea una conexión lógica entre la etiqueta y el control del formulario, permitiendo hacer clic en la etiqueta para enfocar el control asociado.

<input type="checkbox" id="terms" name="terms">
<label for="terms">Acepto los términos y condiciones</label>

Importancia del Etiquetado para la Accesibilidad

El etiquetado de controles de formulario es importante para la accesibilidad. Ayuda a comprender el propósito y contexto de cada control de formulario al usar tecnologías de asistencia, como lectores de pantalla. Cuando una etiqueta está correctamente asociada con un control de formulario, las tecnologías de asistencia pueden transmitir el texto de la etiqueta, facilitando la navegación e interacción con el formulario.

Además del atributo for, también puedes anidar el control de formulario dentro del elemento <label>. Esto asocia implícitamente la etiqueta con el control anidado, incluso sin usar el atributo for. Sin embargo, usar el atributo for sigue siendo considerado una buena práctica para una asociación explícita.

<label>
  <input type="radio" name="gender" value="male"> Masculino
</label>
<label>
  <input type="radio" name="gender" value="female"> Femenino
</label>

Al etiquetar correctamente los controles de formulario, haces que tus formularios sean más accesibles y fáciles de usar para todos los usuarios, incluidos aquellos que dependen de tecnologías de asistencia.

Elementos Fieldset

El elemento <fieldset> agrupa controles de formulario relacionados dentro de un formulario. Crea una agrupación visual y lógica de controles de formulario, haciendo que el formulario sea más estructurado y fácil de entender. El elemento <fieldset> contiene los controles agrupados y también puede incluir un título o etiqueta para el grupo usando el elemento <legend>.

<form>
  <fieldset>
    <legend>Información de Contacto</legend>
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email"><br>
    <label for="phone">Teléfono:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

Elementos Legend

El elemento <legend> proporciona un título o etiqueta para un <fieldset>. Aparece como un encabezado dentro del fieldset y describe los controles de formulario agrupados. El elemento <legend> debe ser el primer hijo del elemento <fieldset>.

<fieldset>
  <legend>Dirección de Envío</legend>
  <label for="address">Dirección:</label>
  <input type="text" id="address" name="address"><br>
  <label for="city">Ciudad:</label>
  <input type="text" id="city" name="city"><br>
  <label for="zip">Código Postal:</label>
  <input type="text" id="zip" name="zip">
</fieldset>

Agrupación de Controles de Formulario Relacionados

Al agrupar controles de formulario usando <fieldset>, considera la relación lógica entre los controles. Agrupa los controles que están estrechamente relacionados o pertenecen a la misma categoría. Esto ayuda a organizar el formulario y facilita la comprensión y el llenado por parte de los usuarios.

Algunos ejemplos comunes de agrupación de controles de formulario relacionados incluyen:

Al agrupar controles de formulario relacionados con <fieldset> y proporcionar etiquetas claras con <legend>, mejoras la usabilidad y legibilidad de tus formularios. Guía a los usuarios a través del formulario y facilita la comprensión de la información requerida.

Recuerda usar etiquetas apropiadas para cada control de formulario dentro del fieldset para mantener la accesibilidad y usabilidad.

Atributo Required

El atributo required se utiliza para indicar que un control de formulario debe ser completado antes de que el formulario pueda ser enviado. Cuando un control de formulario tiene el atributo required, el navegador impedirá que el formulario se envíe si el control se deja vacío o no cumple con los criterios de validación especificados.

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

Atributo Disabled

El atributo disabled se utiliza para desactivar un control de formulario, haciéndolo no interactivo y no editable. Los controles de formulario desactivados generalmente aparecen en gris y no se pueden enfocar, hacer clic o modificar.

<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username" disabled>

Los controles de formulario desactivados no se envían como parte de los datos del formulario cuando este se envía. Se omiten durante el procesamiento del formulario.

Atributo Readonly

El atributo readonly se utiliza para hacer que un control de formulario sea de solo lectura, lo que significa que puedes ver su valor pero no puedes cambiarlo. Los controles de formulario de solo lectura aún pueden recibir el foco y pueden incluirse en el envío del formulario.

<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" value="usuario@ejemplo.com" readonly>

Los controles de formulario de solo lectura son útiles cuando quieres mostrar valores preestablecidos o calculados que no deben ser modificados por el usuario.

Atributo Placeholder

El atributo placeholder se utiliza para proporcionar un texto de sugerencia o ejemplo dentro de un control de formulario cuando está vacío. El texto del placeholder desaparece cuando empiezas a escribir o el control de formulario recibe el foco.

<label for="search">Buscar:</label>
<input type="text" id="search" name="search" placeholder="Ingresa término de búsqueda...">

Los placeholders deben usarse como una sugerencia complementaria y no deben reemplazar el etiquetado adecuado de los controles de formulario. Son útiles para proporcionar orientación adicional o ejemplos, pero no deben ser la única forma de transmitir el propósito de un control de formulario.

Aplicando CSS a los Controles de Formulario

Para aplicar estilos CSS a los controles de formulario, puedes usar selectores CSS para dirigirte a elementos de formulario específicos. Puedes seleccionar controles de formulario basándote en su tipo, clase, ID u otros atributos. Aquí hay algunos ejemplos de selectores CSS para controles de formulario:

/* Seleccionando todos los elementos input */
input {
  /* Estilos CSS */
}

/* Seleccionando un tipo de input específico */
input[type="text"] {
  /* Estilos CSS */
}

/* Seleccionando un control de formulario con una clase específica */
.form-control {
  /* Estilos CSS */
}

/* Seleccionando un control de formulario con un ID específico */
#username {
  /* Estilos CSS */
}

Una vez que hayas seleccionado los controles de formulario, puedes aplicar varias propiedades CSS para estilizarlos. Algunas propiedades CSS comunes utilizadas para estilizar controles de formulario incluyen:

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

Pseudo-clases para Estados de Controles de Formulario

CSS proporciona pseudo-clases que te permiten estilizar controles de formulario basándote en sus estados. Las pseudo-clases son palabras clave añadidas a los selectores para especificar un estado especial de un elemento. Algunas pseudo-clases comúnmente utilizadas para controles de formulario son:

input[type="text"]:focus {
  outline: none;
  border-color: blue;
}

input[type="email"]:valid {
  border-color: green;
}

input[type="number"]:invalid {
  border-color: red;
}

input[type="text"]:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

Personalizando la Apariencia de los Controles de Formulario

CSS te permite cambiar la apariencia de los controles de formulario más allá de los estilos predeterminados del navegador. Puedes usar propiedades y técnicas CSS para crear controles de formulario visualmente atractivos y únicos que coincidan con el diseño de tu sitio web.

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  transition: background-color 0.3s;
}

input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

select {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  appearance: none;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

select:focus {
  outline: none;
  border-color: blue;
}