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

A compact inline form

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

A Stacked Form This is a required field.

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

Multi-Column Form (With Pure Grids)

A multi-column form uses a pure grid and responsive grid. Therefore, it displays a form in different columns on the specified screens. Responsive grid systems work on the default Pure grid. Therefore, you must add the CDN path of responsive grids to the existing project.
To create multi-column forms, you will have to include form elements in the Pure Grids. After that, you can make the grid responsive so that it looks pretty on all the screen sizes.

Source Code

          
            <form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Legend</legend>
        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-first-name">First Name</label>
                <input type="text" id="multi-first-name" class="pure-u-23-24" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-last-name">Last Name</label>
                <input type="text" id="multi-last-name" class="pure-u-23-24" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-email">E-Mail</label>
                <input type="email" id="multi-email" class="pure-u-23-24" required="" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-city">City</label>
                <input type="text" id="multi-city" class="pure-u-23-24" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-state">State</label>
                <select id="multi-state" class="pure-input-1-2">
                    <option>AL</option>
                    <option>CA</option>
                    <option>IL</option>
                </select>
            </div>
        </div>
        <label for="multi-terms" class="pure-checkbox">
            <input type="checkbox" id="multi-terms" /> I&#x27;ve read the terms and conditions
        </label>
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>          
        
Try it now

Source Code: Output

Legend

Web Tutorials

Pure CSS Forms
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4