Pure CSS Form Read-Only Inputs
Readonly is a one of the attributes of <input> element in Pure CSS Forms. It is used to make the input field in a form read-only i.e., we can’t modify the existing content inside the input field whether it is empty or non-empty. The name itself explains the attribute, it makes the input field only readable to the user. t restricts the user from modifying the content present inside the <input> text field, but, user interaction like selecting, copying the content can be performed.
Pure CSS Form Read-Only Inputs Class: There is no class for that we have a predefined attribute that can make any input field read-only and that attribute is readonly=” ” with empty value.
Syntax:
<form class="pure-form">
<input type="..."
value="..." readonly="">
</form>
Below example illustrate the Pure CSS Form Read-Only Inputs
Example 1: In this example, we will see How to find the input field is read-only. The content inside the input field which will be made to read-only will be grayed. The below example shows the word geeksforgeeks can’t be modified and it is grayed, but we can do interactions like selecting the text.
HTML
<!DOCTYPE html>
< html >
< head >
< title >read-only</ title >
< link rel = "stylesheet"
href =
integrity =
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin = "anonymous" >
</ head >
< body >
< h1 >Geeksforgeeks</ h1 >
< strong >Pure CSS Forms Read-Only Inputs</ strong >
< br >< br >
< form class = "pure-form" >
< label >GeeksforGeeks:
< input type = "text"
value = "A Computer Science Portal"
readonly />
< label >
</ form >
</ body >
</ html >
|
Output:
Example 2: In this example, we will Where we can use it. It can be used in the condition that the text inside the text-field should not be changed i.e., it should have a default value. The below example shows that the from(Mumbai) and to(Agra) place can’t be edited for particular Train(Train A) because the Train A only takes the passengers who are originating from Mumbai and destined to Agra. The input tag with value Mumbai and Agra are added with attributes read-only at the last of the input field to make it read-only. You can find that they are grayed.
HTML
<!DOCTYPE html>
< html >
< head >
< title >read-only</ title >
< link rel = "stylesheet"
href =
integrity =
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin = "anonymous" >
</ head >
< body >
< h1 >Geeksforgeeks</ h1 >
< strong >Pure CSS Forms Read-Only Inputs</ strong >
< form class = "pure-form pure-form-aligned" >
< fieldset >
< div class = "pure-control-group pure-controls" >
< strong >Train A</ strong >< br >
< label for = "name" >
Passenger full-name
</ label >
< input type = "text"
class = "pure-input"
id = "name" />
< br >
< label for = "from" >From</ label >
< input type = "text"
class = "pure-input"
id = "from"
value = "Mumbai"
readonly />
< br >
< label for = "to" >To</ label >
< input type = "text"
class = "pure-input"
id = "to"
value = "Agra"
readonly />
< br >
< input type = "button"
class = "pure-button pure-button-primary"
value = "Submit" >
</ div >
</ fieldset >
</ form >
</ body >
</ html >
|
Output:
Pure CSS Form Read-Only Inputs
Note: The disabled attribute is also like readonly but, the only difference is we can’t do any interaction with the content of the field.
Reference: https://purecss.io/forms/#read-only-inputs
Last Updated :
06 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...