Pure CSS Forms

Last Updated : 23 Feb, 2021

Forms are essential in websites to collect data or information for various purposes. Using Pure CSS we can create different types of forms.

Pure CSS Forms Classes:
  • Default Form
  • Stacked Form
  • Aligned Form
  • Grouped Inputs

Default Form: Add the class "pure-form" to any <form> element to create a default form. This form will be inline in nature.

Syntax: 
<form class="pure-form">...</form>

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
    href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
    integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
    crossorigin="anonymous"/>

    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0" />
</head>

<body>
    <!--To create Default form add
    "pure-form" classname-->
    <form class="pure-form">
    <fieldset>
        <legend>Default Form</legend>

        <input type="text" placeholder="Username" />
        <input type="password" placeholder="Password" />
        <br><br>
        <label for="remember">
        <input id="remember" type="checkbox" />
            Remember me
        </label>

        <button type="submit" 
                class="pure-button 
                       pure-button-primary">
        Log in
        </button>
    </fieldset>
    </form>
</body>
</html>

Output:

Stacked Form: Add the class "pure-form-stacked " alongside pure-form inside <form> element, to create a stacked form with input elements below the labels.

Syntax: 
<form class="pure-form-stacked">...</form>

Example:

HTML 
<!DOCTYPE html>
<html>
  <head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
      href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/>

    <!-- Let browser know website is  
         optimized for mobile -->
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
  </head>

  <body>
    <!--To create Stacked form add
    "pure-form-stacked" classname-->
    <form class="pure-form pure-form-stacked">
      <fieldset>
        <legend>Stacked Form</legend>

        <label for="first-name"> First Name</label>
        <input id="first-name" type="text"
               placeholder="First Name" />

        <label for="last-name"> Last Name</label>
        <input id="last-name" type="text" 
               placeholder="Last Name" />

        <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="state">Gender</label>
        <select id="state">
          <option>Male</option>
          <option>Female</option>
          <option>Other</option>
        </select>

        <label for="remember" class="pure-checkbox">
          <input id="remember" type="checkbox" />
           I accept the Terms & Conditions
        </label>

        <button type="submit" 
                class="pure-button pure-button-primary">
          Submit
        </button>
      </fieldset>
    </form>
  </body>
</html>

Output:

Aligned Form: Add the class "pure-form-aligned" alongside pure-form inside <form> element , to create a aligned form. In this type of forms the labels are right-aligned against the form input controls, but on small screen revert to a stacked form.

Syntax: 
<form class="pure-form-aligned">...</form>

Example:

HTML 
<!DOCTYPE html>
<html>
  <head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
      href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/>

    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
  </head>

  <body>
    <!--To create Aligned form add
    "pure-form-aligned" classname-->
    <form class="pure-form pure-form-aligned">
      <fieldset>
        <legend>Aligned Form</legend>

        <div class="pure-control-group">
          <label for="first-name"> 
           First Name
          </label>
          <input id="first-name" type="text" 
                 placeholder="First Name" />
        </div>

        <div class="pure-control-group">
          <label for="last-name"> 
           Last Name
          </label>
          <input id="last-name" type="text" 
                 placeholder="Last Name" />
        </div>

        <div class="pure-control-group">
          <label for="email">Email</label>
          <input id="email" type="email" 
                 placeholder="Email" />
          <span class="pure-form-message-inline">
            This is a required field.</span
          >
        </div>

        <div class="pure-control-group">
          <label for="password"> Password</label>
          <input id="password" type="password"
                 placeholder="Password" />
        </div>

        <div class="pure-control-group">
          <label for="state">Gender</label>
          <select id="state">
            <option>Male</option>
            <option>Female</option>
            <option>Other</option>
          </select>
        </div>

        <div class="pure-controls">
          <label for="remember" class="pure-checkbox">
            <input id="remember" type="checkbox" />
              I accept the Terms & Conditions
          </label>

          <button type="submit" 
                  class="pure-button pure-button-primary">
            Submit
          </button>
        </div>
      </fieldset>
    </form>
  </body>
</html>

Output:

Grouped Input Form: If you want to create a sign-up form for mobile devices , this form is the best choice. Wrap set of text-based input elements in a <fieldset> element with a "pure-group" class name to create such form. It requires that pure responsive grid to be present on your page.

Syntax: 
<fieldset class="pure-group">...</fieldset>

Example:

HTML 
<!DOCTYPE html>
<html>
  <head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
      href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/>

    <!--Import Pure Css Grid files-->
    <link
      rel="stylesheet"
      href=
"https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css"/>

    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
  </head>

  <body>
    <form class="pure-form">
      <!--To create groups use "pure-group"
        classname in <fieldset> element-->
      <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" 
               placeholder="First Name" />
        <input type="text" class="pure-input-1-2" 
               placeholder="Last Name" />
        <input type="text" class="pure-input-1-2" 
               placeholder="Email" />
        <input type="text" class="pure-input-1-2" 
               placeholder="Password" />
      </fieldset>

      <fieldset class="pure-group">
        <input
          type="text"
          class="pure-input-1-2"
          placeholder="Current Position"/>
        <textarea
          class="pure-input-1-2"
          placeholder="Description of Position">
        </textarea>
      </fieldset>

      <button
        type="submit"
        class="pure-button pure-input-1-2 
               pure-button-primary">
        Submit
      </button>
    </form>
  </body>
</html>

Output:

Comment
Article Tags:
CSS
Pure CSS

Explore