Pure CSS Forms

Forms are essential in websites to collect data or information for various purposes. Using Pure CSS we can create different types of forms.

Pure CSS Forms Classes:

• Default Form
• Stacked Form
• Aligned Form
• Grouped Inputs

Default Form: Add the class "pure-form" to any <form> element to create a default form. This form will be inline in nature.

Syntax:

<form class="pure-form">...</form>

Example:

Output:

👁 Image

Stacked Form: Add the class "pure-form-stacked " alongside pure-form inside <form> element, to create a stacked form with input elements below the labels.

Syntax:

<form class="pure-form-stacked">...</form>

Example:

Output:

👁 Image

Aligned Form: Add the class "pure-form-aligned" alongside pure-form inside <form> element , to create a aligned form. In this type of forms the labels are right-aligned against the form input controls, but on small screen revert to a stacked form.

Syntax:

<form class="pure-form-aligned">...</form>

Example:

Output:

👁 Image

Grouped Input Form: If you want to create a sign-up form for mobile devices , this form is the best choice. Wrap set of text-based input elements in a <fieldset> element with a "pure-group" class name to create such form. It requires that pure responsive grid to be present on your page.

Syntax:

<fieldset class="pure-group">...</fieldset>

Example:

Output:

👁 Image