Bootstrap 5 Form Controls Disabled
Last Updated :
09 Dec, 2022
Bootstrap5 Form controls Disabled are used to create a disabled input field. To create a disabled input field, we will use the disabled boolean attribute on an input to disable the input field. It will remove any pointer event from the field.
Form controls Disabled Class: There are no pre-defined classes to make the input field disabled.
Form controls Disabled Attribute:
- disabled: This attribute is used to make the input field disabled. This does not contain any value.
Syntax:
<input class="form-control"
type="..."
value="..." disabled>
Example 1: In this example the email id input field is disabled and the password field is enabled.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap 5 Form controls Disabled
</h2>
<form action="#">
<div class="row">
<label for="username" class="col-sm-2
col-form-label">
Email Id
</label>
<div class="col">
<input type="text" disabled
value="abc@geeksforgeeks.org">
</div>
</div><br>
<div class="row">
<label for="password"
class="col-sm-2 col-form-label">
Password
</label>
<div class="col">
<input type="password"
class="form-control"
placeholder="Password">
</div>
</div>
</form>
</body>
</html>
|
Output:
Example 2: In this example, there will be two password input fields, and the first one will be disabled.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Form controls Disabled</h2>
<form>
<strong>
The disabled attribute used
</strong>
<div class="row">
<label for="password" class="col-sm-2
col-form-label">
Password
</label>
<div class="col">
<input type="password"
class="form-control"
placeholder="Password"
disabled>
</div>
</div><br>
<strong>
The disabled attribute not used
</strong>
<div class="row">
<label for="password" class="col-sm-2
col-form-label">
Password
</label>
<div class="col">
<input type="password"
class="form-control"
placeholder="Password">
</div>
</div>
</form>
</body>
</html>
|
Output:
Bootstrap5 Form controls Disabled
Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#disabled
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...