CSS Forms

CSS forms are used to process the input.

Input Attribute Selectors

• input [type=text]
• input [type=password]
• input [type=number]

How to create Form

The HTML input field used to create a form and CSS properties use to style the HTML elements, for example, apply padding, margin, color, background-color, type of input text to the input field:

Example of Form with HTML & CSS

.form_btn {
     background-color: green;
     color: white;
     border: none;
  }

Output

First_Name: 

Last_Name: 

Email_ID: 

Gender:
 Male
 Female
 Other

Example Description

• It is just a simple contact HTML Form and the input fields like the first name, last name, email ID, gender, and submit button.
• Only background-color, color, and border CSS properties applied for button input type only; BUT nothing for input HTML Form.

Form with Placeholder

The placeholder HTML attribute is used to specifies a short hint that describes the expected value of an input field; you can see the below-mentioned example for more understanding about form placeholder:

Example of Form with Placeholder

input {
     padding: 5px 10px;
     margin-bottom: 10px;
  }

.form_btn {
     color: white;
     border: none;
     border: 5px;
     margin: 10px 0;
     background-color: #b7520a;
  }

Output

Gender:
 Male |  Female |  Other

Placeholder Example Description

• Placeholder is a short description of the expected format like the upper example.
• We used placeholder only for upper three input field including first & second name, and email input field.
• When we use a placeholder that time no need to use text to describe input text fields.

Focused Inputs

The : focus is a selector; The CSS focus selector is used with the input field when it gets focus:

Example of Focused Inputs

input [type=text] :focus {
     padding: 5px 10px;
     background-color: green;
     boder: 2px solid red;
  }

Output