Pure.CSS Aligned Form

by Online Tutorials Library July 14, 2022

Pure.CSS Aligned Form

The classname “pure-form-aligned” is used to create a aligned form to a <form> element alongside pure-form. In this type of forms, the labels are right aligned against the form input controls, but on smaller screens revert to a stacked form.

Example

 <!DOCTYPE html> <html>  <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-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-control-group”>             <label for=”foo”>Supercalifragilistic Label</label>             <input id=”foo” type=”text” placeholder=”Enter something here…”>         </div>          <div class=”pure-controls”>             <label for=”cb” class=”pure-checkbox”>                 <input id=”cb” type=”checkbox”> I’ve read the terms and conditions             </label>              <button type=”submit” class=”pure-button pure-button-primary”>Submit</button>         </div>     </fieldset> </form> </html> 

Test it Now

Output:

PureCSS Forms 5

Next TopicPure.CSS Multi-Column Form

Pure.CSS Aligned Form

Pure.CSS Aligned Form

Affinity Photo Vs. Photoshop

Basic Python for Java Developers

You may also like