Componentes de selección
- Área: Catálogo de componentes de interfaz
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
Se describirán las pautas a cumplir relativas a los campos de selección simple o múltipe de un formulario web que incluyen un número alto de opciones a elegir por el usuario.
Pautas
| Título | Carácter |
|---|---|
| Pocas opciones posibles | Obligatoria |
| Muchas opciones de selección posibles | Recomendada |
| Opciones dependientes de otro campo | Obligatoria |
| Selección múltiple | Obligatoria |
Pocas opciones posibles
Se utilizará un componente de lista desplegable de selección simple cuando el número de elementos posible no sea muy elevado.
La elección de un único elemento de una lista de pocos valores se realizará mediante un componente de lista desplegable. El formato a utilizar seguirá el siguiente ejemplo:
<select id="provincia" name="provincia">
<option value="Almería">Almería</option>
<option value="Cádiz">Cádiz</option>
<option value="Córdoba">Córdoba</option>
<option value="Granada">Granada</option>
<option value="Huelva">Huelva</option>
<option value="Jaen">Jaen</option>
<option value="Málaga">Málaga</option>
<option value="Sevilla">Sevilla</option>
</select>
Cambios sufridos en HTML5:
Se han incorporado los siguientes atributos:
- Formaction, formenctype, formmethod, formnovalidate y formtarget: atributos que modifican la acción, el método de envío, la validación y el destino de un formulario respectivamente cuando se introduce algún valor en el campo.
- Data-*, donde el asterisco puede ser cualquier nombre: permite la creación de atributos personalizados, que posteriormente se pueden obtener con Javascript
- Form: contendrá el nombre del formulario al que pertenezca el elemento. De esta forma se puede colocar un componente en cualquier parte de una página.
- Required: indica que es obligatorio introducir un valor en el campo para enviar ese formulario, algo que en XHTML y HTML4 se comprueba con Javascript o en el servidor.
Muchas opciones de selección posibles
Cuando el número de elementos posibles para la selección sea elevado, se deberá utilizar un campo de texto con un mecanismo que automáticamente filtre una lista de elementos a medida que se escribe.
Dado que no es operativo realizar una selección sobre una lista desplegable con muchos elementos, se considerará la utilización de un componente de campo de texto con "escritura predictiva". Así pues, se presentará al usuario un campo de texto normal que, a medida que se escribe, vaya comparando el texto introducido con los datos posibles, presentando dichos datos en una lista posicionada justo debajo del campo de texto. Esta lista permitirá seleccionar al usuario la opción que desea sin necesidad de introducirla completamente.
Está demostrado que al usuario le resulta más práctico rellenar estos datos de sobra conocidos que seleccionarlos de entre una lista interminable de entradas.
Opciones dependientes de otro campo
Cuando las opciones de una lista desplegable dependan de un campo anterior, se informará claramente en el formulario de esta circunstancia para que el usuario sea consciente y pueda realizar la selección previa.
Para cumplir con las pautas de usabilidad, en el componente de lista desplegable dependiente se deberá informar al usuario de que otro campo requiere ser informado previamente.
El campo principal y la lista dependiente deberán disponerse de forma adjacente uno después del otro.
Selección múltiple
Cuando el usuario tiene a su disposicion varias opciones para elegir pudiendo seleccionar más de una, se utilizará un componente de selección múltiple. Si el número de elementos de la lista es pequeño, se utilizará un componente de lista donde se permita seleccionar varios elementos de la misma.
La utilización de la etiqueta <select> con el atributo "multiple" será una posible opción si se va a realizar una selección múltiple de elementos de una lista que contenga pocos elementos. El formato sería como en el siguiente ejemplo:
<SELECT multiple="multiple" size="4" name="component-select">
<OPTION selected value="Component_1_a">Component_1</OPTION>
<OPTION selected value="Component_1_b">Component_2</OPTION>
<OPTION>Component_3</OPTION>
<OPTION>Component_4</OPTION>
<OPTION>Component_5</OPTION>
<OPTION>Component_6</OPTION>
<OPTION>Component_7</OPTION>
</SELECT>
Dando como resultado la siguiente imagen:
Cambios sufridos en HTML5:
Se han incorporado los siguientes atributos:
- Formaction, formenctype, formmethod, formnovalidate y formtarget: atributos que modifican la acción, el método de envío, la validación y el destino de un formulario respectivamente cuando se introduce algún valor en el campo.
- Data-*, donde el asterisco puede ser cualquier nombre: permite la creación de atributos personalizados, que posteriormente se pueden obtener con Javascript
- Form: contendrá el nombre del formulario al que pertenezca el elemento. De esta forma se puede colocar un componente en cualquier parte de una página.
- Required: indica que es obligatorio introducir un valor en el campo para enviar ese formulario, algo que en XHTML y HTML4 se comprueba con Javascript o en el servidor.
