Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Disable Form Fields with CSS
The form fields can be disabled with the help of CSS, and JavaScript. In this article, we will learn to disable the form input fields with the help of CSS.
Sometimes we need to disable form fields for various reasons, such as preventing user input before certain conditions, or for other purposes. The disabled form field means the user can not interact with the input field.
Approaches to Disable Form Fields
There are two approaches to disabling the form input field, we will explain each approach in detail with code examples.
Disable Form Fields using CSS
To disable form input fields with CSS, we will use the CSS pointer-event and opacity properties. The CSS pointer-event property controls how an element responds to pointer events such as mouse clicks, mouseovers, and mouse movements. On the other hand, CSS opacity property controls the transparency of an element. Opacity determines how much of a hidden element's content is visible.
Example
In this example we will disable the form input field with the help of CSS as described above.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Disable Form Fields with CSS</title>
<style>
form {
width: 400px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-top: 10px;
}
input,
textarea {
width: 100%;
padding: 8px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
input,
textarea,
button {
pointer-events: none;
opacity: 0.5;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<form action="#">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>
Disable Form Fields using CSS and JavaScript
In this section, we will use CSS pointer-event and opacity properties to disable the form input field. Here, JavaScript is used to to add a class called .disabled, and the class .disabled has added some CSS styles to disable the input field.
Example
In this example we will disable the form input field with the help of CSS and JavaScript as described above.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Disable Form Fields with CSS & JS</title>
<style>
form {
width: 400px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-top: 10px;
}
input,
textarea {
width: 100%;
padding: 8px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="button"] {
background-color: rgb(44, 157, 48);
}
.disabled input,
.disabled textarea {
pointer-events: none;
opacity: 0.5;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<form id="myForm" action="#">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="button" id="disable-field"
value="Disable Input Fileds">
</form>
<script>
document.getElementById('disable-field').addEventListener('click', function() {
const form = document.getElementById('myForm');
form.classList.toggle('disabled');
});
</script>
</body>
</html>
740 Views
