Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to specify that an input element should be disabled?
When using Forms on a webpage sometimes requires us to disable any input field. Like, to prevent the users from not allowing using some input fields until they have completed the previous steps in the form. The same can also be used for preventing users from submitting invalid data or fake data by disabling a form field until all required fields have been filled out.
To solve the above problem, we have different methods that can be used to disable an input element in HTML, like using the "disabled" attribute, JavaScript, and CSS. In this article, we will see how to specify that an input element should be disabled.
Whether you are a web developer just starting out, or an experienced developer looking to refresh your knowledge, this article will provide you with the information you need to effectively disable input elements on your web pages.
Different Methods to Disable an Input Element
Method 1: Using ‘disabled’ Attribute
The first method or we can say the simplest method to disable an HTML input element is by using the ‘disabled’ attribute available in <input> element. This attribute can be added to any input element, and will prevent the user from being able to interact with that element.
When an input element is disabled, it cannot be edited, selected, or submitted as part of a form. The attribute is typically used to indicate to the user that the input is not available for use, or to prevent users from submitting invalid data.
Syntax
Below is the syntax for disabling an input element using disabled attribute of input element, use the following code −
<input type="number" name="phone" disabled>
In the above code, we have an input field with type as a number which is disabled using the “disabled” attribute of <input> element in HTML.
Example
In this example, the input element with the name “phone” is disabled using an attribute avaialble in <input> element. The “disabled” attribute is used to disable the input element.
<html>
<head>
<title>Example to disable the input element using disabled attribute method </title>
</head>
<body>
<h2>Welcome to Tutorialspoint</h2>
<form>
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<br>
<label for="phone">Enter your phone number:</label>
<input type="text" id="phone" name="phone" disabled>
<br>
<label for="user">Enter your username:</label>
<input type="text" id="user" name="user">
<br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password">
<br>
<input type="add" value="Submit">
</form>
</body>
</html>
Method 2: Using JavaScript
The second method to disable an HTML input element is by using JavaScript. This method is useful when there is a need to disable an element dynamically based on user input or other factors.
One pros of using JavaScript method is that it allows us to add or remove the "disabled" attribute dynamically, based on user input or other conditions as it is very beneficial when there is need to disable an input element based on user actions or other factors.
The method involves using JavaScript code to access the input element and set its "disabled" property to true, and the syntax for using the same is given below.
Syntax
Below is the syntax for disabling an input element using JavaScript, use the following code −
document.getElementById("disabledInputField").disabled = true;
In the above code, we have a javascript code in which the input element has the ID "disabledInputField" and also has a "disabled" property set to true. Now with this, any input element having its ID set to “disabledInputField” will be disabled not allowing the users to access it.
Example
In this example, the input element having the id and name as "name" is disabled using JavaScript. To disable the input element, we have a button named “Submit” and a function "disablename()" is called when the button is clicked, and it sets the "disabled" property of the "name" input element to true.
<html>
<head>
<title>Example to disable the input element using JavaScript method</title>
<script>
function disableName() {
document.getElementById("name").disabled = true;
}
</script>
</head>
<body>
<h2> Welcome to Tutorialspoint </h2>
<form>
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<br>
<label for="phone">Enter your phone number:</label>
<input type="text" id="phone" name="phone">
<br>
<label for="user">Enter your username:</label>
<input type="text" id="user" name="user">
<br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password">
<br>
<input type="add" value="Submit">
</form>
</body>
</html>
Method 3: Using CSS
In this method, we are going to use CSS to disable the input element. The CSS method for disabling an input element involves using CSS code to style disabled input elements in a way that makes it clear to the user that they cannot interact with them.
Syntax
Below is the syntax for disabling an input element using CSS, use the following code −
input[disabled] {
opacity: 0.8;
pointer-events: none;
}
In the above code, we have a CSS code in which the input element has a disabled attribute set to true. Here to disable the input element, we have set the opacity to 0.8 and also the pointer-events to none as both the CSS properties will enable the input element to be disabled and finally not allow the users to access it.
Example
In this example, the input element having the id and name as "phone" is disabled using CSS. To disable the input elemetn, we have used the CSS code where we are setting the opacity of any input element with the "disabled" attribute to 0.8, and sets the "pointer-events" property to "none". All these properties of CSS creates the input element as disable.
<!DOCTYPE html>
<html>
<head>
<title>Example to disable the input element using CSS method</title>
<style>
input[disabled] {
opacity: 0.8;
pointer-events: none;
}
</style>
</head>
<body>
<h2> Welcome to Tutorialspoint </h2>
<form>
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<br>
<label for="phone">Enter your phone number:</label>
<input type="text" id="phone" name="phone" disabled>
<br>
<label for="user">Enter your username:</label>
<input type="text" id="user" name="user">
<br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password">
<br>
<input type="add" value="Submit">
</form>
</body>
</html>
Conclusion
In this article, we have seen how to disable an input element along with different approaches that include using a "disabled" attribute, JavaScript, and CSS. Among all the three approaches, the "disabled" attribute is available in the <input> element preventing the user from being able to use the input element. We also saw method of disabling using JavaScript and CSS in detail. Here every approach has its own pros and cons that depends on the needs of the project.
3K+ Views
