HTML5: How to specify that an input field is read-only?

Last update on February 09 2024 12:52:42 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title>How to specify that an input field is read-only</title><!-- Sets the title of the document -->
</head>
<body>
<form method="post" <!-- Begins a form element with the method attribute set to "post", indicating that form data will be submitted via HTTP POST method -->
action="https://www.w3resource.com/html-css-exercise/basic/solution/input-readonly-answer-demo.php"><!-- Specifies the URL where the form data will be sent upon submission -->
  First Name: <input type="text" <!-- Creates a text input field for entering the user's first name. The name attribute is set to "fname" to identify the input data on the server side -->
name="fname"><br><!-- Provides a line break after the input field -->
  Last Name: <input type="text" <!-- Creates a text input field for entering the user's last name. The name attribute is set to "lname" to identify the input data on the server side -->
name="lname"><br><!-- Provides a line break after the input field -->
  Place: <input type="text" <!-- Creates a text input field for entering the user's place. The name attribute is set to "place" to identify the input data on the server side -->
name="place" value="Delhi" <!-- Sets the default value of the input field to "Delhi" -->
readonly><br><!-- Makes the input field read-only, preventing users from editing its value -->
<input type="submit" <!-- Creates a submit button within the form -->
value="Submit"><!-- Sets the value of the submit button to "Submit" -->
</form>
</body>
</html>

Explanation:

The HTML document starts with a declaration of its type and version (<!DOCTYPE html>).
The <html> element encloses the entire HTML document.
The <head> section contains metadata about the document, including the character encoding (<meta charset="utf-8">) and the title of the document (<title>).
Within the <body> section, a <form> element is used to create a form for user input. The method attribute is set to "post", indicating that form data will be submitted via HTTP POST method, and the action attribute specifies the URL where the form data will be sent upon submission.
Inside the form, there are three <input> elements for entering the user's first name, last name, and place. The name attributes are set to "fname", "lname", and "place" respectively to identify the input data on the server side.
The input field for "Place" has a value attribute set to "Delhi", providing a default value for the input field.
The input field for "Place" also includes the readonly attribute, which makes the input field read-only, preventing users from editing its value.
Finally, an <input> element with type "submit" is used to create a submit button within the form, allowing users to submit the form data.

Live Demo:

See the Pen input-readonly-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page