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>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
<script src=
</script>
<script src=
</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>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
<script src=
</script>
<script src=
</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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...