Pure.CSS Stacked Form

The class name "pure-form-stacked" is used to create a stacked form with input elements below the labels. The "pure-form-stacked" classname is used to <form> element alongside pure-form.

Example

<html>
   <head>
      <title>The PURE.CSS Default 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">
      
  <form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>A Stacked Form</legend>

        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Email">
        <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="state">State</label>
        <select id="state">
            <option>Delhi</option>
            <option>UP</option>
            <option>Haryana</option>
        </select>

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

Test it Now

Output: