Pure CSS Forms

Pure CSS Forms

HTML form elements are used to take information from the user. Using Pure CSS ,we can create different types of pure css forms such as:

  • Default Form
  • Stacked Form
  • Aligned Form

Default Form

To create default form inline form, simply add .pure-form class to the <form> element base class.

General Syntax

Try it now

Source Code

Try it now

If you run the above source code then the output look like:

A compact inline form

Stacked Form

To create stacked form, just assign .pure-form-stacked class to the <form> element base class having class .pure-form.

General Syntax

Try it now

Source Code

Try it now

If you run the above source code then the output look like:

A Stacked Form This is a required field.

Aligned Form

To create an aligned form ,you have to add .pure-form-aligned & .pure-form to the <form> element base class.

General Syntax

Try it now

Source Code

Try it now

If you run the above source code then the output look like: