tag. Along with the pure-form class there are other classes also..."> tag. Along with the pure-form class there are other classes also..." /> tag. Along with the pure-form class there are other classes also..." />
Advertisement

Advertisement


Pure.CSS Forms

A form is a collection of labels and input elements together which allow the website to take information from the users for various operations, like for registration purpose. These forms must be look attractive and for that these should be designed properly. The Pure CSS is an easy and powerful way to make these forms look attractive, beautiful and responsive also. You just have to add a class pure-form to <form> tag and you will get a designed form right there. Along with the pure-form class there are other classes also, look below on the table-


Class Name Description
pure-form It displays a default inline form.
pure-form-stacked It displays a stacked form with input elements placed below the labels.
pure-form-aligned It displays an aligned form with input elements below the labels.
pure-input-rounded It displays a form input element with rounded corners.
pure-checkbox It beautifies a checkbox.
pure-radio It beautifies a radio.

Types of Pure CSS Forms:

Purecss Default Form

This is the default form which will create an inline form. You have to add the main class pure-form to the <form> element. Look at the output below.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Default Forms </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <body> <style> form{ margin: 20px; } </style> <form class="pure-form"> <fieldset> <legend>A compact inline form</legend> <input type="email" placeholder="Email"> <input type="password" placeholder="Password"> <label for="remember"> <input id="remember" type="checkbox"> Remember me </label> <button type="submit" class="pure-button pure-button-primary">Sign in</button> </fieldset> </form> </body> </html>

Output

Pure.CSS Default Forms
A compact inline form

Pure.CSS Stacked Form

A stacked form is the one where the input elements lists below the labels. To create a stacked form in Pure you have to add the pure-form-stacked class to a <form> element. Remember to add this class alongside with the pure-form class. Look the output below to see the stacked form.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Stacked Forms </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <body> <style> form{ margin: 20px; } </style> <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>AL</option> <option>CA</option> <option>IL</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> </body> </html>

Output

Pure.CSS Stacked Forms
A Stacked Form This is a required field.

Pure.CSS Aligned Form

An aligned form is the one where the labels are right aligned against the input elements. To create this type of form you have to use the pure-form-aligned class alongside with the pure-form class. There is responsiveness in this form that in smaller screens it goes back to stacked form.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Aligned Forms </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <body> <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> </body> </html>

Output

Pure.CSS Aligned Forms
This is a required field.

Pure.CSS Multi-Column Form (with Pure Grids)

A multi column form is the one where the form gets displayed in various columns rather than the single one. To create multi-column forms, you have to divide the form elements in the grids for different screens. You can look at the example to understand it completely and notice the use of grid classes there. Just remember to include the CDN path for responsive grids if you want the responsive grids to work.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Multi-Colum Forms </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <body> <style> form{ margin: 20px; } </style> <form class="pure-form pure-form-stacked"> <fieldset> <legend>Legend</legend> <div class="pure-g"> <div class="pure-u-1 pure-u-md-1-3"> <label for="first-name">First Name</label> <input id="first-name" class="pure-u-23-24" type="text"> </div> <div class="pure-u-1 pure-u-md-1-3"> <label for="last-name">Last Name</label> <input id="last-name" class="pure-u-23-24" type="text"> </div> <div class="pure-u-1 pure-u-md-1-3"> <label for="email">E-Mail</label> <input id="email" class="pure-u-23-24" type="email" required> </div> <div class="pure-u-1 pure-u-md-1-3"> <label for="city">City</label> <input id="city" class="pure-u-23-24" type="text"> </div> <div class="pure-u-1 pure-u-md-1-3"> <label for="state">State</label> <select id="state" class="pure-input-1-2"> <option>AL</option> <option>CA</option> <option>IL</option> </select> </div> </div> <label for="terms" class="pure-checkbox"> <input id="terms" type="checkbox"> I've read the terms and conditions </label> <button type="submit" class="pure-button pure-button-primary">Submit</button> </fieldset> </form> </body> </html>

Output

Pure.CSS Multi-Colum Forms
Legend

In the next tutorials we will talk about the styling of input elements of the form. Click on the next button.









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.