Pure CSS is a lightweight and responsive CSS framework developed by Yahoo. It helps in creating structured and responsive forms using classes like <form> and Pure Grid.
- Supports different form layouts such as Aligned Form and Stacked Form
- Uses the <form> element with the pure-form class to create styled forms
- Pure Grid is used to create responsive multi-column form layouts
Syntax:
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<label for="name">Name</label>
<input type="text" id="name"
class="pure-u-1" />
</div>
</div>
</fieldset>
</form>
Example 1: This code example demonstrates how we can make a multi-form column that is responsive with the help of Pure Responsive Grids.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/pure-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/base-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css">
<link rel="stylesheet" href=
"https://pure-css.github.io/
<script src=
"https://pure-css.github.io/
</script>
</head>
<body>
<div id="main">
<div class="header">
<h1 style="color:green;"> GeeksforGeeks </h1>
<h2>Pure CSS Grids with Multi-Column Form</h2>
</div>
<form class="pure-form pure-form-stacked"
style="margin:3rem;">
<fieldset>
<legend>Submit User Details</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-first-name">
First Name
</label>
<input type="text" id="multi-first-name"
class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-last-name">
Last Name
</label>
<input type="text" id="multi-last-name"
class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-email">E-Mail</label>
<input type="email" id="multi-email"
class="pure-u-23-24" required="" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-city">City</label>
<input type="text" id="multi-city"
class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-state">Domain</label>
<select id="multi-state" class="pure-input-1-2">
<option>DSA</option>
<option>Web Technologies</option>
<option>Competitive Coding</option>
</select>
</div>
</div>
<label for="multi-terms" class="pure-checkbox">
<input type="checkbox" id="multi-terms" />
I've read the terms and conditions
</label>
<button type="submit" class=
"pure-button pure-button-primary">
Submit
</button>
</fieldset>
</form>
</div>
</body>
</html>
Output:
Example 2: The code example demonstrates how we can add all types of form inputs like the grouped ones or the rounded ones to the multi-column layout.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/pure-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css">
<link rel="stylesheet" href=
"https://pure-css.github.io/
<script src="https://pure-css.github.io/</script>
</head>
<body>
<div id="main">
<div class="header">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Pure CSS Grids with Multi-Column Form</h2>
</div>
<form class="pure-form pure-form-stacked" style="margin:3rem;">
<fieldset>
<legend>Submit User Details</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-2">
<label for="multi-first-name">First Name</label>
<input type="text" id="multi-first-name"
class="pure-u-23-24 pure-input-rounded" />
</div>
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-2">
<label for="multi-last-name">Last Name</label>
<input type="text" id="multi-last-name"
class="pure-u-23-24 pure-input-rounded" />
</div>
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-2">
<label for="multi-email">E-Mail</label>
<input type="email" id="multi-email"
class="pure-u-23-24 pure-input-rounded" required="" />
</div>
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-2">
<label for="multi-city">City</label>
<input type="text" id="multi-city" class=
"pure-u-23-24 pure-input-rounded" />
</div>
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-2">
<label for="multi-state">Domain</label>
<select id="multi-state" class="pure-input-1-2">
<option>DSA</option>
<option>Web Technologies</option>
<option>Competitive Coding</option>
</select>
</div>
<fieldset class="pure-group pure-u-1 pure-u-md-1-3 pure-u-lg-4-5">
<input type="text" class="pure-input-1-2 pure-input-rounded"
placeholder="Language Preference" />
<input type="text" class="pure-input-1-2 pure-input-rounded"
placeholder="Experience" />
<input type="email" class="pure-input-1-2 pure-input-rounded"
placeholder="Score" />
</fieldset>
</div>
<label for="multi-terms" class="pure-checkbox">
<input type="checkbox" id="multi-terms" />
I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">
Submit
</button>
</fieldset>
</form>
</div>
</body>
</html>
Output:
