readonly property in HTML
Hello! Today we are going to talk about the readonly property in HTML. This property is typically used for input fields and helps us ensure that the specified fields can only be read and not modified. A user cannot change its content, but they can view it. This functionality is particularly useful in forms where we don't want users to alter certain information. It's very practical.
For example, let's assume we have a form that receives information from the server and we don't want the user to edit that data. Here, we can use readonly. With this feature, the data remains static, and the user can only view those fields.
An interesting point regarding readonly is that despite the user not being able to change the information, this field is still sent to the server when the form is submitted. Therefore, this feature is excellent for maintaining the existing data in fields during the time we want users to only view them.
As an example, if you want an input field to be viewable by the user but not editable, you can utilize the readonly property. Below is a simple example for you to get more familiarized with this feature.
Example of using readonly in HTML
<form>
<label for="email">Email:</label>
<input type="email" id="email" value="[email protected]" readonly>
<input type="submit" value="Send">
</form>Code Explanation
In this code, we have a simple form that uses the input type email:
<form>: Starting a form.<label for="email">Email:</label>: A label for the email input field.<input type="email" id="email" value="[email protected]" readonly>: The email input field that is readonly.<input type="submit" value="Send">: The submit button for the form.
With this code, the user can view the email but cannot change it. In this case, the email is sent to the server during form submission.