Pure.CSS Form

by Online Tutorials Library July 14, 2022

Pure.CSS Forms

Pure.CSS provides a very beautiful and responsive CSS for form designing. You have to add a class name “pure-form” to <form> element for creating a form.

Following is a list of CSS classes which can be used to create a form with Pure.

Index	Class Name	Description
1)	pure-form	It is used to specify a compact inline form.
2)	pure-form-stacked	It is used to represent a stacked form with input elements below the labels. it is used with pure-form.
3)	pure-form-aligned	it is used to represent an aligned form with input elements below the labels. to be used with pure-form.
4)	pure-input-rounded	It is used to display a form control with rounded corners
5)	pure-button	It is used to beautify a button.
6)	pure-checkbox	It is used to beautify a checkbox.
7)	pure-radio	It is used to beautify a radio.

Example

Let’s take an example to create a form by using the above all classes.

 <html>    <head> <title>The PURE.CSS Forms</title> <meta name = “viewport” content = “width = device-width, initial-scale = 1″> <link rel=”stylesheet”  href=”https://unpkg.com/purecss@1.0.0/build/pure-min.css”  integrity=”sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w”  crossorigin=”anonymous”>        </head>     <body>       <form class = “pure-form pure-form-aligned”>          <fieldset>             <div class = “pure-control-group”>                      <label for = “name”>Username</label>                <input id = “name” type = “text” placeholder = “Username” required>             </div>              <div class = “pure-control-group”>                <label for = “email”>Email</label>                <input id = “email” type = “text” placeholder = “Email Address” required>                    </div>              <div class = “pure-control-group”>                   <label for = “comments”>Comments</label>                <input id = “comments” type=”text” placeholder = “Comments”>                    </div>              <div class = “pure-controls”>                <label  for = “married” class = “pure-checkbox”>                   <input id = “married” type = “checkbox” checked = “checked”>                   Married                </label>                <br>                    <label  for = “single” class = “pure-checkbox”>                   <input id = “single” type = “checkbox”>                   Single                </label>                <br>                    <label for = “dontknow” class = “pure-checkbox”>                   <input id = “dontknow” type = “checkbox” disabled>                   Don’t know (Disabled)                </label>                               <br>                <br>             </div>              <div class = “pure-controls”>                <label for = “male” class = “pure-radio”>                   <input id = “male” type = “radio” name = “gender” value = “male” checked>                   Male                </label>                <br>                    <label for = “female” class= “pure-radio”>                   <input id = “female” type = “radio” name = “gender” value = “female”>                   Female                </label>                <br>                    <label for = “dontknow1” class = “pure-radio”>                   <input id = “dontknow1” type = “radio” name = “gender” value = “female” disabled>                   Don’t know (Disabled)                </label>                <button type = “submit” class = “pure-button pure-button-primary”>Submit</button>                 </div>          </fieldset>       </form>           </body> </html> 

Test it Now

Output:

PureCSS Forms 1

Types Of Pure.CSS Forms

Following is different types of Pure.CSS forms:

Default Form
Stacked Form
Aligned Form
Multi-Column Form
Grouped Inputs
Input Sizing Form

Next TopicPure.CSS Default Form

Pure.CSS Form

Pure.CSS Forms

Types Of Pure.CSS Forms

Affinity Photo Vs. Photoshop

Basic Python for Java Developers

You may also like