Bootstrap 5 Form controls Readonly plain text
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
Share your thoughts in the comments
Please Login to comment...