Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML readonly Attribute

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 55 - Views
⏳ 4 mins
💬 1 Comment
HTML readonly Attribute

Photo Credit to CodeToFun

🙋 Introduction

The readonly attribute is a valuable feature in HTML that allows developers to designate form elements as read-only.

When applied, users can view the content but cannot modify or interact with it.

This attribute is particularly useful when you want to display information that should not be altered by the user.

🎯 Purpose of readonly

The primary purpose of the readonly attribute is to restrict user input for specific form elements.

Unlike the disabled attribute, which prevents any interaction, the readonly attribute allows users to view the content while preventing them from making changes.

💎 Values

The readonly attribute has a boolean value, and it can be set to either:

  • readonly: This value indicates that the form element is read-only.
  • unset: This value removes the readonly status, allowing the user to interact with the element.

📄 Example

Let's look at a simple example of how to use the readonly attribute in an HTML form:

readonly.html
Copied
Copy To Clipboard
<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" readonly>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" readonly="readonly">

  <textarea id="comments" name="comments" readonly>This is a read-only textarea.</textarea>

  <input type="submit" value="Submit">
</form>

🧠 How it Works

In this example, the readonly attribute is applied to the username input field, the email input field, and a textarea. Users can view the information in these fields but cannot make any modifications.

🔄 Dynamic Values with JavaScript

The readonly attribute can also be manipulated dynamically using JavaScript. Here's a quick example:

readonly.html
Copied
Copy To Clipboard
<script>
  // Dynamically set readonly for an input field
  document.getElementById("dynamicField").readOnly = true;
</script>

🧠 How it Works

In this script, the readonly attribute is set to true for an input field with the id dynamicField. This kind of dynamic control can be beneficial when you need to adjust the read-only status based on certain conditions or user actions.

🏆 Best Practices

  • Use the readonly attribute when you want to display information that should not be altered by the user.
  • Be cautious with using readonly for sensitive information, as it only prevents accidental changes and can be easily bypassed by users with some technical knowledge.
  • Always test your forms to ensure compatibility across different browsers.

🎉 Conclusion

The readonly attribute is a useful tool for controlling user interaction with form elements in HTML.

By incorporating this attribute appropriately, you can create more user-friendly and secure web forms.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
7 months ago

If you have any doubts regarding this article (HTML readonly Attribute), please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy