it-swarm-es.com

¿Por qué es imposible anular la selección de las entradas de "radio" HTML?

En HTML, actualmente hay dos tipos de controles de estilo de "casilla de verificación":

  • Casilla de verificación : permite activar/desactivar, se pueden seleccionar varios valores
  • Radio : solo se puede seleccionar un valor en un grupo, no permite desactivar entradas individuales

Si algo no está claro, vea la demostración: http://jsfiddle.net/GYU8n/

Mi problema es con las radios , y la incapacidad de "desmarcarlas" (que es el comportamiento predeterminado en todos los navegadores hasta donde yo sé). Acabamos de tener un problema con uno de nuestros clientes que insiste en que necesitamos deshacernos de la opción de radio "No aplicable" en un formulario, pero el campo no es obligatorio.

Aquí está el problema : si alguien selecciona una opción de radio, quizás haciendo un clic incorrecto, no hay salida a menos que se proporcione una opción "en blanco" (redacción irrelevante). Muy parecido a un cuadro desplegable que no tiene una opción en blanco, pero la diferencia es que n cuadro desplegable no ocupa más espacio en la interfaz de usuario si tiene 2 opciones o 20. Tener el seleccionable los valores ya presentes en la pantalla, sin el clic adicional que necesita el menú desplegable, son excelentes, por lo que utilizamos radios todo el tiempo.

No puedo comprender por qué las entradas de tipo de radio no se pueden desactivar haciendo clic en la entrada y por qué este comportamiento es el predeterminado. Hacer clic en una opción diferente es la única forma de anular la selección de la actual, pero es muy probable que ninguna de las opciones sea obligatoria o aplicable, por lo que una vez que un valor está seleccionado: una selección está "bloqueada", independientemente de cuál sea.


¡Mis preguntas


  1. Seguramente este comportamiento es deliberado y tomó una sala llena de expertos para acordar, pero ¿cuáles podrían ser esas razones?

  2. Estoy pensando en ir contra la corriente y escribir JavaScript para cambiar este comportamiento, por defecto, para todas aplicaciones futuras que escriba . ¿Hay alguna razón por la que no debería?

  3. ¿Los usuarios no expertos en tecnología incluso tienen una expectativa de cómo funcionan las radios?

  4. ¿Es probable que las personas estén tratando de deseleccionar las opciones de radio haciendo clic en ellas nuevamente, esperando un cambio y frustradas?


¡Ejemplo


Mira esta maqueta: http://jsfiddle.net/f4vXj/1/

¿Cómo se puede cambiar para que aparezca de la misma manera con todas las opciones visibles, utilizando controles de estilo de casilla de verificación y no requiera un vacío radio que requerirá una etiqueta como N/A o I don't want to fill in this field?

Si alguien hace clic en la opción incorrecta por accidente, está bloqueado para seleccionar una de las opciones.

144
Wesley Murch

Se supone que no debe dejar los botones de radio en blanco. Se les permite estar en blanco para que pueda evitar establecer valores predeterminados como se menciona en la pregunta sobre - establecer un género predeterminado . No puedes ¡no elegir un género, es un campo obligatorio, aunque puedes dejar una opción de "prefiero no decir", etc. Sin embargo, esto es diferente a que el usuario nunca toque el botón de radio. Si se requiere el campo, no establecer un valor predeterminado permite un comportamiento extremadamente útil; Obliga al usuario a completar el campo y no asume un valor predeterminado.

Digamos que es una pregunta extremadamente importante de sí/no; el usuario es ¡legalmente responsable para esta pregunta sí/no. ¡No puede elegir una configuración predeterminada para el usuario en este caso! Pero aún así, esta opción no se puede dejar en blanco, tienen que comprometerse con uno u otro. ¿Cómo es útil esto? Capturas esto en la validación (preferiblemente en la página). Esto le permite asegurarse de que el usuario haya completado el campo, en lugar de asumir el valor predeterminado, que puede ser muy importante.

