Open In App

Foundation CSS Abide Ignored Inputs

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and JavaScript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.

In Foundation CSS, Abide is a form validation library that is used to validate the form with custom validators. Ignored input is one of the validators in abide that ignores, disables, or hide the input fields.

Foundation CSS, Abide Ignored Inputs Attributes used:

  • data-abide: This attribute is used to define that the form is validated using abide.
  • data-abide-ignore: This attribute is used to specify that the element is being ignored.
  • disabled: This type of attribute is used to disable any input of the element.
  • type=”hidden”: This type of attribute is used to hide the element.
  • type=”reset”: This type of attribute is used to reset/empty the form.

Syntax:

<form data-abide>
    <input type ="..." data-abide-ignore>
    <input type ="..." disabled>
    <input type ="hidden">
    <button class="button" type="submit/reset">
         Submit/Reset
    </button>
</form>

Example 1:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Foundation CSS Abide Ignore Input</title>
  <link rel="stylesheet"
        href=
        crossorigin="anonymous">
  <script src=
          crossorigin="anonymous">
  </script>
  <link rel="stylesheet"
        href=
  <script src=
  </script>
  <script src=
          crossorigin="anonymous">
  </script>
</head>
  
<body style="margin-inline: 30rem;">
  <center>
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
  
    <h3>Foundation CSS Abide Ignore Input</h3>
  
    <form data-abide>
      <div class="grid-x grid-margin-x">
        <div class="cell small-12">
            <input type="text"
                   aria-describedby="gfg" 
                   data-abide-ignore>
  
          <p class="help-text" id="gfg">
            data-abide-ignore attribute ignores this input
          </p>
  
        </div>
          
        <button class="button" type="submit">SUBMIT</button
            
        <button class="button" type="reset">RESET</button>
      </div>
    </form>
  </center>
  
  <script>
    $(document).ready(function () {
      $(document).foundation();
    })
  </script>
</body>
  
</html>


Output:

Foundation CSS Abide Ignored Inputs

Foundation CSS Abide Ignored Inputs

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Foundation CSS Abide Ignore Input</title>
  <link rel="stylesheet"
        href=
        crossorigin="anonymous">
  <script src=
          crossorigin="anonymous">
  </script>
  <link rel="stylesheet"
        href=
  <script src=
  </script>
  <script src=
          crossorigin="anonymous">
  </script>
</head>
<body style="margin-inline: 30rem;">
  <center>
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
  
    <h3>Foundation CSS Abide Ignore Input</h3>
  
    <form data-abide>
      <div class="grid-x grid-margin-x">
        <div class="cell small-12">
          <div class="cell small-12">
            <input type="text" 
                   placeholder="input is Disabled" 
                   aria-describedby="gfg" 
                   disabled>
            <p class="help-text" id="gfg">
              disabled attribute makes it disabled
            </p>
  
          </div>
  
          <button class="button" type="submit">Submit</button
              
          <button class="button" type="reset">Reset</button>
        </div>
      </div
    </form>
  </center>
  
  <script>
    $(document).ready(function () {
      $(document).foundation();
    })
  </script>
</body>
  
</html>


Output:

Foundation CSS Abide Ignored Inputs

Foundation CSS Abide Ignored Inputs

Example 3:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Foundation CSS Abide Ignore Input</title>
  <link rel="stylesheet" 
        href=
        crossorigin="anonymous">
  
  <script src=
          crossorigin="anonymous">
  </script>
  
  <link rel="stylesheet"
        href=
  
  <script src=
  </script>
  
  <script src=
          crossorigin="anonymous">
  </script>
</head>
  
  
<body style="margin-inline: 30rem;">
  <center>
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
  
    <h3>Foundation CSS Abide Ignore Input</h3>
  
    <form data-abide>
      <div class="grid-x grid-margin-x">
        <div class="cell small-12">
          <div class="cell small-12">
            <input type="hidden"
                   placeholder="Hidden input" 
                   aria-describedby="gfg" >
            <p class="help-text"
               id="gfg">
              type="hidden" makes the input field hidden
            </p>
  
          </div>
            
          <button class="button" type="submit">SUBMIT</button
              
          <button class="button" type="reset">RESET</button>
        </div>
      </div>
    </form>
  </center>
  
  <script>
    $(document).ready(function () {
      $(document).foundation();
    })
  </script>
</body>
  
</html>


Output:

Foundation CSS Abide Ignored Inputs

Foundation CSS Abide Ignored Inputs

Reference link: https://get.foundation/sites/docs/abide.html#ignored-inputs



Last Updated : 10 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads