<textarea disabled>

Attribute of

HTML5 Textarea Attributes: Here's What You Should Know

What does <textarea disabled> do?

Disables the entry of text into a <textarea> element.

Disabled: Removed Entirely From the Form

When you add the disabled to a textarea the form that the textarea is a part of will ignore the textarea input when the form is submitted. This is a good option to use if you want to remove a textarea from a form unless some other condition is met.

For instance, let’s say you want a textarea to become editable once a certain checkbox is selected. You could do that with this bit of code.

<input type="checkbox" id="talk" onclick="tellus()"> Select this box if there's something else I would like to tell us.<br> 
<textarea disabled placeholder="What would you like to tell us" id="talkbox"></textarea>
<script>
  function tellus() {
    if (document.getElementById('talk').checked) {
    document.getElementById('talkbox').disabled = false;
  } else {
    document.getElementById('talkbox').disabled = true;
  }
  }
</script>

That bit of HTML and JavaScript would produce a checkbox that applied and removed the disabled attribute from a textarea.

disabled or readonly?

Two attributes that are similar in concept, but produce different results are disabled and readonly. The difference between the two has to do with how the parent form views each field.

When a textarea is disabled, it will be ignored by a parent form. However, when a textarea is readonly the contents of the textarea will still be submitted with the form even though the user cannot modify the contents.

<textarea readonly>
This text area is readonly. The contents of this element will be submitted with the form.
</textarea>
<textarea disabled>
This text area is disabled. The contents of this element will not be submitted with the form.
</textarea>

Here’s a look at how those two attributes affect the presentation of a textarea.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.