Pure CSS – Stacked Form:

In this tutorial, we will learn about the Pure Stacked Form. Pure CSS provided the class name called pure-form-stacked to be used along with the class pure-form in the <form> element. Let us see the Stacked form in the below example:




<title>Pure CSS stacked form</title>


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



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


        <legend>Stacked Form</legend>

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

        <input id="username" type="username" placeholder="username">

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

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

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

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

            <input id="remember" type="checkbox"> Remember me


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






Below is the output of Pure CSS Stacked form: