CSS Forms

A form is an interactive HTML element that collects user inputs on a webpage. For example,

Create a Form

A form is created using the <form> element, and user input is collected using <input> element. For example

Example

<form>
  <input type="text" name="name" placeholder="Your name">
  <input type="password" name="password" placeholder="Your password">
  <input type="submit" value="Submit">
</form>

You can click on above box to edit the code and run again.

Output

Selecting Form Element

The form elements can be selected in the following ways:

Selecting the form element

Form elements can be selected by referring to their element names. For example,

input: selects all the input fields
textarea: selects all the text areas
label: selects all level elements

Selecting the form element attribute

Form elements can also be selected by referring to their attributes using element attribute selectors. For example,

input[type=text]: selects all input fields having type attribute set to text
input[type=password]: selects all input fields having type attribute set to password
input[type=number]: selects all input fields having type attribute set to number

Styling Input Field

The input field allows us to enter and submit the data in the form. For example,

Example

<input type="text" name="name" id="name">

Output

We can add the following styles to the input field,

Width
Padding
Margin
Border
Border radius
Box shadow
Font
Colored input
Focused input

Let's explore each of them in detail.

Adding Width to Input Field

The width property adds width to the input field. For example,

Example

input{
    width: 100%;
}

Output

Adding Padding to Input FIeld

The padding property adds space between the input field content and border. For example,

Example

input{
    width: 100%;
    padding: 12px;
}

Output

Adding Margin to Input Field

The margin property adds space around an element, creating space outside of each input field. For example,

Example

input{
    width: 100%;
    padding: 12px;
    margin: 20px 0;
}

Output

Username

Password

adds 20px of vertical margin in the input field.

Adding Border to Input Field

The border property adds a border around the input field. For example,

Example

input {
    border: 4px solid black;
}

Output

Username

Password

In the above example, the border property adds a solid black border of 4px.

Adding Border Radius to Input Field

The border-radius property adds the border radius to make the rounded input field corners. For example,

Example

input {
    border-radius: 10px;
}

Output

Username

Password

Here, the border-radius property rounds the corners of the input field with 10px border radius.

Adding Box Shadow to Input FIeld

The box-shadow property adds a shadow to the input field. For example,

Example

input:hover {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.94);
}

Output

Username

Password

The above example creates a shadow effect around the input field when it is being hovered

Colored Input

The background-color property adds background color, and the color property adds text-color to input. For example

Example

input {
    background-color: pink;
    color: white;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
}

Output

Username

Focused Input

Example

input:focus {
    background-color: #ddd;
}

Output

Username

Here, the background color changes to pink when the input is focused.

Styling Text Areas

A text area allows us to enter multiple lines of text. For example,

Example

<textarea>Start Writing...</textarea>

Output

Styling Drop Down Menus

A drop down menu provides a list of options to the user. For example,

Example

<select>
    <option>Select one</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

Output

The above example shows a default drop-down menu without any custom styles.

We can add different CSS stylings to the drop-down menu as shown below,

Example

select {
    background-color: lightgray;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
}

Output

Styling Radio Button

A radio button allows us to select only a single option from the list. For example,

Example

<label>select 1</label>
<input type="radio" id="select1" name="radioGroup" value="select1" />

<label>select 2</label>
<input type="radio" id="select2" name="radioGroup" value="select2" />

<label>select 3</label>
<input type="radio" id="select3" name="radioGroup" value="select3" />

Output

select 1 select 2 select 3

Styling Check Box

The check box allows us to select multiple options from the list. For example,

Example

<input type="checkbox" id="select1" name="checkboxGroup" value="select1" />
<label>select 1</label>

<input type="checkbox" id="select2" name="checkboxGroup" value="select2" />
<label>select 2</label>

<input type="checkbox" id="select3" name="checkboxGroup" value="select3" />
<label>select 3</label>

Output

select 1 select 2 select 3

Styling Submit Button

A submit button triggers the submission of form data. For example,

Example

<input type="submit" value="Submit">

Output

Name

The above example shows a default submit butto

Let's add some CSS stylings to the button,

Example

input[type="submit"] {
    background-color: purple;
    width: 180px;
    display: block;
    margin: 0px auto;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    font-family: "Courier New", Courier, monospace;
    color: white;
    margin-top: 30px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: indigo;
}

Output

Name

You can click on above box to edit the code and run again.