November 8, 2022

How to Make Input Field Disabled in HTML

In this tutorial, you will learn how to make input field disabled in HTML. When you are creating a form, you may want to disable some of the input elements.

To make the input field disabled, we have to use the disabled attribute. The disabled attribute is a Boolean attribute. The disabled attribute is used to specify that the input element should be disabled so that a user could not enter any value in it.

In the following example, we will make an input field disabled. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have 2 elements (label and input).
The label element is used to specify a label for an input field. The value of for attribute is set to the email of the corresponding input field.

The input element specifies an input field where the user can enter data.
The input has a type attribute with a value of the text, a name attribute with the value of email, and an id attribute with a value of email. The disabled attribute specifies that the input element is disabled.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input field disabled</title>
</head>

<body>
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" disabled>
</body>

</html>

You May Also Like: