`readonly` attribute on `<input>`

← Return to main list

The boolean readonly attribute makes the element not mutable (not changable), meaning the user can not edit the control. The difference between disabled and readonly is that read-only controls can still function, whereas disabled controls generally do not function as controls until they are enabled.

Example with readonly

Example without readonly

Code

<div class="form-group">
  <label for="aaa">Full name</label>
  <input id="aaa" type="text" value="Hello" readonly="readonly">
</div>

<div class="form-group">
  <label for="bbb">Full name</label>
  <input id="bbb" type="text" value="Hello">
</div>

Assistive technologies

VoiceOver

Chrome:
Hello. Content selected. Full name. Clickable. Text.
Hello. Content selected. Full name. Text.
Firefox:
Hello, Insertion on word: Hello. Between characters: and Full name. Edit text. Full name. [readonly not announced]
Hello, Insertion on word: Hello. Between characters: and Full name. Edit text. Full name.
Safari:
Hello. Content selected. Full name. Text. [readonly not announced]
Hello. Content selected. Full name. Text.

NVDA

Chrome:
Full name. Edit. Read only. Selected. Hello.
Full name. Edit. Selected. Hello.
Firefox:
Full name. Edit. Read only. Selected. Hello.
Full name. Edit with autocomplete. Selected. Hello.
Edge:
Full name. Edit. Read only. Selected. Hello.
Full name. Edit. Selected. Hello.

JAWS

Chrome:
Full name. Read only. Edit. Hello.
Full name. Edit. Hello. Type in text.
Firefox:
Full name. Read only. Edit. Hello.
Full name. Edit. Hello. Type in text.
Edge:
Full name. Full name. Read only. Edit. Hello.
Full name. Edit. Hello. Type in text.