En cuanto a su pregunta adicional: cualquier persona que haya utilizado un formulario web (o muchos formularios del sistema operativo) está familiarizado con el funcionamiento de los botones de radio, ya que son tan comunes. La primera vez que ven un botón de radio, pueden volver a hacer clic para intentar desactivarlo, pero aprenderán rápidamente. Y lo que es más importante, los botones de radio funcionan como muchos botones físicos en la vida real - originalmente nombrados por botones en radios que compartían la misma funcionalidad.

Al presionar un botón, se presiona ¡haga clic, y permanece presionado en un estado en el que el usuario ya no puede presionarlo nuevamente. Otros botones en el mismo control presionan otros botones. Los viejos reproductores de cintas de cassette usaban estos; Al presionar el botón de avance rápido o reproducción, apareció el botón "Parar" porque ambas funciones no pueden suceder al mismo tiempo.

Los usuarios que han usado botones saben que no pueden "quitar el botón" de un botón . La diferencia con los botones de radio es que algunos botones empujan otros botones.

129
Ben Brocka

Responda a su pregunta principal: este es un comportamiento heredado que queda del escritorio. Así es como lo hicieron las aplicaciones de escritorio durante décadas antes de que apareciera la web. Cuando aparecieron elementos de formulario en HTML, simplemente copiaron el comportamiento desde el escritorio. Los diseñadores originales del botón de radio probablemente no podrían haber imaginado cómo se usaría este control con el tiempo y no anticiparon esta necesidad.

Lo que está pidiendo no es infrecuente: la solución estándar es tener una opción que básicamente es "no hay opción".

Extra: Creo que si hackea botones de radio, encontrará que muchas personas nunca intentarán "hacer clic" en un botón de radio. Yo no haría esto.

Crédito adicional: Sin embargo, he visto otro truco que podría gustarle: use casillas de verificación en su lugar, pero solo permita que el usuario elija una casilla de verificación. Este es un control que los usuarios están familiarizados con la desactivación y que a menudo superarán la confusión "huh, solo puedo verificar uno a la vez".

21
Hagan Rivers

Como han dicho otros, este es un comportamiento perfectamente normal y esperado.

Estoy pensando en ir contra la corriente y escribir algunos JavaScript para cambiar este comportamiento, por defecto, para todas las aplicaciones futuras que escriba.

Muy mala idea. Estaría haciendo botones que la mayoría de las personas entienden funcionan de una manera diferente. Si necesita la funcionalidad de encendido/apagado, use las casillas de verificación, pero cambiar la funcionalidad de un tipo de control existente le causará grandes problemas.

14

Según el W3C, el comportamiento predeterminado de los elementos de radio sin control predeterminado establecido en marcado es indefinido .

http://www.w3.org/TR/html401/interact/forms.html#radio

Los botones de radio son como casillas de verificación, excepto que cuando varios comparten el mismo nombre de control, se excluyen mutuamente: cuando uno está "encendido", todos los demás con el mismo nombre están "apagados". El elemento INPUT se usa para crear un control de botón de radio. Si ningún botón de radio en un conjunto que comparte el mismo nombre de control está inicialmente "activado", el comportamiento del agente de usuario para elegir qué control está inicialmente "activado" no está definido. Nota. Dado que las implementaciones existentes manejan este caso de manera diferente, la especificación actual difiere de RFC 1866 ([RFC1866] sección 8.1.2.4), que establece:

En todo momento, se verifica exactamente uno de los botones de radio de un conjunto. Si ninguno de los elementos de un conjunto de botones de radio especifica 'COMPROBADO', entonces el agente de usuario debe verificar el primer botón de radio del conjunto inicialmente.

Dado que el comportamiento del agente de usuario difiere, los autores deben asegurarse de que en cada conjunto de botones de opción esté inicialmente "activado".

Si bien los navegadores actualmente están de acuerdo en permitir que los controles de radio estén desmarcados de forma predeterminada, este no se considera el comportamiento esperado.

12
cimmanon

La respuesta a esto es realmente tratar de entender por qué se llaman "botones de radio".

En la antigüedad, bueno, antes de que el mundo se volviera digital al menos, las radios solían tener un par de botones de canales preestablecidos. Esos eran mecánicos, y cuando presionabas un botón, el botón previamente presionado "aparecía" y se deseleccionaba. La misma disposición se utilizó también en los amplificadores, seleccionando el dispositivo fuente. En esta aplicación, es aún más obvio que no tener ninguno seleccionado no es realmente una opción.

Este comportamiento se trasladó al esceptomorfismo del botón de radio de la interfaz de usuario del software.

No diré si es correcto o no, solo que el Origen del comportamiento está oculto en su nombre.

10
CB Du Rietz

Los botones de radio están destinados a usarse en casos en los que definitivamente necesita que el usuario seleccione algo, es una forma de obligar a los usuarios a que le den una entrada.

Por lo que he visto en la web, no hay casos de hacks de botones de radio, mientras que hay ejemplos de hacks de casillas de verificación donde notarás que el sistema no te permite seleccionar múltiples verificaciones. Desde la perspectiva del usuario, sería más fácil entender que solo se puede seleccionar una opción de una casilla de verificación en lugar de dejar una selección de radio en blanco.

10
dg3a

Puede usar un pequeño botón sutil (por ejemplo, una pequeña 'x') para cada grupo de radio. Al presionar este botón, se borran los botones de radio del grupo asociado. Esto puede dar menos desorden que tener todos estos radiobuttons extra 'n/a', además de que no tiene que pensar en cómo etiquetar estos radiobuttons adicionales.

6
holst

En lugar de rechazar a otros, prefiero agregar mi pequeña voz al lado opuesto.

Ambos comportamientos son necesarios para realizar diferentes tareas. Desafortunadamente, me encontré con esta pregunta cuando necesitaba hacer lo contrario del comportamiento predeterminado. Ahora, si alguna vez piensa en la accesibilidad, si intenta alterar el comportamiento predeterminado en JavaScript, bueno, está fuera del juego.

Ahora, para todos aquellos que defienden la ideología de "entrada obligatoria": mire a su alrededor para ver los casos de uso reales. Por ejemplo, okcupid.com (es un sitio de citas) tiene muchas preguntas que encajarían en el control de grupos de radio, a menos que esté diseñado de manera tan rígida e imprudente para comportarse como una empresa Java gerente de muerte cerebral lo diseñó.

Si hubiera un control que pudiera proporcionar n opciones de m, donde n <= m, entonces el grupo de radio, como está ahora, se justifica como un caso particular de ese control más genérico, pero, por desgracia, no existe ese control (las casillas de verificación permiten un número variable de opciones, restringir el número de opciones mediante programación rompería nuevamente la accesibilidad).

3
wvxvw

La solución real es usar un combo/select con la opción none más todas las otras opciones o radios para todas las opciones con la opción none seleccionada por defecto.

De Wikipedia:

Un botón de opción o un botón de opción es un tipo de elemento de interfaz gráfica de usuario que permite al usuario elegir solo uno de un conjunto predefinido de opciones.

Por lo tanto, debe proporcionar una opción para NINGUNO si planea ofrecer una opción para ninguno; de lo contrario, use el combo.

3
MB34

Totalmente de acuerdo con el OP en este caso. El argumento de que 'no presionas un botón de radio para seleccionar entre 2 opciones' es totalmente falso.

Eche un vistazo a su computadora o cualquier otro equipo eléctrico: presione un botón para encender algo y presione el mismo botón para apagarlo. No permitir la deselección de un botón de radio NO es intuitivo para los usuarios finales, sino exactamente lo contrario.

Tengo un caso en el que debemos permitir que los usuarios opten por mostrar datos antiguos o solo datos actuales; no quieren 2 botones de opción porque es una operación binaria (mostrar/no mostrar). Si hacen clic y luego cambian de opinión, no hay nada que les permita hacer eso, excepto una actualización de la página. ¿Por qué no deberían poder seleccionar/deseleccionar la opción ONE? Hay innumerables casos de uso para esta funcionalidad. TODAVÍA solo está enviando un valor (verdadero/falso) para que la lógica no se rompa.

3
RadioButtonBad

Botón de radio = campo obligatorio de valor único.

Uno tiene que ser seleccionado para su presentación. Si quieres una opción Ninguna. Hacer la primera Radio 'Ninguna'.

De lo contrario, use casillas de verificación, que permiten la selección múltiple

3
Jon Darke

