CSS FORM

rainbow baker

 CSS FORMS

      Forms are essential in websites tocollect data or information for various purposes. Using Pure CSS we can create different types of forms.
 
 CSS FORMS TYPES:
  •   Default Form
  •   Stacked Form
  •   Aligned Form
  •  Grouped Input            
   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>

         
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>

ALIGNED FORM:

                  Add the class “pure-form-aligned” alongside pure-form inside <form> element , to create a aligned form.
 SYNTAX:
<form class="pure-form-aligned">...</form>
GROUPED INPUT:
  If you want to create a sign-up form for mobile devices.
SYNTAX 

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

EXAMPLE

<!DOCTYPE html>
<html>
<style>
input[type=text], select
{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=submit]
{
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=submit]:hover
{
  background-color: #45a049;
}
div
{
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>
<h3>Using CSS to style an HTML Form</h3>
<div>
  <form action="/action_page.php">
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
  <input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
    <select id="country" name="country">
      <option
value="australia">Australia</option>
  <option value="canada">Canada</option>
  <option value="usa">USA</option>
  </select>
 <input type="submit" value="Submit">
 </form>
</div>
</body>
</html>

OUTPUT


Tags
Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send