Foundation Forms
Foundation provides rich form styles and components. This chapter will introduce various usages of Foundation forms.
Basic Forms
html
<form>
<label>Username</label>
<input type="text" placeholder="Enter username">
</label>
<label>Password</label>
<input type="password" placeholder="Enter password">
</label>
<label>Email</label>
<input type="email" placeholder="Enter email">
</label>
<input type="checkbox" id="remember"> Remember me
</label>
<button class="button" type="submit">Login</button>
</form>Form Layouts
Stacked Form (Default)
html
<form>
<label>Name</label>
<input type="text">
<label>Email</label>
<input type="email">
<button class="button" type="submit">Submit</button>
</form>Inline Form
html
<div class="grid-x grid-padding-x">
<div class="cell small-3">
<label>Name</label>
<input type="text">
</div>
<div class="cell small-9">
<label>Email</label>
<input type="email">
</div>
<div class="cell small-12 medium-2">
<button class="button" type="submit">Submit</button>
</div>
</div>Inline Form With Labels
html
<div class="grid-x grid-padding-x">
<div class="cell small-3">
<label for="name" class="text-right middle">Name</label>
</div>
<div class="cell small-9">
<input type="text" id="name">
</div>
</div>
<div class="cell small-12 medium-2">
<label for="email" class="text-right middle">Email</label>
</div>
<div class="cell small-9">
<input type="email" id="email">
</div>
</div>
</div>
</form>Input Types
Text Inputs
html
<input type="text" placeholder="Text input">
<input type="text" placeholder="Search...">
<input type="email" placeholder="Email...">
<input type="password" placeholder="Password...">
<input type="number" placeholder="Number...">
<input type="tel" placeholder="Phone...">
<input type="url" placeholder="Website...">
<input type="date">
<input type="time">
<input type="datetime-local">Textarea
html
<textarea placeholder="Enter content..." rows="5"></textarea>Select
html
<select>
<option value="">Select...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- Multiple select -->
<select multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>Checkboxes
html
<fieldset>
<legend>Select your interests</legend>
<input type="checkbox" id="music" name="hobbies">
<label for="music">Music</label>
<input type="checkbox" id="sports" name="hobbies">
<label for="sports">Sports</label>
<input type="checkbox" id="reading" name="hobbies">
<label for="reading">Reading</label>
</fieldset>Radio Buttons
html
<fieldset>
<legend>Select your gender</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</fieldset>Form Groups
Input Groups
html
<div class="input-group">
<span class="input-group-label">
<i class="fi-mail"></i>
</span>
<input class="input-group-field" type="email" placeholder="Enter email">
</div>html
<div class="input-group">
<span class="input-group-label">
<i class="fi-lock"></i>
</span>
<input class="input-group-field" type="password" placeholder="Enter password">
</div>html
<div class="input-group">
<span class="input-group-label">
<i class="fi-magnifying-glass"></i>
</span>
<input class="input-group-field" type="search" placeholder="Search...">
<div class="input-group-button">
<button class="button" type="submit">Search</button>
</div>
</div>Complete Form Example
html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Forms Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
</style>
.form-section {
margin-bottom: 40px;
padding: 30px;
background: #f4f4f4;
border-radius: 4px;
}
.form-section h2 {
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<h1>Foundation Forms Showcase</h1>
<div class="form-section">
<h2>Contact Form</h2>
<form>
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-6">
<label>Full Name</label>
<input type="text" placeholder="Enter your full name">
</div>
<div class="cell small-12 medium-6">
<label>Email Address</label>
<input type="email" placeholder="Enter your email">
</div>
<div class="cell small-12">
<label>Subject</label>
<input type="text" placeholder="Enter subject">
</div>
</div>
</form>
</div>
<div class="form-section">
<h2>Registration Form</h2>
<form>
<div class="grid-x grid-padding-x">
<div class="cell small-6">
<label>Username</label>
<input type="text" placeholder="Choose a username">
</div>
<div class="cell small-6">
<label>Password</label>
<input type="password" placeholder="Choose a password">
</div>
<div class="cell small-12">
<label>Confirm Password</label>
<input type="password" placeholder="Confirm password">
</div>
</div>
</form>
</div>
<div class="form-section">
<h2>Newsletter Form</h2>
<form>
<div class="grid-x grid-padding-x">
<div class="cell auto">
<label>Email</label>
<input type="email" placeholder="Enter your email">
</label>
</div>
<div class="cell shrink">
<button class="button" type="submit">Subscribe</button>
</div>
</div>
</form>
</div>
<div class="form-section">
<h2>Input Group Examples</h2>
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-4">
<div class="input-group">
<span class="input-group-label">
<i class="fi-mail"></i>
</span>
<input class="input-group-field" type="email" placeholder="Email Address">
</div>
</div>
<div class="cell small-12 medium-4">
<div class="input-group">
<span class="input-group-label">
<i class="fi-lock"></i>
</span>
<input class="input-group-field" type="password" placeholder="Password">
</div>
</div>
<div class="cell small-12 medium-4">
<div class="input-group">
<span class="input-group-label">
<i class="fi-magnifying-glass"></i>
</span>
<input class="input-group-field" type="search" placeholder="Search...">
<div class="input-group-button">
<button class="button" type="submit">Search</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-section">
<h2>Fieldset with Radio Buttons</h2>
<form>
<fieldset>
<legend>Select Your Gender</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</fieldset>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>Form Best Practices
- Semantic Labels: Always use
<label>tags withforattributes - Proper Input Types: Choose appropriate input types for different data
- Validation: Implement form validation for user-friendly experience
- Accessibility: Use proper ARIA attributes
- Mobile Friendly: Ensure forms are easy to use on mobile devices
html
<!-- Good form example -->
<form>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required aria-describedby="email-hint">
<small id="email-hint">We'll never share your email</small>
</label>
</form>Summary
In this chapter, we learned:
- Basic form structures
- Different input types
- Form layouts (stacked, inline)
- Form groups and fieldsets
- Best practices for accessibility
In the next chapter, we will learn about Foundation Dropdowns.
Tip: Always provide clear labels and helpful hints to guide users through your forms.