pure-css
  1. pure-css-grouped-input-forms
PreviousNext

Grouped Input Forms with Pure CSS

  • Grouped input forms are a useful way to collect related information from users on a webpage.
  • Pure CSS makes it easy to create these forms with a consistent and visually appealing design.

Use

Grouped input forms are ideal for collecting information from users that is related to a specific topic or category. For example, a contact form that asks for the user's name, email, and message is a great example of a grouped input form.

Advantage

The advantage of using Pure CSS to create grouped input forms is that it provides a streamlined way to style these forms without the need for extensive CSS coding. The framework offers a variety of styling options that make it easy to create visually cohesive forms that are easy to use and look great on any device.

Example

Here is an example of using Pure CSS to create a simple grouped input 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">
    <fieldset class="pure-group">
      <input type="text" class="pure-input-1-2" placeholder="Username" />
      <input type="text" class="pure-input-1-2" placeholder="Password" />
      <input type="email" class="pure-input-1-2" placeholder="Email" />
    </fieldset>
    <fieldset class="pure-group">
      <input type="text" class="pure-input-1-2" placeholder="A title" />
      <textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
    </fieldset>
    <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
  </form>
</body>

</html>
Try Playground

In this example, we use Pure CSS's pure-form class to create a simple and visually appealing grouped input form with labels, input fields, and a message box.

Summary

Grouped input forms are an important user interface element that can improve user experience by simplifying information collection. Pure CSS offers a simple and effective way to create consistent and visually appealing forms with minimal coding. Give it a try in your next project and see how it can improve your forms!

Multi-Column FormsTables
Published on: