Foundation CSS Forms Help Text

Last Updated : 14 Mar, 2022

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Forms on a web page allow a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms and provides the user to fill in various types of input fields such as text type, password type, number type, email type, or maybe some other type of input. Forms are generally used when you want to collect data from the user. For example, a user wants to buy a bag online, so he/she has to first enter their shipping address in the address form and then add their payment detail in the payment form to place an order.

Help Text is generally placed below a particular field (generally underneath an input field) which is generally used to specify what type of input should be given and clarifies its purpose.

Foundation CSS Forms Help Text Classes:

help-text: This class creates and styles the text as a help text.
aria-describedby: This is the attribute of the input element whose value must be equal to the value of id of the help text to connect these two elements.

Syntax:

<input type="..." aria-describedby="xyz">
<p class="help-text" id="xyz">....</p>

Note: The attribute value of the help text id should be the same as the aria-describedby attribute value.

Example 1: In the below example, we used help text to suggest to the user the rules for a password.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Foundation CSS Forms Help Text</title>
        <!-- Compressed CSS -->
        <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
        <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
        <!-- Compressed JavaScript -->
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
        </script>
        <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
       </script>
       <style>
         body{
          margin-left:10px;
          margin-right:10px;
         }
       </style>
    </head>
    <body>
        <center>
            <h1 style="color:green;">GeeksforGeeks</h1>
            <strong>Foundation CSS Forms Help Text</strong>
        </center>
        <div style="width:60%;">
            <label>Password 
              <input type="password" 
                     aria-describedby="passwordHelpText">
            </label>
            <p class="help-text" id="passwordHelpText">
             Password must contain at least 8 characters : 
              with atleast a number, a upper case, a lower 
              case and a special character.
            </p>

        </div>
        <script>
            $(document).foundation();
        </script>
    </body>
</html>

Output:

Example 2: In the below example, we have made a login template form with real-time usage of help text.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Foundation CSS Forms Help Text</title>
        <!-- Compressed CSS -->
        <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
        <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
        <!-- Compressed JavaScript -->
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
        </script>
        <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
        </script>
    </head>
    <body>
        <center>
            <h1 style="color:green;">GeeksforGeeks</h1>
            <strong>Foundation CSS Forms Help Text</strong>
        </center>
        <form>
            <div class="grid-container" style="width: 40%;">
                <label>Username<input type="text" 
                                      placeholder="Enter your name:"> 
                </label>
                <label>ID <input type="text" 
                                 placeholder="Enter your college">
                </label>
                <label>Password 
                   <input type="password" 
                          aria-describedby="passwordHelpText">
                </label>
                <p class="help-text" id="passwordHelpText">
                   Password must contain at least 8 characters : 
                   with atleast a number, a upper case, a lower 
                   case and a special character.</p>

            </div>
        </form>
        <script>
            $(document).foundation();
        </script>
    </body>
</html>

Output:

Reference: https://get.foundation/sites/docs/forms.html#help-text-accessibility

Foundation CSS Forms Label Positioning

tpraneeth2001

Improve

Article Tags :

Foundation CSS Forms Help Text

Similar Reads

Thank You!

What kind of Experience do you want to share?