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:
<!DOCTYPE html> < html >
< head >
<!--Import Pure Css files-->
< link rel = "stylesheet"
href =
integrity =
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin = "anonymous" />
<!-- Let browser know website is
optimized for mobile -->
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0" />
</ head >
< body >
<!--To create Default form add
"pure-form" classname-->
< form class = "pure-form" >
< fieldset >
< legend >Default Form</ legend >
< input type = "text" placeholder = "Username" />
< input type = "password" placeholder = "Password" />
< br >< br >
< label for = "remember" >
< input id = "remember" type = "checkbox" />
Remember me
</ label >
< button type = "submit" class="pure-button
pure-button-primary">
Log in
</ button >
</ fieldset >
</ form >
</ body >
</ html >
|
Output:
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:
<!DOCTYPE html> < html >
< head >
<!--Import Pure Css files-->
< link rel = "stylesheet"
href =
integrity =
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin = "anonymous" />
<!-- Let browser know website is
optimized for mobile -->
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0" />
</ head >
< body >
<!--To create Stacked form add
"pure-form-stacked" classname-->
< form class = "pure-form pure-form-stacked" >
< fieldset >
< legend >Stacked Form</ legend >
< label for = "first-name" > First Name</ label >
< input id = "first-name" type = "text"
placeholder = "First Name" />
< label for = "last-name" > Last Name</ label >
< input id = "last-name" type = "text" placeholder = "Last Name" />
< 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" >Gender</ label >
< select id = "state" >
< option >Male</ option >
< option >Female</ option >
< option >Other</ option >
</ select >
< label for = "remember" class = "pure-checkbox" >
< input id = "remember" type = "checkbox" />
I accept the Terms & Conditions
</ label >
< button type = "submit" class = "pure-button pure-button-primary" >
Submit
</ button >
</ fieldset >
</ form >
</ body >
</ html >
|
Output:
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:
<!DOCTYPE html> < html >
< head >
<!--Import Pure Css files-->
< link rel = "stylesheet"
href =
integrity =
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin = "anonymous" />
<!-- Let browser know website is
optimized for mobile -->
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0" />
</ head >
< body >
<!--To create Aligned form add
"pure-form-aligned" classname-->
< form class = "pure-form pure-form-aligned" >
< fieldset >
< legend >Aligned Form</ legend >
< div class = "pure-control-group" >
< label for = "first-name" >
First Name
</ label >
< input id = "first-name" type = "text" placeholder = "First Name" />
</ div >
< div class = "pure-control-group" >
< label for = "last-name" >
Last Name
</ label >
< input id = "last-name" type = "text" placeholder = "Last Name" />
</ div >
< div class = "pure-control-group" >
< label for = "email" >Email</ label >
< input id = "email" type = "email" placeholder = "Email" />
< 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 = "state" >Gender</ label >
< select id = "state" >
< option >Male</ option >
< option >Female</ option >
< option >Other</ option >
</ select >
</ div >
< div class = "pure-controls" >
< label for = "remember" class = "pure-checkbox" >
< input id = "remember" type = "checkbox" />
I accept the Terms & Conditions
</ label >
< button type = "submit" class = "pure-button pure-button-primary" >
Submit
</ button >
</ div >
</ fieldset >
</ form >
</ body >
</ html >
|
Output:
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:
<!DOCTYPE html> < html >
< head >
<!--Import Pure Css files-->
< link rel = "stylesheet"
href =
integrity =
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin = "anonymous" />
<!--Import Pure Css Grid files-->
< link
rel = "stylesheet"
href =
<!-- Let browser know website is
optimized for mobile -->
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0" />
</ head >
< body >
< form class = "pure-form" >
<!--To create groups use "pure-group"
classname in <fieldset> element-->
< fieldset class = "pure-group" >
< input type = "text" class = "pure-input-1-2" placeholder = "First Name" />
< input type = "text" class = "pure-input-1-2" placeholder = "Last Name" />
< input type = "text" class = "pure-input-1-2" placeholder = "Email" />
< input type = "text" class = "pure-input-1-2" placeholder = "Password" />
</ fieldset >
< fieldset class = "pure-group" >
< input
type = "text"
class = "pure-input-1-2"
placeholder = "Current Position" />
< textarea
class = "pure-input-1-2"
placeholder = "Description of Position" >
</ textarea >
</ fieldset >
< button
type = "submit"
class="pure-button pure-input-1-2
pure-button-primary">
Submit
</ button >
</ form >
</ body >
</ html >
|
Output: