pure-css
  1. pure-css-multi-column-forms
PreviousNext

Pure CSS Multi-Column Forms

  • Pure CSS is a helpful framework for creating forms that look professional, streamlined, and easy to use.
  • One of the key features of Pure CSS is its ability to create multi-column layouts for forms, which can help to improve the user experience.

Use

Using Pure CSS to design multi-column forms can help to simplify complex forms and improve readability, making the forms easier to complete for users. This feature can be particularly useful for online applications that require extensive user input, such as registration forms or surveys.

Advantage

The advantage of using multi-column forms is that they can save space and make forms easier to read on smaller screens, like mobile devices. This can help improve the user experience and make forms more accessible for everyone.

Example

Here is an example of a multi-column form layout created using Pure CSS.

<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 Playground

Summary

Pure CSS is a great option for designing forms that are easy to read, simple to complete, and look professional. With its ability to create multi-column layouts, Pure CSS can help improve the user experience and make forms more accessible for users across all devices.

Aligned FormGrouped Input Forms
Published on: