Essential CSS Tutorial – Forms

We have already covered the essential concepts of CSS in Part 1, 2 and 3 of this tutorial series. Based on the concepts we’ve covered so far, let’s stylize an important HTML element i.e. HTML Form and its related elements. Usage of HTML Forms becomes ubiquitous when developing web applications, therefore their proper styling is crucial for any webapp to be appealing in its looks and feel.

To get going quickly, let’s use the ‘form.html’ file from our HTML tutorial which is reproduced as below:

<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
<link rel="stylesheet" href="styles2.css">
</head>
<body>
<form action='index.html' class="form1">

<div>
<label for='first'>First Name:</label>
<input id='first' type='text' name='first'>
</div>

<div>
<label for='accept'>Accept?</label>
<input id='accept' type='checkbox' name='accept'>
</div>

<div>
<input id='England' type='radio' name='country' value='England'>
<label for='England'>England</label>
<input id='Germany' type='radio' name='country' value='Germany'>
<label for='Germany'>Germany</label>
<input id='Japan' type='radio' name='country' value='Japan'>
<label for='Japan'>Japan</label>
</div>

<div>
<label for='message'>Feedback:</label>
<textarea id='message' name='message' rows='10' cols='30'>
Type your comments here.
</textarea>
</div>

<div>
<label for='manufacturer'>Car maker:</label>
<select id='manufacturer' name='manufacturer'>
  <option value='Toyota'>Toyota</option>
  <option value='Honda'>Honda</option>
  <option value='Volkswagen'>Volkswagen</option>
</select>
</div>

<div>
<button type='submit'>Submit</button>
</div>

</form>
</body>
</html>

We’ve made couple of changes in the original ‘form.html’ i.e. added a link to external css file by inserting following line in the <head></head>:

<link rel="stylesheet" href="styles2.css">

And we also amended the <form> tag as follows in order to apply ‘.form1’ class styles to the form:

<form action='index.html' class="form1">

Save and load ‘form.html’ in the browser and have a good look at a style-less HTML form. Now create a new css file named ‘styles2.css’ in ‘csstut’ folder and insert the following code into ‘styles2.css’:

.form1 {
	font-family: Arial;
	background-color: lightgray;
	display: inline-block;
	margin: 15px;
	padding: 15px;
	border: 1px solid #404040;
	border-radius: 10px;
	box-shadow: 5px 5px 8px gray;
	overflow: hidden;
	color: #404040;
}

.form1 input, textarea, select {
	border-radius: 10px;
	padding: 5px;
	box-shadow: 0 0 2px #404040;
}

.form1 button {
	border: 1px solid #404040;
	border-radius: 10px;
	padding: 3px 15px 3px 15px;
	color: #404040;
	font-size: 15px;
	font-weight: bold;
}

.form1 button:hover {
	background-color: gray;
	box-shadow: 1px 1px 3px black;
	color: white; 
}

.form1 div {
	border: 1px dashed white;
	margin: 5px;
	padding: 5px;
	border-radius: 10px;
	display: flex;
	align-items: center;
  }

.form1 label {
	padding: 10px;
}

.form1 div:last-child {
        border: none;
        justify-content: center;
}

Save ‘styles2.css’ and reload the ‘form.html’ file in the browser – we have got a nice looking HTML form. Although we’ve utilized most of the styles which we learned throughout this CSS tutorial series, there are couple of styles and tricks to note here. We’ve applied thin box-shadow style to ‘input’, ‘textarea’ and ‘select’ within ‘.form1’ in order to mimic depth effect. Next, we’ve used ‘display: flex;’ in ‘.form1 div’ in order to employ Flexbox, a CSS layout model, and then using ‘align-items: center;’ style we aligned all children items within div in ‘center’ vertically (e.g. label ‘Feedback:’ is centered vertically). Similarly, at the end we used Flexbox’s ‘justify-content: center;’ style in order to horizontally align contents in center within last div (the ‘Submit’ button is horizontally centered). Flexbox is much more than this and deserves its own dedicated tutorial, so in next part of this CSS tutorial series we’ll get to know the essentials of Flexbox.

Leave a Comment