Open In App

Bootstrap 5 Overview Disabled forms

Improve
Improve
Like Article
Like
Save
Share
Report

In Bootstrap, you can easily disable input in a form and stop it from interacting by using the disabled attribute. This is mainly used in forms where some fields are not available for all users to fill in. Although buttons are visibly disabled with this attribute you need to add the tabindex=”-1″ to completely discourage it from being focused by the keyboard. If we add the disabled attribute inside a <fieldset> tag will disable the whole page from taking inputs and interacting.   

Syntax:

<input class="..." id="..." disabled>

Used Attributes:

  • disabled: This attribute is used to disable the input field or disable any form field. This attribute doesn’t take any values and it is the attribute by itself.

Example 1: The code example below demonstrates how we can use the disabled attribute to disable an input field and have a Disabled Form.

HTML




<!doctype html>
<html lang="en">
<head>
    <link href=
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
  <title>Bootstrap 5 Overview Disabled forms</title>
</head>
 
<body>
    <h1 class="ms-4 text-success">
         GeeksforGeeks
      </h1>
    <h4 class="ms-4 mb-2">
          Bootstrap 5 Overview Disabled forms
      </h4>
    <h5 class="m-4 text-success">
          Fill in the Form:
      </h5>
    <div class="container m-2">
        <div class="mb-3">
            <label for="textInput" class="form-label">
                  Enter your name:
              </label>
            <input class="form-control" type="text">
        </div>
        <div class="mb-3">
            <label for="emailInput" class="form-label">
                  Email address (This is Disabled):
              </label>
            <input type="email" class="form-control"
                   placeholder="disabled" disabled>
        </div>
    </div>
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
      </script>
</body>
</html>


Output:

 

Example 2: The code below demonstrates how you can add disabled to a fieldset enclosing a form will lead to disabling all the inputs of the form:

HTML




<!doctype html>
<html lang="en">
<head>
    <link href=
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
  <title>Bootstrap 5 Overview Disabled forms</title>
</head>
 
<body>
    <h1 class="ms-4 text-success">
          GeeksforGeeks
      </h1>
    <h4 class="ms-4 mb-2">
          Bootstrap 5 Overview Disabled forms
      </h4>
    <h5 class="m-4 text-success">
          Fill in the Form:
      </h5>
    <div class="container m-2">
        <form>
            <fieldset disabled>
                <div class="mb-3">
                    <label for="textInput" class="form-label">
                          Enter your name:
                      </label>
                    <input class="form-control" type="text">
                </div>
                <div class="mb-3">
                    <label for="emailInput" class="form-label">
                          Email address (This is Disabled):
                      </label>
                    <input type="email" class="form-control"
                           placeholder="disabled">
                </div>
                <div class="row">
                    <p class="text-muted">
                          Choose the technologies you want to learn:
                      </p>
                    <div class="col-6">
                        <div class="form-check form-switch m-2">
                            <input class="form-check-input"
                                   type="checkbox" autocomplete="off">
                            <label class="form-check-label" for="defaultCheckbox1">
                                Data Structures
                            </label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-switch m-2">
                            <input class="form-check-input"
                                   type="checkbox"
                                   autocomplete="off" checked>
                            <label class="form-check-label" for="checkedCheckbox1">
                                Algorithms</label>
                        </div>
                    </div>
            </fieldset>
        </form>
    </div>
    </div>
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
      </script>
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/forms/overview/#disabled-forms 



Last Updated : 06 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads