pure-css
  1. pure-css-aligned-form
PreviousNext

Pure CSS Aligned Form

Pure CSS Aligned Form is a lightweight and minimalistic CSS framework that allows you to create simple and responsive web forms with ease.

Use

Pure CSS Aligned Form can be used to create forms of different types, such as login forms, contact forms, and signup forms, and align form elements such as labels and input fields efficiently.

Advantage

The main advantage of Pure CSS Aligned Form is its simplicity and ease of use. With a minimalistic design, it is lightweight and fast, making it perfect for creating responsive forms on the web. It also allows for simple customization of form layout and styling making it easy to adapt to your specific design needs.

Example

Here is an example of creating a Login Form using Pure CSS Aligned Form.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">

</head>

<body>
  <form class="pure-form pure-form-aligned">
    <fieldset>
      <div class="pure-control-group">
        <label for="aligned-name">Username</label>
        <input type="text" id="aligned-name" placeholder="Username" />
        <span class="pure-form-message-inline">This is a required field.</span>
      </div>
      <div class="pure-control-group">
        <label for="aligned-password">Password</label>
        <input type="password" id="aligned-password" placeholder="Password" />
      </div>
      <div class="pure-control-group">
        <label for="aligned-email">Email Address</label>
        <input type="email" id="aligned-email" placeholder="Email Address" />
      </div>
      <div class="pure-control-group">
        <label for="aligned-foo">Supercalifragilistic Label</label>
        <input type="text" id="aligned-foo" placeholder="Enter something here..." />
      </div>
      <div class="pure-controls">
        <label for="aligned-cb" class="pure-checkbox">
          <input type="checkbox" id="aligned-cb" /> I&#x27;ve read the terms and conditions
        </label>
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
      </div>
    </fieldset>
  </form>
</body>

</html>
Try Playground

In the above example, we have used the CSS classes provided by Pure CSS Aligned Form to align and style our form elements. The pure-form and pure-form-aligned classes ensure our form elements line up correctly, while the pure-button and pure-button-primary classes define the style and appearance of our submit button.

Summary

Pure CSS Aligned Form is an excellent option for creating simple, responsive web forms with efficiency and clean aesthetics. Its minimalistic design, lightweight nature, and responsive grid system make it perfect for creating forms that look great on any device while keeping your load times low.

Stacked FormMulti-Column Forms
Published on: