Open In App

Bootstrap 5 Form controls Readonly plain text

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Form Controls Readonly plain text is used to create a readonly input field as a plaintext. To create a plain text input field, we will use .form-control-plaintext class. This class removes the styling and preserves the correct margin and padding.

Form Control Readonly  Attribute:

  • readonly: This attribute is used to create a readonly input field.

Form Control Plain Text Class:

  • .form-control-plaintext: This class is used to display the input field as plain text.

Syntax:

<div class="row">
    <label for="GFG" class="col-*-* col-form-label">
        Content
    </label>
    <div class="col-*-*">
          <input type="text" readonly 
              class="form-control-plaintext" 
              id="..." value="...">
    </div>
</div>

Example 1: In this example, we will create a form control readonly plain text.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Bootstrap 5 Form controls Readonly plain text</title>
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
        </script>
</head>
 
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
 
        <h2>Bootstrap 5 Form controls Readonly plain text</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" class="form-control-plaintext" id="username" value="abc@geeksforgeeks.org" readonly>
                </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" id="password" placeholder="Password"
                        aria-label="Password">
                </div>
            </div>
        </form>
    </div>
</body>
 
</html>


Output:

 

Example 2: In this example, we will create a form control readonly plain text.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Bootstrap 5 Form controls Readonly plain text</title>
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
        </script>
</head>
 
<body>
    <div class="container">
        <h1 class="text-center text-success">
            GeeksforGeeks
        </h1>
 
        <h2 class="text-center">
            Bootstrap 5 Form controls Readonly plain text
        </h2>
 
        <div class="row">
            <label for="name" class="col-sm-2
                col-form-label">Name</label>
            <div class="col">
                <input type="text" class="form-control-plaintext" id="name" value="GeeksforGeeks" readonly>
            </div>
        </div>
        <br>
 
        <div class="row">
            <label for="contact" class="col-sm-2
                col-form-label">Contact No</label>
            <div class="col">
                <input type="password" class="form-control-plaintext" id="contact" value="+91-9876543210" readonly>
            </div>
        </div>
 
        <div class="row">
            <label for="textarea" class="form-label">
                Example textarea
            </label>
            <textarea class="form-control-plaintext" id="textarea" value="Feedback" readonly></textarea>
        </div>
    </div>
</body>
 
</html>


Output:

 

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



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