Pure.CSS Grouped Form

by Online Tutorials Library July 14, 2022

Grouped Input Forms

If you want to group sets of text-based input elements, you have to wrap them in a <fieldset> element with the pure-group classname. Grouped input forms are best for sign-up forms and looks great on mobile devices.

Example

Let’s take an example to demostrate grouped input forms:

 <!DOCTYPE html> <html>  <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”>     <fieldset class=”pure-group”>         <input type=”text” class=”pure-input-1-2″ placeholder=”Username”>         <input type=”text” class=”pure-input-1-2″ placeholder=”Password”>         <input type=”email” class=”pure-input-1-2″ placeholder=”Email”>     </fieldset>      <fieldset class=”pure-group”>         <input type=”text” class=”pure-input-1-2″ placeholder=”A title”>         <textarea class=”pure-input-1-2″ placeholder=”Textareas work too”></textarea>     </fieldset>      <button type=”submit” class=”pure-button pure-input-1-2 pure-button-primary”>Sign in</button> </form> </html> 

Test it Now

Output:

PureCSS Forms 8

Next TopicPure.CSS Input Sizing Form

Pure.CSS Grouped Form

Grouped Input Forms

Affinity Photo Vs. Photoshop

Basic Python for Java Developers

You may also like