Pure.CSS Stacked Form

by Online Tutorials Library July 14, 2022

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:

PureCSS Forms 3
PureCSS Forms 4

Next TopicPure.CSS Aligned Form

Pure.CSS Stacked Form

Pure.CSS Stacked Form

Asserts in Postman

Python Wand library

You may also like