Readonly in HTML Select Tag

Current Location：Home > Learning > WEB FRONT-END > HTML >

Vue React JavaScript Angular CSS HTML

Readonly in HTML Select Tag

Author：JIYIK Last Updated：2025/04/19 Views：

TML, Hypertext Markup Language, is widely used to format websites. Also, CSS (Cascading Style Sheets) can be used to style websites.

Below are some of the attributes used in HTML and CSS to control user and cursor behavior.

`<select readonly>`property

<select>Is the most commonly used HTML tag and is used to get user input from the keyboard, mouse, or touch screen. Typically, using <select>allows the user to select one or more options, while using <select readonly>allows the user to only display the value instead of changing it.

The readonly attribute specifies that the input element is not editable and read-only. Additionally, text, URL, phone number, email, password, date, month, week, time, and number are supported formats for readonly.

grammar:

<select readonly>

But <select readonly>it is not valid in HTML now, as it has been deprecated. Instead, we can use the disabled attribute.

Use `<select disabled>`the attribute to simulate the read-only attribute of the select tag in HTML

The disabled attribute is a boolean attribute that is used to specify that the dropdown is disabled. Use disabled to make an element unclickable and unusable and take it away from the user's control.

Additionally, the input fields are displayed as Not Applicable and the ability to use is disabled.

grammar:

<select disabled>

Let us explain this syntax in detail with an example of creating a drop-down list to get a clearer concept.

Sample code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML disabled Attribute</title>
    </head>
    <body style="text-align: center;">
        <h1 style = "color: brown;"> HTML Select Disabled Attribute </h1><br>
        <p style="color: black; font-size: large"> What is your Home Country? </p>
        <p style="color: grey"> (Selection of choice is disabled) </p>

        <select disabled>
                <option value="Sri Lanka">Sri Lanka</option>
                <option value="India">India</option>
                <option value="Turkey">Turkey</option>
        </select>
    </body>
</html>

First, we open the HTML file by defining its meta character set using the title HTML disabled attribute and turn on <body>and style all elements to <head>keep the content centered after closing the .

We then define the name of the header as <h1>an HTML Select Disabled Attribute with a and brown color. We use
a line break after the header.

Then we define a question, What is your home country? Use <p>and use a large font and black. After that, we define a gray phrase (Selection of choice is disabled).

Then <select disabled>it is used to disable the drop-down list. Even though it is <select disabled>disabled, we have defined some values for it like Sri Lanka, Turkey and India.

At the end of the HTML file, all used tags are thus closed.

According to the output, a disabled drop-down list is grayed out and is not controlled by the user. The user cannot click or select an option from the drop-down list; this is

Previous: None

Next：Right align button in HTML

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >