Semantic-UI Form Read-Only Field State
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
A form is the section of a document that contains a number of input fields such as text field, password, checkbox, etc. Semantic-UI form is used to create attractive form using semantic-ui classes. It is very easy to design attractive form.
The Semantic-UI Form Read-Only Field State is used to make the individual input fields read-only. If an input field is readonly, then its content cannot be changed but can be copied and highlighted.
Semantic-UI Form Read-Only Field State Used Attribute:
- readonly: This attribute is used to make the form input fields readonly.
Syntax:
<div class="ui form">
...
<input placeholder="Read Only" readonly="" type="text">
...
</div>
Example 1: In this example, we will describe the use of Semantic-UI Form Read-Only Field State.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Read-Only Field State </title> <link rel="stylesheet" href=</head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Read-Only Field State</h3> </div> <form class="ui container form"> <div class="field"> <label>Username</label> <input type="text" name="username" readonly="" placeholder="Enter Username"> </div> <div class="field"> <label>Password</label> <input type="text" name="pwd" readonly="" placeholder="Enter Password"> </div> <button class="ui button" type="submit"> Submit </button> </form></body></html> |
Output:
Example 2: In this example, we will describe the use of Semantic-UI Form Read-Only Field State.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Read-Only Field State </title> <link href= rel="stylesheet" /></head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Read-Only Field State</h3> </div> <form class="ui container form"> <div class="three fields"> <div class="field"> <label>First Name</label> <input type="text" name="fname" readonly="" placeholder="Enter First Name"> </div> <div class="field"> <label>Second Name</label> <input type="text" name="sname" readonly="" placeholder="Enter Second Name"> </div> <div class="field"> <label>Last Name</label> <input type="text" name="lname" readonly="" placeholder="Enter Last Name"> </div> </div> <div class="two fields"> <div class="field"> <label>Email Id</label> <input type="email" name="email" readonly="" placeholder="Enter Email Id"> </div> <div class="field"> <label>Mobile No</label> <input type="number" name="number" readonly="" placeholder="Enter Mobile No"> </div> </div> <div class="field"> <label>Short Notes</label> <textarea readonly=""></textarea> </div> <button class="ui button right" type="submit"> Submit </button> </form></body></html> |
Output:
Reference: https://semantic-ui.com/collections/form.html#read-only-field
Please Login to comment...