Foundation CSS is an open-source & 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 Fast click.js tool for faster rendering on mobile devices.
Kitchen Sink has the foundation elements to work well in our websites and applications. The Kitchen Sink Forms is used to create a responsive form layout using the combination of foundation grid and the form styles.
Foundation CSS Kitchen Sink Forms classes:
- help-text: This class is used to display some text that instructs on how to respond to a particular field. It also tells some additional info about the corresponding field.
- callout: This class is used to create a container that has a border and some padding in it.
- grid-x: This class is used to define the child elements to be in the row in the x-direction.
- grid-margin-x: This class is used to define the margin in the x-direction for its child elements.
- cell: This class is used to define a column in the grid.
- large-n: This class is used to define a grid in the large screen size covering n cells each.
- medium-n: This class is used to define a grid in the medium screen size covering n cells each.
- small-n: This class is used to define a grid in the small screen size covering n cells each.
- text-right: This class is used to align the text to the right side inside the container.
- button: This class is used to define input type as a button.
Syntax:
<form>
<input type="...">
.............
</form>Example 1: The below example illustrates the use of Kitchen Sink Forms using foundation classes.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Forms</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<!-- Compressed JavaScript -->
<script src=
</script>
</head>
<body style="margin-inline: 40rem;">
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Foundation CSS Kitchen Sink Forms</h3>
</center>
<form class="callout">
<label>Name
<input type="text" placeholder="input name" aria-describedby="gfg-name">
</label>
<p class="help-text" id="gfg-name">
You can input some text in the field above
</p>
<label>Number
<input type="number" value="0">
</label>
<label>Select subject
<select>
<option value="">Subject</option>
<option value="DSA">DSA</option>
<option value="OS">OS</option>
<option value="DBMS">DBMS</option>
<option value="OOP's">OOP's</option>
</select>
</label>
<label>Message
<textarea placeholder="message"></textarea>
</label>
<input type="submit" class="button" value="SUBMIT">
</form>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Forms
Example 2: Below is another example that illustrates the use of Kitchen Sink Forms using a foundation grid system.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Forms</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<!-- Compressed JavaScript -->
<script src=
</script>
</head>
<body style="margin-inline: 30rem;">
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Foundation CSS Kitchen Sink Forms</h3>
</center>
<form class="callout">
<div class="grid-x grid-margin-x">
<div class="cell large-6">
<label for="label" class="text-right">
Name
</label>
</div>
<div class="cell large-6">
<input type="text" id="label" placeholder="Enter your name">
</div>
</div>
<br><br>
<div class="grid-x grid-margin-x">
<fieldset class="cell large-6">
<legend>Choose Your Subject</legend>
<input type="radio" name="gfg" id="gfg-1" required>
<label for="gfg-1">DSA</label>
<input type="radio" name="gfg" id="gfg-2">
<label for="gfg-2">OOP's</label>
</fieldset>
<fieldset class="cell large-6">
<legend>Check these Courses</legend>
<input type="checkbox" id="course-1">
<label for="course-1">
DSA - Self Paced
</label>
<input type="checkbox" id="course-2">
<label for="course-2">
Interview Preparation
</label>
</fieldset>
</div>
<br><br>
<input type="submit" class="button success" value="SUBMIT">
</form>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Forms
Reference: https://get.foundation/sites/docs/kitchen-sink.html#forms