Bootstrap 5 Form Controls Readonly
Last Updated :
06 Dec, 2022
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 =
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:
Bootstrap5 Form controls Readonly
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 =
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
Share your thoughts in the comments
Please Login to comment...