pure-css
  1. pure-css-stacked-form
PreviousNext

Pure CSS Stacked Form

  • A stacked form is a type of form layout where the labels and form elements are stacked on top of each other, providing a clean and simple design.
  • Pure CSS provides an easy way to create stacked forms with minimal code.

Use

Stacked forms are commonly used in web applications for collecting user information. They are easy to read and navigate, which can lead to a higher completion rate for forms.

Advantage

The advantage of using Pure CSS to create stacked forms is that it eliminates the need for additional JavaScript or CSS. This results in faster load times and a simpler development process.

Example

Here is an example of using Pure CSS to create a simple stacked form.

<form class="pure-form">
    <fieldset>
        <legend>Sign Up</legend>

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

        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Email">

        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Password">

        <label for="confirm-password">Confirm Password</label>
        <input id="confirm-password" type="password" placeholder="Confirm Password">

        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>
Try Playground

This form uses the built-in layout and styling provided by Pure CSS. Each label and input element is stacked vertically, and the submit button is styled with the Pure CSS button classes.

Summary

Pure CSS provides an easy way to create stacked forms that are clean, simple, and easy to use. Using the built-in styling and layout options, you can create forms quickly and efficiently without the need for additional code. Whether you're building a simple sign-up form or a more complex application, Pure CSS is a great option for stylish and functional forms.

Default FormAligned Form
Published on: