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:
HTML
<!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:
HTML
<!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:
HTML
<!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:
HTML
<!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:
Please Login to comment...