CSS Forms

Basically, forms are a very essential part of any website. It is a way to take the user's information and process requests. The forms offer controls for almost every use of an application. With the help of form controls and form fields, we can request a small as well as a large amount of information such as user ID and password, billing information, job application, etc.

Basic Structure of Forms in CSS

To take information through the form but first, we will have to learn how to create it. The syntax is given below

To add a form to a webpage, we have to add the <form> element. All the input fields and form controls should be wrapped in an <form> element. There are lots of attributes available for the form element but the most used or important ones are action and method.

Syntax of Forms in CSS

<form action="url" method="post">

/* form inputs*/

</form>

Text fields and Text areas in CSS Forms

The text areas and text fields are used to collect the text input from the users. This input information can be text, password, contact number, etc.

Text fields in CSS

The text fields are used to collect information from the user. This can be created by using the <input> element and its type attribute that describes which type of information we want to be entered by the user. We can also set the name of the input element with the help of the name attribute

Syntax of Text fields in CSS

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

Text Area in CSS

The text area is used to take text-based information only. The text area field can be created by using the <textarea> element. This element can not accept the type attribute because it accepts only one type of value but it accepts the name attribute which means that the user can name the text field.

Syntax of Text Area in CSS

<textarea name="comment">Add your text here.</textarea>

Note: The <input> element and <textarea> does not perform the same tasks. The <input> field is used to obtain multiple types of text such as email, phone nu but not more than a line. While the <textarea> element is used to take long text-based information such as descriptions, paragraphs, etc.

Other Inputs and Menus in CSS Forms

Apart from the text-based fields, HTML also offers other input fields and menus such as multiple-choice and dropdowns. There are some most used input and menu elements are given below:

Radio Buttons in CSS Forms

Radio buttons are used when we want to give multiple choices to the user but want only one answer in response. The radio buttons are created by using the <input> element and the value of the type attribute must be radio (type="radio"). The value of the name attribute must be the same for all the radio elements within a group.

Example: Creating Radio Buttons in CSS Forms

<input type="radio" name="studytonight" value="HTML" checked>
<input type="radio" name="studytonight" value="CSS">
<input type="radio" name="studytonight" value="Bootstrap">
<input type="radio" name="studytonight" value="JavaScript">

Check Boxes in CSS Forms

The checkboxes are also used to select appropriate options among multiple options. The checkboxes are similar to the radio buttons but there is a slight difference between them, that is, the checkboxes allow the user to select multiple options among all the given options but radio buttons allow the user to choose only one option among all the options. To create the checkboxes, we have to set the value of the type attribute to the checkbox.

Example: Creating Check Boxes in CSS Forms

<input type="checkbox" name="studytonight" value="HTML" checked>
<input type="checkbox" name="studytonight" value="CSS">
<input type="checkbox" name="studytonight" value="Bootstrap">
<input type="checkbox" name="studytonight" value="JavaScript">

Drop-down lists in CSS Forms

The drop-down list is used when we want to provide a long list of choices to the user. The drop-down list is created by using the <select> and <option> element. The <select> element wraps all the menu items and each menu item is created using <option> element.

Example: Creating Drop-down lists in CSS Forms

<select name="tutorial">
  	<option>Select</option>
  	<option value="HTML" checked>HTML</option>
  	<option value="CSS">CSS</option>
  	<option value="JavaScript">JavaScript</option>
  	<option value="Bootstrap">Bootstrap</option>
</select>

Other Inputs in CSS

Hidden input in CSS Forms

The Hidden inputs allow us to pass the data to the server without letting know to the user. It is used to track codes, keys, or other information that is not relevant for the user but is useful for form processing.

To create the hidden input, we have to set the value of the type attribute to hidden and also set the appropriate values for the name and value attribute.

Syntax of Hidden input in CSS Forms

<input type="hidden" name="tracking-code" value="xyz">

File Input in CSS Forms

The file input allows the user to add attachments such as docs, pdf, images, etc along with the form.

To create a file input, we have to set the value of the type attribute of the <input> element to the file.

Syntax of File Input in CSS Forms

<input type="file" name="file">

Organizing Form Elements in CSS

Better organization of form elements increase the user understanding and also provides guidance like what is actually requested and how to provide that information. This can be done with the help of labels, fieldsets, and legends.

Label in CSS Forms

Labels are used to provide captions or headings to the form controls. The labels are created using <label> element.

Syntax of Label in CSS forms

<label for="username">Username</label>

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

Fieldset in CSS Forms

