Home / Pure CSS Tutorial / Pure CSS – Stacked Form

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:

Example:

<html> 

<head> 

<title>Pure CSS stacked 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-stacked">

    <fieldset>

        <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

        </label>

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

    </fieldset>

</form>

</body>

</html>

Below is the output of Pure CSS Stacked form: