Pure CSS Form Grouped Inputs

Last Updated : 02 Mar, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/[email protected]/build/pure-min.css" 
          integrity= 
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
          crossorigin="anonymous"> 
</head> 
  
<body> 
    <h1 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h1>  
    <b class="is-size-4"> 
        Pure CSS Grouped inputs form 
    </b><br> 
    <form class="pure-form pure-form-stacked"> 
        <fieldset class="pure-group"> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="Enter first name" /> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="Enter middle name" /> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="Enter last name" /> 
        </fieldset> 
        <fieldset class="pure-group"> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="Enter Email" /> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="Enter Mobile no." /> 
        </fieldset> 
        <button type="submit" 
                class="pure-button pure-input-1-2  
                       pure-button-selected">Submit 
        </button> 
    </form> 
</body> 
</html>

Output:

Pure CSS Form Grouped Inputs

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/[email protected]/build/pure-min.css" 
          integrity= 
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
          crossorigin="anonymous"> 
</head> 
  
<body> 
    <h1 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h1> 
    <b class="is-size-4"> 
        Pure CSS Grouped inputs form 
    </b><br /> 
    <form class="pure-form pure-form-stacked"> 
        <fieldset class="pure-group"> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="Enter first name" /> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="Enter middle name" /> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="Enter last name" /> 
        </fieldset> 
        <fieldset class="pure-group"> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="Enter Email" /> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="Enter Mobile no." /> 
        </fieldset> 
        <fieldset class="pure-group"> 
            <input type="text" 
                   class="pure-input-1-2" 
                   placeholder="A title" /> 
            <textarea class="pure-input-1-2" 
                      placeholder="Textareas work too"> 
            </textarea> 
        </fieldset> 
        <fieldset class="pure-group"> 
            <input type="text" 
                    class="pure-input-1-2" 
                    placeholder="City" /> 
            <input type="text" 
                    class="pure-input-1-2" 
                    placeholder="State" /> 
            <input type="text" 
                    class="pure-input-1-2" 
                    placeholder="Country" /> 
        </fieldset> 
        <button type="submit" 
                class="pure-button pure-input-1-2 pure-button-selected"> Submit 
        </button> 
    </form> 
</body> 
</html>