Since last few years CSS (cascading style sheets) has transformed the way the websites are designed. It helps to raise the level of your project in good and attractive ways. In this article we will see a few different ways to create beautiful forms using CSS . Beautiful forms without using tables. In this example we will see how to create html forms using a clean CSS code with only label and input tags, similar to how we used tables earlier. As per the official website of W3C :
It has been advocated many times that tables shouldn’t be used in HTML for layout purposes.
Nowadays most of the websites are designed without using the tables for the layout purpose. Even companies like Google and Mozilla insist on using proper layout elements for designing the web page. We have to use tables only for displaying the data in the tabular format. There are many other advantages for using non-table layout design.
You can use all the elements of CSS / HTML to create a custom form for your web projects. Let us try out an example below in steps:
Step 1: First to create the HTML form, we need to create a basic framework that will be our final form.
Listing 1 : HTML Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title> Styling forms with CSS - Javabeat </title>
</head>
<body>
<form>
<div class="box">
<h1> Contact Form : </h1>
<label>
<span> Full name </span>
<input type="text" class="input_text" name="name" id="name"/>
</label>
<label>
<span> Email </span>
<input type="text" class="input_text" name="email" id="email"/>
</label>
<label>
<span> Subject </span>
<input type="text" class="input_text" name="subject" id="subject"/>
</label>
<label>
<span> Post </span>
<textarea class="message" name="feedback" id="feedback"> </textarea>
<input type="button" class="button" value="send" />
</label>
</div>
</form>
</body>
</html>
With the above structure created we can see how ugly it looks without any styling. When we begin to apply the CSS effect this scenario is completely different, we will be able to structure of the form the way you want, depending on project needs.
Figure 1 : Form without styling
Step 2: Next we will apply the CSS code to our form and we will see how the end result will be of the form.
Listing 2 : CSS Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title> Styling forms with CSS - Javabeat </title>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title> Styling forms with CSS - Javabeat </title>
</head>
<style type="text/css">
* {margin: 0, padding: 0;}
body {font: 100% Normal Arial, Helvetica, sans-serif; background: # 161712;}
form, input, select, textarea {margin: 0, padding: 0, color: # ffffff;}
div.box {
margin: 0 auto;
width: 500px;
background: grey;
position: relative;
top: 50px;
border: 1px solid #262626;
}
div.box h1 {
color: #ffffff;
font-size: 18px;
text-transform: uppercase;
padding: 0 5px 5px 5px;
border-bottom: 1px solid #161712;
border-top: 1px solid #161712;
}
div.box label {
width: 100%;
display: block;
background: grey;
border-top: 1px solid #262626;
border-bottom: 1px solid #161712;
padding: 10px 0 10px 0;
}
div.box label span {
display: block;
color: #bbbbbb;
font-size: 12px;
float: left;
width: 100px;
text-align: right;
padding: 5px 20px 0 0;
}
div.box.input_text {
padding: 10px 10px;
width: 200px;
background: #262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left: 1px double #333333;
border-right: 1px double #333333;
}
div.box.message{
padding: 7px 7px;
width: 350px;
background: #262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left: 1px double #333333;
border-right: 1px double #333333;
overflow: hidden;
height: 150px;
}
div.box .button{
margin: 0 0 10px 0;
padding: 4px 7px;
background: #CC0000;
border: 0px;
position: relative;
top: 10px;
left: 382px;
width: 100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left: 1px double #FF0033;
border-right: 1px double #FF0033;
}
</style>
<body>
<form>
<div class="box">
<h1> Contact Form : </h1>
<label>
<span> Full name </span>
<input type="text" class="input_text" name="name" id="name"/>
</label>
<label>
<span> Email </span>
<input type="text" class="input_text" name="email" id="email"/>
</label>
<label>
<span> Subject </span>
<input type="text" class="input_text" name="subject" id="subject"/>
</label>
<label>
<span> Post </span>
<textarea class="message" name="feedback" id="feedback"> </textarea>
<input type="button" class="button" value="send" />
</label>
</div>
</form>
</body>
</html>
Now our form is better-looking, isn’t it? Looking at Figure 2 we can see the magic that CSS can do in our projects.
Figure 2 : Final result of this example
Step 3: As shown in Listing 3 , we can change the CSS according to our need and taste. Below we see another styling and color variation of the same form.
Listing 3 : Another CSS styling
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title> Styling forms with CSS - Javabeat </title>
</head>
<style type="text/css">
* {Margin: 0, padding: 0;}
body {font: 100% Normal Arial, Helvetica, sans-serif; background: # ccc;}
form, input, select, textarea {margin: 0, padding: 0, color: # ffffff;}
div.box{
margin: 0 auto;
width: 500px;
background: #176ca6;
position: relative;
top: 50px;
border: 1px solid #262626;
}
div.box h1 {
color: #ffffff;
font-size: 18px;
text-transform: uppercase;
padding: 0 5px 5px 5px;
border-bottom: 1px solid #161712;
border-top: 1px solid #161712;
}
div.box label {
width: 100%;
display: block;
background: #176ca6;
border-top: 1px solid #262626;
border-bottom: 1px solid #161712;
padding: 10px 0 10px 0;
}
div.box label span {
display: block;
color: #bbbbbb;
font-size: 12px;
float: left;
width: 100px;
text-align: right;
padding: 5px 20px 0 0;
}
div.box.input_text {
padding: 10px 10px;
width: 200px;
background: #262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left: 1px double #333333;
border-right: 1px double #333333;
}
div.box.message{
padding: 7px 7px;
width: 350px;
background: #262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left: 1px double #333333;
border-right: 1px double #333333;
overflow: hidden;
height: 150px;
}
div.box.button{
margin: 0 0 10px 0;
padding: 4px 7px;
background: #660000;
border: 0px;
position: relative;
top: 10px;
left: 382px;
width: 100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left: 1px double #FF0033;
border-right: 1px double #FF0033;
}
</style>
<body>
<form>
<div class="box">
<h1> Contact Form : </h1>
<label>
<span> Full name </span>
<input type="text" class="input_text" name="name" id="name"/>
</label>
<label>
<span> Email </span>
<input type="text" class="input_text" name="email" id="email"/>
</label>
<label>
<span> Subject </span>
<input type="text" class="input_text" name="subject" id="subject"/>
</label>
<label>
<span> Post </span>
<textarea class="message" name="feedback" id="feedback"> </textarea>
<input type="button" class="button" value="send" />
</label>
</div>
</form>
</body>
</html>
Now our form is displayed as shown in Figure 3 , with different colors and a lighter background.
Figure 3 : Different styling form
Summary
As we have seen in this article, you can create an infinite variety of colors and style forms with CSS, you can test variations according to the needs of your project. Hope you liked the article.
Spring MVC Example