Grouped Input Forms

If you want to group sets of text-based input elements, you have to wrap them in a <fieldset> element with the pure-group classname. Grouped input forms are best for sign-up forms and looks great on mobile devices.

Example

Let's take an example to demostrate grouped input forms:

<!DOCTYPE html>
<html>

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">

<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>
</html>

Test it Now

Output: