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.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
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.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
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