Oftentimes, to sign-up for any application, we have to provide some credentials to the application. While making the profile, you may experience that the main credentials like name, email, and password are already shown. These credentials are read only and cannot be modified.
Using Bootstrap, the “<input>” and “<textarea>” can be made read only by utilizing the “readonly” attribute. The read only input text cannot be modified. However, it can be tabbed and highlighted to copy the content.
This post will guide you:
How to Make Read Only Input Fields in Bootstrap?
To make a text read only, the “readonly” attribute can be utilized. Before proceeding further, we will create an HTML file for the demonstration.
Prerequisite: Create an HTML and Add Input Fields
To create an HTML file, follow the instructions below:
- Create a “<div>” element and assign it a class “p-4”. This class adds padding space on all sides of the element.
- Then, add the “<label>” element to mention the caption of the input element. Its “for” attribute must match the “id” of the “<input>” tag.
- To add a text input field, place the “<input>” tag with the “type”, “id”, “class”, “value”, and “readonly” attributes.
- The “type” attribute with the value “text” specifies the text input field.
- The “id” defines a unique ID for the element.
- The “class” attribute is set with the Bootstrap class “form-control”. This class provides a full width to the elements to make them responsive.
- The “value” defines the value on the text input field.
- The “readonly” attribute creates the text read-only. It indicates that it cannot be edited or modified.
HTML
<label for="name"> Enter your Name</label>
<input type="text" id="name" class="form-control" value="John Edward" readonly>
<label for="name"> Enter your Email</label>
<input type="text" id="name" class="form-control" value="[email protected]" readonly>
</div>
Output
How to Make Read Only Textarea Fields in Bootstrap?
The “readonly” attribute can be specified in the “<textarea>” element to make it readonly. Moreover, the HTML “<textarea>” tag makes a multi-line text input control.
For a better understanding, check out the given code and the relevant output:
<label for="desc">Add Note</label>
<textarea type="text" id="desc" class="form-control" readonly>Education is the key to success.</textarea>
</div>
Output
That was all about making readonly “<input>” and “<textarea>” elements in Bootstrap.
Conclusion
The “readonly” attribute is utilized to make “<input>” and “<textarea>” elements read only. To make the input field read only, this attribute is placed inside the “<input>” element’s start tag. However, to make the multi-line text input control read only, the “readonly” attribute will be placed within the start tag of the “<textarea>” element. This post has guided related to the procedure to make the input and text area readonly.
