/    /  Pure CSS – Aligned Form

Pure CSS – Aligned Form:

In this tutorial, we will learn about the Pure Aligned Form. Pure CSS provided the class name called pure-form-aligned to be used along with the class pure-form in the <form> element.

In this aligned form, all the labels would be right aligned so that form input controls get in line with labels. The Aligned form would look as stacked form in the mobile view. We also need to use the pure-control-group class. Let us see the Pure.CSS Aligned form in the below example:

Example:

<html> 

<head> 

<title>Pure CSS Aligned form</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

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

</head> 

<body> 

<form class="pure-form pure-form-aligned">

    <fieldset>

        <div class="pure-control-group">

            <label for="name">Username</label>

            <input id="name" type="text" placeholder="Username">

            <span class="pure-form-message-inline">This is a required field.</span>

        </div>

        <div class="pure-control-group">

            <label for="password">Password</label>

            <input id="password" type="password" placeholder="Password">

        </div>


        <div class="pure-control-group">

            <label for="email">Email Address</label>

            <input id="email" type="email" placeholder="Email Address">

        </div>


        <div class="pure-controls">

            <label for="cb" class="pure-checkbox">

                <input id="cb" type="checkbox"> I have understood the terms and conditions.

            </label>

            <button type="submit" class="pure-button pure-button-primary">Submit</button>

        </div>

    </fieldset>

</form>

</body> 

</html>

Below is the output: