How do you prevent user input on form controls?

1 The disabled attribute

The disabled attribute is a boolean attribute that can be added to any form control element, such as <input>, <select>, <textarea>, <button>, or <fieldset>. When this attribute is present, the form control is rendered as grayed out and unresponsive to user actions. The user cannot change the value, select the option, or click the button. The disabled form control is also excluded from the form submission and validation. To use the disabled attribute, simply add it to the form control element, without any value. For example, <input type="text" value="John" disabled>.

2 The readonly attribute

The readonly attribute is another boolean attribute that can be added to some form control elements, such as <input> or <textarea>. When this attribute is present, the form control is rendered as normal, but the user cannot edit the value. The user can still select and copy the value, but not change it. The readonly form control is also included in the form submission and validation. To use the readonly attribute, simply add it to the form control element, without any value. For example, <input type="text" value="John" readonly>.

3 The difference between disabled and readonly

The disabled and readonly attributes both prevent the user from modifying the value of the form control, but they have different effects on the appearance, behavior, and accessibility of the form control. Notably, the disabled attribute makes the form control look grayed out and unclickable, while the readonly attribute makes it look normal and clickable. Additionally, the disabled attribute excludes it from the form submission and validation, while the readonly attribute includes it in the form submission and validation. Furthermore, the disabled attribute prevents selection or copying of the value, while the readonly attribute allows it. Lastly, the disabled attribute may cause accessibility issues for screen readers and keyboard users, while the readonly attribute does not.

4 When to use disabled or readonly

The choice between disabled and readonly depends on your use case and design goals. Generally, you should use the disabled attribute when you want to indicate that the form control is not relevant or available for the current situation, and you do not want to send its value to the server. For example, you may want to disable a checkbox or a button that depends on another form control's value. On the other hand, you should use the readonly attribute when you want to display a form control that has a fixed or calculated value, and you want to send its value to the server. For example, you may want to show a text input that has a default or generated value.

5 How to style disabled or readonly form controls

By default, the browser applies some styles to the disabled and readonly form controls, such as changing the color, cursor, or opacity. However, you may want to customize the appearance of the form controls to match your design or branding. You can use CSS selectors and properties to target and style the disabled and readonly form controls. For example, you can use the :disabled pseudo-class to select the disabled form controls, and the :read-only pseudo-class to select the readonly form controls. Then, you can use properties such as color, background-color, border, or font-style to change the look and feel of the form controls.

6 How to enable or disable form controls dynamically

Sometimes, you may want to enable or disable form controls based on some conditions or events, such as user input, validation, or response. You can use JavaScript to manipulate the disabled and readonly attributes of the form controls dynamically. For example, you can use the setAttribute() and removeAttribute() methods to add or remove the attributes from the form control elements. Alternatively, you can use the dot notation to access and modify the properties of the form control elements. For example, you can use element.disabled = true or element.readonly = true to set the attributes, and element.disabled = false or element.readonly = false to unset the attributes.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?