Semantic-UI Form Field Error State
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the 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 an attractive form using semantic-ui classes. It is very easy to design attractive forms. Semantic-UI Form Field Error State is used to display the error state on individual fields of the form.
Semantic-UI Form Field Error State Used Class:
- field error: This class is used to display the error on individual fields of the form element.
Syntax:
<div class="ui form error"> ... <div class="ui error message"> ... </div> </div>
Example 1: In this example, we will describe the Semantic-UI Form Field Error State.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Form Field Error State </ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Form Field Error State</ h3 > </ div > < form class = "ui container form" > < div class = "field error" > < label >Username</ label > < input type = "text" name = "username" placeholder = "Enter Username" > </ div > < div class = "field error" > < label >Password</ label > < input type = "password" name = "pwd" placeholder = "Enter Password" > </ div > < button class = "ui button right" type = "submit" > Submit </ button > </ form > </ body > </ html > |
Output:
Example 2: In this example, we will describe the Semantic-UI Form Field Error State.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Form Field Error State </ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Form Field Error State</ h3 > </ div > < form class = "ui container form" > < div class = "field" > < div class = "three fields" > < div class = "field" > < label >First Name</ label > < input type = "text" name = "fname" placeholder = "Enter First Name" > </ div > < div class = "field error" > < label >Second Name</ label > < input type = "text" name = "sname" placeholder = "Enter Second Name" > </ div > < div class = "field" > < label >Last Name</ label > < input type = "text" name = "lname" placeholder = "Enter Last Name" > </ div > </ div > < div class = "two fields" > < div class = "field error" > < label >Email Id</ label > < input type = "email" name = "email" placeholder = "Enter Email Id" > </ div > < div class = "field" > < label >Mobile No</ label > < input type = "number" name = "number" placeholder = "Enter Mobile No" > </ div > </ div > < div class = "field" > < label >Short Notes</ label > < textarea ></ textarea > </ div > < div class = "inline fields error" > < label for = "gender" >Male/Female:</ label > < div class = "field" > < div class = "ui radio checkbox" > < input type = "radio" name = "gender" tabindex = "0" class = "hidden" > < label >Male</ label > </ div > </ div > < div class = "field" > < div class = "ui radio checkbox" > < input type = "radio" name = "gender" tabindex = "0" class = "hidden" > < label >Female</ label > </ div > </ div > < div class = "field" > < div class = "ui radio checkbox" > < input type = "radio" name = "gender" tabindex = "0" class = "hidden" > < label >Other</ label > </ div > </ div > </ div > < button class = "ui button right" type = "submit" > Submit </ button > </ div > </ form > < script > $('.ui.radio.checkbox').checkbox(); </ script > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/collections/form.html#field-error
Contact Us