Bootstrap 5 Form Controls Readonly

Bootstrap 5 Form Controls Readonly is used to create a read-only input field. To create a read-only input field, we will use readonly attribute on an input to prevent modification of the input’s value. It is useful when we want to have a fixed value for the input.

Bootstrap 5 Form controls Readonly Class: There are no pre-defined classes to make the input field readonly.

Bootstrap 5 Form controls Readonly Attribute used:

readonly: This attribute is used to make the input field value non-editable. This does not contain any value.

Syntax:

<input class="form-control" type="..." value="..." readonly>

Example 1: In this example, we will create an email id and password section where the email id input field will be read-only.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
 "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>

<body class="m-3">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h2>
        Bootstrap 5 Form controls Readonly
      </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"
                       readonly 
                       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. we will create two email id section where the 1 email id input field will contain a readonly attribute.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
 "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>

<body class="m-3">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h2>
        Bootstrap 5 Form controls Readonly
      </h2>
    <form>
        <strong>
            The readonly attribute not used
          </strong>
        <div class="row">
            <label for="username" 
                   class="col-sm-2 col-form-label">
                Email Id
              </label>
            <div class="col">
                <input type="text" 
                       readonly 
                       value="abc@geeksforgeeks.org">
            </div>
        </div>
        <br>
        <strong>
            The readonly attribute not used
          </strong>
        <div class="row">
            <label for="username" 
                   class="col-sm-2 col-form-label">
                Email Id
              </label>
            <div class="col">
                <input type="text" 
                       value="abc@geeksforgeeks.org">
            </div>
        </div>
    </form>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#readonly

Bootstrap 5 Form Controls Readonly

Explore