Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap.
In this article, we will discuss how to create a Stacked form using Pure CSS.
A Stacked form is a type of HTML form used to create the stacked form. In this type of form, labels are below the input fields.
Pure CSS Stacked Form Class:
- pure-form: It is used to create the HTML form in Pure CSS.
- pure-form-stacked: It is used to create the stacked form in which the labels are shown below the input fields.
Syntax:
<form class="pure-form pure-form-stacked"> .... </form>
Example 1: This example describes the Stacked Form in Pure CSS.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous" />
</head>
<body>
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Pure CSS Stacked form </b>
<br />
<form class="pure-form pure-form-stacked">
<fieldset>
<div class="pure-control-group">
<label for="first-name">Enter your First Name</label>
<input type="text" id="first-name" placeholder="First name" />
<span class="pure-form-message-inline">
*This is a Required field.
</span>
</div>
<div class="pure-control-group">
<label for="last-name">Enter your Last Name</label>
<input type="text" id="last-name" placeholder="Last name" />
<span class="pure-form-message-inline">
*This is a Required field.
</span>
</div>
<div class="pure-control-group">
<label for="email"> Enter your email id</label>
<input type="email" id="email" placeholder="Email id" />
</div>
<div class="pure-control-group">
<label for="mob"> Enter your Mobile no.</label>
<input type="number" id="mob" placeholder="Mobile no." />
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary">
Register
</button>
</div>
</fieldset>
</form>
</body>
</html>
|
Output:
Simple Stacked Form
Example 2: This example describes the Stacked Form in Pure CSS.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous" />
</head>
<body>
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Pure CSS Stacked form </b>
<br />
<form class="pure-form pure-form-stacked">
<fieldset>
<label for="name">Name</label>
<input id="name" type="text" placeholder="Name" />
<span class="pure-form-message">
This is a required field.
</span>
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email" />
<span class="pure-form-message">
This is a required field.
</span>
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password" />
<label for="year">Year of passing</label>
<select id="year">
<option>2022</option>
<option>2023</option>
<option>2023</option>
</select>
<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox" />
I agree
</label>
<button type="submit" class="pure-button pure-button-selected">
Submit form
</button>
</fieldset>
</form>
</body>
</html>
|
Output:
Stacked Form
Reference: https://purecss.io/forms/#stacked-form