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.
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.
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.
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.