Pure CSS Forms

Pure CSS form elements are used to take information from the user. Using Pure CSS ,we can create different types of pure css forms such as:

Default Form
Stacked Form
Aligned Form

Default Form

To create default form inline form, simply add .pure-form class to the <form> element base class.

General Syntax

      <form class="pure-form"></form>

Try it now

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1 custom--alignment">
    <form class="pure-form">
      <fieldset>
        <legend>A compact inline form</legend>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <label for="default-remember"> <input type="checkbox" id="default-remember" /> Remember me </label>
        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
      </fieldset>
    </form>
  </div>
  <!-- /pure-u-sm-1-2-->
</div>
<!--/pure-g-->

Try it now

Source Code : Output

Stacked Form

To create stacked form, just assign .pure-form-stacked class to the <form> element base class having class .pure-form.

General Syntax

      <form class="pure-form pure-form-stacked"></form>

Try it now

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1">
    <form class="pure-form pure-form-stacked">
      <fieldset>
        <legend>A Stacked Form</legend>
        <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="profession">Profession</label>
        <select id="profession">
          <option>Design</option>
          <option>Development</option>
          <option>Graphics Design</option>
        </select>
        <label for="remember" class="pure-checkbox"> <input id="remember" type="checkbox" /> Remember me </label>
        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
      </fieldset>
    </form>
  </div><!-- /pure-u-sm-1-2-->
</div><!--/pure-g-->

Try it now

Source Code : Output

Aligned Form

To create an aligned form ,you have to add .pure-form-aligned & .pure-form to the <form> element base class.

General Syntax

      <form class="pure-form pure-form-aligned"></form>

Try it now

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1">
    <form class="pure-form pure-form-aligned">
      <fieldset>
        <div class="pure-control-group">
          <label for="name">Username</label>
          <input id="name" type="text" placeholder="Username" />
        </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="email">Email Address</label>
          <input id="email" type="email" placeholder="Email Address" />
        </div>
      </fieldset>
    </form>
  </div>
</div>

Try it now

Source Code : Output

Pure CSS Forms

Default Form

Stacked Form

Aligned Form

Web Tutorials