YouTip

# HTML disabled Attribute The `disabled` attribute is a boolean attribute used to disable a multi-line text input control (`<textarea>`). When applied, it prevents users from interacting with the text area. --- ## Definition and Usage The `disabled` attribute specifies that a text area should be disabled. ### Key Characteristics of a Disabled Text Area: * **Unusable and Unclickable:** Users cannot focus on, click, or enter text into the element. * **Unselectable Text:** The text inside a disabled text area cannot be selected or copied. * **Excluded from Form Submission:** The value of a disabled `<textarea>` is **not** submitted when the form is sent to the server. * **Visual Styling:** Browsers typically render disabled text areas with a grayed-out appearance by default. ### Common Use Cases: You can keep a text area disabled until a specific condition is met (such as checking a "Terms and Conditions" checkbox). Once the condition is satisfied, you can use JavaScript to remove the `disabled` attribute and make the text area active. --- ## Syntax In standard HTML, you can write the attribute as a minimized boolean attribute: ```html <textarea disabled> This text area is disabled. ``` ### HTML vs. XHTML Differences In XHTML, attribute minimization is forbidden. The `disabled` attribute must be defined with its value explicitly declared: ```xml This text area is disabled in XHTML. ``` --- ## Code Examples ### Basic Example A simple disabled text area containing default text: ```html On YouTip, you will learn how to build websites. We provide comprehensive web development tutorials. ``` ### Dynamic Control with JavaScript This example demonstrates how to toggle the `disabled` state of a `` using a checkbox and JavaScript: ```html <form action="/submit-form" method="post"> <!-- Checkbox to toggle the state --> <label> <input type="checkbox" id="toggleCheckbox" onchange="toggleTextArea()"> Enable feedback input </label> <br><br> <!-- Textarea is disabled by default --> <textarea id="feedbackTextarea" name="feedback" rows="4" cols="50" disabled> Please check the box above to enable this text area...

Submit ``` --- ## Disabled vs. Readonly It is easy to confuse the `disabled` attribute with the `readonly` attribute. Here is a quick comparison to help you choose the right one for your use case: | Feature | `disabled` | `readonly` | | :--- | :--- | :--- | | **User Input** | Blocked | Blocked | | **Text Selection** | No (Cannot select or copy text) | Yes (Can select and copy text) | | **Form Submission** | **No** (Value is omitted from submission) | **Yes** (Value is sent to the server) | | **Focusable** | No (Cannot tab to or click into) | Yes (Can receive focus) | | **Default Styling** | Grayed out by browser | Looks like a normal text area | --- ## Browser Support The `disabled` attribute is fully supported by all major modern web browsers: * Google Chrome * Microsoft Edge / Internet Explorer * Mozilla Firefox * Safari * Opera