uniwebsidad

Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

¿Cuáles son las diferencias entre los atributos disabled y readonly de los campos de texto de los formularios?

11 de octubre de 2011

He leído un poco sobre los atributos disabled y readonly de los campos de formulario de HTML, pero sigo sin entender bien cómo los tratan los diferentes navegadores. Me gustaría saber sus diferencias porque estoy creando una aplicación que tiene que cumplir de forma estricta las normativas de accesibilidad (debe ser accesible mediante un lector de pantalla).

accesibilidad formularios html
Estás leyendo una traducción autorizada de la pregunta What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields? planteada por Andy en StackOverflow.

Respuestas

#1

Los elementos que tienen el atributo readonly no se pueden modificar, pero su contenido se envía cuando el usuario envía el formulario. Por contra, los elementos con el atributo disabled no sólo no se pueden modificar sino que no se envían junto con el resto de campos del formulario.

Otra de sus principales diferencias es que los elementos readonly pueden obtener el foco del navegador (al pulsar Tabulador varias veces, podrías llegar a seleccionarlo) mientras que los elementos disabled no pueden obtener el foco.

La especificación oficial del W3C lo explica muy bien en esta sección, pero a continuación extraigo la parte más importante:

Los elementos con el atributo disabled

  • Sus valores se ignoran al enviar el formulario, por lo que en el servidor no podrás acceder a estos valores.
  • Algunos navegadores antiguos aplican sus propios estilos a estos campos y no se pueden cambiar mediante CSS.
  • No pueden obtener el foco del navegador.
  • Al pulsar repetidamente el Tabulador, estos elementos no se tienen en cuenta y por tanto, nunca se seleccionan.

Los elementos con el atributo readonly

  • No todos los elementos HTML soportan este atributo. En concreto, los elementos <select>, <option> y <button> soportan el atributo disabled pero no el readonly.
  • Los navegadores no aplican ningún tipo de estilo especial a los campos de sólo lectura. Esto puede confundir a algunos usuarios que no pueden modificar el valor de un campo y no saben por qué.
  • Sus valores se tienen en cuenta al enviar el formulario, por lo que podrías acceder a esos valores en el servidor.
  • Estos elementos pueden obtener el foco del navegador porque se pueden seleccionar al pulsar Tabulador repetidamente.

@librosweb

20 septiembre 2014, 11:22