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
Please Login to comment...