Pure CSS Forms

HTML 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

Try it now

Source Code

Try it now

If you run the above source code then the output look like:

Stacked Form

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

General Syntax

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

If you run the above source code then the output look like:

Aligned Form

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

General Syntax

Try it now

Source Code

Try it now

If you run the above source code then the output look like:

Pure CSS Forms

Default Form

General Syntax

Source Code

Stacked Form

General Syntax

Source Code

Aligned Form

General Syntax

Source Code

Our Tutorials