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.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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>