Fieldset is used to group the form controls and labels and provide a better organization of the form elements. The fieldset is a block-level element that wraps all the form elements. The <fieldset> element includes the border outline, which can be modified by applying CSS properties.

Syntax of Fieldset in CSS forms

<fieldset>
  <label for="username">Username
	<input type="text" name="username" id="username">
  </label>
  <label for="Password">password
	<input type="text" name="password" id="password">
  </label>
</fieldset>

Legend in CSS Forms

The legend is used to provide the heading to the form that provides a quick idea about the form type. The legend is created using <legend> element just after the opening <fieldset> element.

Syntax of Legend in CSS Forms

<fieldset>
		<legend>LogIn Form</legend>
		<label for="username">Username
			<input type="text" name="username">
		</label>
		<label for="password">Password
			<input type="text" name="password">
		</label>
	</fieldset>

Example: Creating login form in CSS

Here is the basic login form with CSS styling properties is given below:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<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: orange;
		  color: white;
		  padding: 14px 20px;
		  margin: 8px 0;
		  border: none;
		  border-radius: 4px;
		  cursor: pointer;
		}

		input[type=submit]:hover {
		  background-color: #f2db05;
		  color: black;
		}

		div {
		  border-radius: 5px;
		  background-color: #f2f2f2;
		  padding: 20px;
		}
	</style>
	</head>
<body>
<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="Tutorial">Tutorials</label>
    <select id="Tutorials" name="Tutorials">
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Output:

Styling Input Fields in CSS Forms

CSS allows us to style the input fields on their own by applying some CSS properties such as giving background color and adjusting the height and width of the input fields, providing padding and margins, etc.

Example: Styling input field using CSS

In this example, we have set the CSS property height to 50px and width to 100%.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input {
		  width: 100%;
		  height: 50px;
		}
	</style>
</head>
<body>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

Output:

As we can see in the output image that the height of the input field extends to 50px and it takes the whole horizontal space because we have specified the width to 100%.

Padded Inputs in CSS Forms

The CSS offers the padding property to increase the space between the text entered into the input field and the input field border. We can add extra space between the multiple input fields using the CSS margin property.

Example: Padded input fields in CSS

In this example, we have set the CSS margin property to provide some extra space between the multiple input fields and the padding property to provide the space between the border of the input field and the content inside it.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=text] {
		  width: 100%;
		  padding: 10px;
		  margin-top: 20px;
		  box-sizing: border-box;
		}
	</style>
</head>
<body>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

Output:

Styling Input Borders in CSS Forms

We can style the input borders in multiple ways by applying multiple CSS properties. We can change the border color and the broadness of it according to our needs. It also allows us to change only one side of the input border or can turn the corners into rounded ones and many more.

Example: Applying CSS properties to the input borders

In this example, we have styled the borders of the input field by proving border color, border width, and border style to them using CSS shorthand property border and make the corners of the border rounded using CS border-radius property.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=text] {
		  width: 100%;
		  padding: 12px;
		  margin-top: 12px;
		  box-sizing: border-box;
		  border: 4px solid #025ea1;
		  border-radius: 10px;
		}
	</style>
</head>
<body>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

Output:

As we can see in the output image that the borders are blue in color and their corners are rounded in shape.

Creating colored inputs in CSS Forms

We can make the inputs colorful by proving the background-color to them and also change the color of the text by applying color property.

Example: Create colored input fields in CSS

In this example, we have specified the CSS property background-color to #7ab8e6. This property adds the background color in the input field.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=text] {
		  width: 100%;
		  padding: 12px 20px;
		  margin: 8px 0;
		  box-sizing: border-box;
		  border: none;
		  background-color: #7ab8e6;
		  
		}
	</style>
</head>
<body>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="William">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Shakespear">
</form>

</body>
</html>

Output:

As we can see the background color of the input field turns to blue.

Focused Inputs in CSS Forms

We can make our input fields focused by either providing background color to them or by providing border-color. So, whenever the user clicks on the input fields either its background color changes or its border color turns into a different color.

Example: Creating Focused inputs using CSS

In the given example, we created focused input fields by applying two different stylings. In the first input fields, the background color of the field turns into blue whenever the user clicks on it while in the second one, its border color turns to black and broader when the user clicks on it.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=email] {
		  width: 100%;
		  padding: 12px 20px;
		  margin: 8px 0;
		  box-sizing: border-box;
		  border: 2px solid black;
		  outline: none;
		}

		input[type=email]:focus {
		  background-color: #7ab8e6;
		}
		input[type=text] {
		  width: 100%;
		  padding: 12px 20px;
		  margin: 8px 0;
		  box-sizing: border-box;
		  border: 3px solid #ccc;
		  -webkit-transition: 0.5s;
		  transition: 0.5s;
		  outline: none;
		}

		input[type=text]:focus {
		  border: 4px solid black;
		}
	</style>
</head>
<body>
<form>
  <label for="userid">User Id</label>
  <input type="email" id="userid" name="userid" value="Enter email">
  <label for="pass">Password</label>
  <input type="text" id="pass" name="pass" value="Enter password">
</form>

</body>
</html>

Output:

Inserting image/icons into input fields in CSS Forms

We can make our inputs more stylish or attractive by putting icons/images into them. We can add icons/images by applying CSS background-image property and can set the positioning with the help of background-position property.

Example: Inserting icon in an input field using CSS

In this example, we have created a search bar and includes a search icon to it by using the background-image property.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=text] {
		  width: 100%;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 4px;
		  font-size: 16px;
		  background-color: white;
		  background-image: url('search.png');
		  background-position: 10px 10px; 
		  background-repeat: no-repeat;
		  padding: 12px 20px 12px 40px;
		}
	</style>
</head>
<body>
<form>
  <input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>

Output:

Animated Inputs in CSS Forms

CSS allows us to animate the input fields using the CSS transition property. The transition property adds multiple 3D effects on the input field which makes the form or the web page more interactive.

Example: Creating animated input fields using CSS

In the given example, we have created a search box and animate its width by using CSS transition property. So, when the user click on the search box it will acquire the full width of the screen.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=text] {
		  width: 130px;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 4px;
		  font-size: 16px;
		  background-color: white;
		  background-repeat: no-repeat;
		  padding: 12px 20px 12px 40px;
		  transition: width 0.4s ease-in-out;
		}

		input[type=text]:focus {
		  width: 100%;
		}
	</style>
</head>
<body>
<p>Animated search input:</p>
<form>
  <input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>

Output:

When we click inside the input field it will expand and takes the whole available width.

Styling Textareas and menus in CSS Forms

We can modify the text areas and the menus by using the CSS properties Such as we can resize the text areas, provide the background color to the menu items, etc.

Example: Styling textareas using CSS

In this example, we have created a dropdown using <select> and <option> element and a textarea using <textarea> element and set multiple CSS properties to provide styling to them. These properties are background-color, border-radius, border, padding etc.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		  select {
		  width: 40%;
		  padding: 16px 20px;
		  border: none;
		  border-radius: 4px;
		  background-color: #f1f1f1;
		  }
		  textarea {
		  width: 100%;
		  height: 150px;
		  margin-top: 30px;
		  padding: 12px 20px;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 4px;
		  background-color: #f8f8f8;
		  font-size: 16px;
		  resize: none;
		}
	</style>
</head>
<body>
<form>
  <select id="tutorial" name="tutorial">
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
  <option value="JavaScript">JavaScript</option>
  </select>
</form>
<form>
  <textarea>Enter some text...</textarea>
</form>

</body>
</html>

Output:

Styling Input Buttons in CSS Forms

We can style input buttons by changing their height, width, color, etc, by applying the CSS properties.

Example: Styling the input buttons using CSS

In the given example, we have created two buttons using the <button> element along with the type="button" attribute. We set multiple CSS properties for each button such as background-color to provide the color in the background, margin, padding, etc.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=button] {
		  background-color: #1994e6;
		  border: none;
		  color: white;
		  padding: 16px 32px;
		  text-decoration: none;
		  margin: 4px 2px;
		  cursor: pointer;
		}
		input[type=submit] {
		  width: 100%;
		 background-color: #0765a3;
		  border: none;
		  color: white;
		  padding: 16px 32px;
		  text-decoration: none;
		  margin: 4px 2px;
		  cursor: pointer;
		}
	</style>
</head>
<body>
<input type="button" value="Button">
<input type="submit" value="Submit">
</body>
</html>

Output:

Responsive Form in CSS

Responsive forms automatically adjust the height and width of the input fields according to the screen size. Here is the live example is given, with the help of which you can check the layout of the form at different screen sizes such as when you resize the screen size the input elements of the form adjust them according to the screen size.

Conclusion

In this lesson, we have learned about the forms and the multiple form inputs. After that we have learned how to style these inputs using CSS properties such as styling input borders, specifying background color for the input field, provide animations using transition , etc.