Foundation CSS Abide Accessibility
Abide in Foundation CSS is a structure approval library that is utilized to approve the structure with custom validators.
Foundation CSS Abide Structure:
- Beginning State: Foundation CSS Stand Beginning State is utilized to determine that an info field in a structure is in the underlying/beginning state. It is valuable to make structures with various custom validator ascribes.
- Error State: Foundation CSS Stand Mistake State is utilized to determine that a specific field’s contribution to a structure is in a mistaken state. It is useful when the field is required or when the client inputs invalid structure subtleties.
- Overlooked Data sources: Disregarded input is one of the validators in withstanding that disregards, debilitates, or conceals the information fields.
- Required Radio and Checkbox: Required and information min-required are two credits utilized with checkboxes and radio to require every one of the fields and to separately require a base number of given fields.
Example 1: This example shows the withstand mistake state in Foundation CSS.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
< script src =
crossorigin = "anonymous" >
</ script >
< link rel = "stylesheet"
href =
< script src =
</ script >
< style >
body
{
margin-left:10px;
margin-right:10px;
}
</ style >
</ head >
< body >
< h1 style = "color: green;" >GeeksforGeeks</ h1 >
< h3 >Foundation CSS Abide Error State</ h3 >
< form data-abide>
< div data-abide-error
class = "alert callout"
aria-live = "assertive"
role = "alert"
style = "display:block;" >
< p >< i class = "fi-alert" ></ i >
There are some errors in your form.</ p >
</ div >
< label class = "is-invalid-label" >
GFG
< input id = "model4Input"
aria-describedby = "model4Error"
type = "text"
required class = "is-invalid-input"
aria-invalid = "true" >
< span id = "example4Error" class = "form-error is-visible" >
This field is required.
</ span >
</ label >
</ form >
< script >
$(document).ready(function () {
$(document).foundation();
})
</ script >
</ body >
</ html >
|
Output:
Foundation CSS Abide Accessibility
Example 2: This example shows the stand Beginning state in Foundation CSS.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
< script src =
crossorigin = "anonymous" >
</ script >
< link rel = "stylesheet"
href =
< script src =
</ script >
< style >
body
{
margin-left:10px;
margin-right:10px;
}
</ style >
</ head >
< body >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 >Foundation CSS Abide Beginning State</ h3 >
< form data-abide>
< div data-abide-error
class = "alert callout"
aria-live = "assertive"
style = "display:none;" >
< p >
< i class = "fi-alert" ></ i >
There are some errors in your form.
</ p >
</ div >
< label >
Name
< input id = "model4Input"
aria-describedby = "example4Error"
type = "text"
required>
< span id = "model4Error"
class = "form-error" >
This field is required.
</ span >
</ label >
</ form >
< script >
$(document).ready(function () {
$(document).foundation();
})
</ script >
</ body >
</ html >
|
Output:
Foundation CSS Abide Accessibility
Reference: https://get.foundation/sites/docs/abide.html
Last Updated :
14 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...