Una solución puramente UX podría ser simplemente agregar el asterisco rojo omnipresente (*) a la pregunta, que la mayoría entiende que significa "requerido".

El principal problema con el comportamiento de los botones de opción parece ser que, en preguntas diseñadas como la que se muestra en el enlace jsfiddle, el usuario no sabe qué hacer si su respuesta es "ninguna de las anteriores". El primer pensamiento es hacer clic en un botón nuevamente esperando que sea una palanca, que es una capacidad bastante común en los botones físicos.

Agregar el marcador "requerido" confirma que el usuario debe elegir una de las opciones (y probablemente dejar un comentario desagradable, si posible, por no proporcionar una opción de tipo "ninguno de los anteriores").

2
DocSalvager

Esto puede ser subjetivo, pero realmente sentí que era necesario decirlo. Creo que la forma estándar en que funcionan los botones de radio ya es fantástica.

Te explicaré por qué.

Pensemos en el usuario por un segundo. ¿Qué sucede si el botón de opción ya está seleccionado en lo que el usuario necesita para completar su formulario? ¿Eso no proporcionaría una maravillosa experiencia de usuario?

Pensemos en un posible escenario de interacción del usuario:

Proporcionar un clic/toque menos , con el que el usuario no tenga que lidiar, definitivamente proporcionará una mejor experiencia de usuario. Ahora concedido, la experiencia general del usuario puede tener menos posibilidades de ser tan perfecta "¡No tengo que cambiar mi selección" experiencia, pero es posible. Especialmente si se configura de esa manera.

Los botones de radio ya tienen una opción seleccionada cuando ingresa por primera vez a la página. Ahora, de nuevo, esto es muy subjetivo, pero si la Investigación del usuario se realiza bien, podría ser posible lograr ese objetivo de no tocar/hacer clic con el botón de opción si el valor predeterminado es la mayoría de lo que la gente seleccionará.

Cosas bastante increíbles si me preguntas. Estoy de acuerdo con los demás en apegarme al uso estándar y familiar de los botones de radio.

Al final, creo que realmente se reduce a cuáles son tus objetivos para el proyecto en el que estás trabajando.

Aquí hay un ejemplo muy simple de lo que quiero decir con una opción ya seleccionada:

http://www.echoecho.com/htmlforms10.htm

2
Sean

Creo que es bastante confuso tener la funcionalidad clara incrustada en un elemento de radio en la lista, p. "no seleccionar ninguno". Cada vez que he visto esto en la web, nunca he entendido por qué ese es el caso. No creo que sea intuitivo.

Creo que la funcionalidad " selección clara " si es necesario debería ser un botón separado, casi un reinicio. Esto es especialmente importante si se tratara, por ejemplo, de una gran cantidad de elementos que se desplazan. El botón "Borrar selección" debe estar en el área fija de la pantalla.

1
Lisa Tweedie

Lo que ocurre aquí es que, si tiene (un grupo de) botones de radio, eso significa que es obligatorio seleccionar uno de ellos (así es como se hace que se comporten las radios), todos están en blanco de forma predeterminada para evitar que el usuario no elegir uno e ir con el predeterminado. Si su cliente quiere un control que no se puede elegir, entonces debe estar usando casillas de verificación, y no, no haga que se desmarquen entre sí, no es así como deben funcionar, si un usuario solo quiere hacer una elección que debe tener La libertad y muchas opciones también.

1
ThaSaleni

Veo dos soluciones:

  1. tener un botón de radio "otro" cuando ninguno de los otros se aplica. Incluso debe proporcionar un "otro" para la selección de género. Un transexual puede no sentirse "masculino" ni "femenino" y preferir otra opción. Lo que haces con él es tu elección. Si desea conocer el porcentaje de hombres en una encuesta, puede ignorar los "otros" y solo contar hombres y mujeres.

  2. Agregue una casilla de verificación al grupo de botones de opción y oscurezca todo el grupo cuando la casilla de verificación esté desactivada. Puede nombrar la casilla de verificación "seleccionar género" para el ejemplo anterior y procesarla como si se hubiera seleccionado un botón de opción "otro" cuando la casilla de verificación no está marcada.

1
stevenvh