readonly

In HTML, the readonly attribute makes an input field uneditable, allowing users to view its content without the ability to change it.

readonly attribute

The readonly attribute keeps an input or textarea field unchangeable, allowing users to interact with it without editing. The field can still receive focus and be submitted with a form, but users can't alter its content.

Syntax

index.html

<input readonly>

Example

The input readonly attribute

index.html

<h1>The input readonly attribute</h1>
<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="country">Country:</label>  
  <input type="text" id="country" name="country" value="Norway" readonly><br><br>
  <input type="submit" value="Submit">
</form>

A form will send the value of a read-only input field, but it will not send the value of a disabled input field.

Key Points

Applies to <input> types (text, email, password, etc.) and <textarea>.
The field is not editable and does not participate in constraint validation.
Works with the :read-only CSS pseudo-class.

Values

The readonly attribute is a boolean attribute, meaning it does not require any values.

Applies To

The readonly attribute can be applied to the following HTML elements:

Conclusion

The readonly attribute allows users to view the content of an input or textarea field without being able to modify it. It ensures that the value can still be submitted with a form, but cannot be edited. This attribute is useful for displaying non-editable information in forms.

placeholder

The HTML placeholder attribute provides short hint text or examples inside an input field, helping users understand the expected information before they input their own data.

required

In HTML, the required attribute indicates that an input field must be filled out before the form can be submitted, preventing submission until the field is completed.