How to Create a Simple Form with CSS - ambistech

A form is a document that is used to input or retrieve data from the user.

In the traditional method, the forms that we often encounter are usually in paper form, where every time we want to retrieve data from our users we have to meet in person.

However, in today's modern era, we can do various kinds of needs online, as well as create forms.

The chapter on creating this form is actually in HTML. 

However, in this CSS we will design the appearance of a form to make it look more attractive. 

Let's get to the tutorial.

First, we will create a basic form view that is often used.

Consider the following program.

		 	
    <style>
    	.container{
          width: 87%;
          padding: 4%;
          border: 1px solid black;
          border-radius: 7px;
          background-color: #e6e6e6;
        }
        input[type=text],[type=email],[type=password]{
          width: 100%;
          padding: 2%;
          border-radius: 5px;
        }
        h1{
          text-align: center;
          padding: 10px 0 15px;
        }
    </style>
    
    <div class="container">
      <h1>Form</h1>
      <form>
        <label for="fname">Firstname</label>
        <input type="text" name="firstname" id="fname"/>
    
        <label for="lname">Lastname</label>
        <input type="text" name="lastname" id="lname"/>
    
        <label for="gmail">Email</label>
        <input type="email" name="email" id="gmail"/>
    
        <label for="pwd">Password</label>
        <input type="password" name="Passwd" id="pwd"/>
    
        <label>Gender</label>
        <div>
          <input type="radio" id="male"/>
          <label for="male">Male</label>
          <input type="radio" id="female"/>
          <label for="female">Female</label>
        </div>
    
        <button type="submit">Submit</button>
      </form>
    </div>
  

Display the following results

Form

Firstname


Lastname


Email


Password


Gender

  Male
  Female

Styling Input Fields

1. Padded input

The padding property is used to provide space between the input text and the border of the field.

		 	
  <style>
    	.container{
          width: 87%;
          padding: 4%;
          border: 1px solid black;
          border-radius: 7px;
          background-color: #e6e6e6;
        }
    </style>
    
    <div class="container">
      <form>
        <input type="text" name="uname" placeholder="Username" style="padding:15px; margin-bottom:15px;"/>
        <input type="email" name="email" placeholder="Email" style="padding:10px; margin-bottom:15px;"/>
        <input type="password" name="pwd" placeholder="Password" style="padding:5px;"/>
      </form>
    </div>
  

Display the following results.

2. Bordered Input

The border is used to style the display on the edge of the input field.

		 	
  <style>
    	.container{
          width: 87%;
          padding: 4%;
          border: 1px solid black;
          border-radius: 7px;
          background-color: #e6e6e6;
        }
        input{
          padding: 15px;
        }
    </style>
    
    <div class="container">
      <form>
        <input type="text" name="uname" placeholder="Username" style="margin-bottom:15px; border:2px solid blue;"/>
        <input type="email" name="email" placeholder="Email" style="margin-bottom:15px; border-bottom:2px solid green;"/>
        <input type="password" name="pwd" placeholder="Password" style="border-left:2px solid red;"/>
      </form>
    </div>
  

3. Colored Input

Here, we can provide a background color for the input field.

		 	
  <style>
    	.container{
          width: 87%;
          padding: 4%;
          border: 1px solid black;
          border-radius: 7px;
          background-color: #e6e6e6;
        }
        input{
          padding: 15px;
        }
    </style>
    
    <div class="container">
      <form>
        <input type="text" name="uname" placeholder="Username" style="margin-bottom:15px; background-color:lightgreen;"/>
        <input type="email" name="email" placeholder="Email" style="margin-bottom:15px; background-color:lightblue;"/>
        <input type="password" name="pwd" placeholder="Password" style="background-color:lightgrey;"/>
      </form>
    </div>
  

4. Focused Input

On this property, we can create an input style when we are writing something in that field.

		 	
  <style>
    	.container{
          width: 87%;
          padding: 4%;
          border: 1px solid black;
          border-radius: 7px;
          background-color: #e6e6e6;
        }
        input{
          padding: 15px;
        }
        #f1:focus{
          background-color: lightgreen;
        }
        #f2:focus{
          border: 2px solid black;
        }
        #f3:focus{
          box-shadow: 0 0 7px grey;
        }
    </style>
    
    <div class="container">
      <form>
        <input id="f1" type="text" name="uname" placeholder="Username" style="margin-bottom:15px; background-color:lightgreen;"/>
        <input id="f2" type="email" name="email" placeholder="Email" style="margin-bottom:15px; background-color:lightblue;"/>
        <input id="f3" type="password" name="pwd" placeholder="Password"/>
      </form>
    </div>
  

Write something on this form.