Pure CSS Form Grouped Inputs

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 Grouped inputs form using Pure CSS.

Grouped inputs form is a type of HTML form used to create the grouped input form elements. In this, the input fields are grouped together and are wrapped in an <fieldset> element. These types of forms are best when we want to create the signup forms.

Pure CSS Form Grouped Inputs Class:

• pure-form: This class is used to create an HTML form in Pure CSS.
• pure-group: This is used to group the input fields. We can use multiple <fieldset> elements to create multiple grouped input fields.

Syntax:

<form class="pure-form"> 
 <fieldset class="pure-group">
 Content
 </fieldset>
 
 <fieldset class="pure-group">
 Content
 </fieldset>
</form>

Example 1: This example illustrates the Grouped Inputs in Pure CSS.

Output:

Example 2: This example illustrates the multiple Grouped Inputs in Pure CSS.

Output:

Reference: https://pure-css.github.io/#grouped-inputs/