1. Introduction
When designing a website, one of the key points to consider is how the user is going to interact with it. A good website UI makes it easy for the end user to navigate your website and send information back to you, while maintaining a beautiful visual experience at the same time. CSS plays an important role in website UI design.
The HTML form is a vital interface between the user and your website in collecting user information. While it is easy to create a generic form in simple HTML, it looks really plain and boring if not styled. Luckily, the look and feel of each visual element of the form, can be modified to suit your preference or according to the overall theme of the website.
Let’s look into the details of styling the input fields of an HTML form, specifically, the submit field.
2. Types of form input fields
Before we go into how we can style them, let’s take a quick look at the list of all available standard HTML form input fields. Note that these can be set by using the type attribute of the input tag:
textpasswordradiocheckboxbuttonresetsubmit
HTML5 introduced the following additional input types:
colordatedatetime-localemailmonthnumberrangesearchteltimeurlweek
Now that we know what input fields are available to us, let’s look at how we can apply styles on them.
3. Style a form input field using CSS
As the name suggests, the CSS input selector can be used to define the style for your form input fields. Let’s start by creating a simple form. Create an HTML file and name it form.html. Copy and paste the below contents into it:
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Input Type Submit Example</title>
</head>
<body>
<form name="form_user_details">
Full name:<br />
<input type="text" name="user_name" /><br /><br />
Email:<br />
<input type="email" name="user_email" /><br /><br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Notice that there is no stylesheet associated with the HTML page yet. Save the file and open it in your web browser. Here’s how it should be looking like:
Let’s go ahead and create a new stylesheet. Create a new file, name it style.css and place it in the same directory as form.html. Paste the below code into it:
style.css
input {
height: 30px;
width: 100px;
}
Now, let’s attach the stylesheet to the HTML page we created earlier. Open form.html and paste the below line of code, just after the closing </title> tag. The full code in your form.html file should look like below. Notice the newly added stylesheet line:
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Input Type Submit Example</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<form name="form_user_details">
Full name:<br />
<input type="text" name="user_name" /><br /><br />
Email:<br />
<input type="email" name="user_email" /><br /><br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
In the above example, we specified the height and width properties within the stylesheet. However, what we didn’t specify is which input field should be modified with the given values. Hence, in this case, the height and width of all form input fields will be modified.
Here is how our page should look like in a web browser now, with the modified styles:
But what if we want to style only a specific field? Let’s see how, with an example of styling the submit field.
4. Style the submit input field
Recall that the submit field is a sub type of the form input field. To be specific, it is an attribute of the form input tag itself. Hence, to style the same, we need to make use of attribute selectors in Cascading Style-Sheets.
Open the stylesheet file style.css, which we had previously created, and append the below highlighted code to modify the style for the submit field. Your stylesheet should look like this:
style.css
input {
height: 30px;
width: 100px;
}
input[type=submit] {
background-color: #006699;
text-decoration: none;
}
Save the file and open/reload the previously created form.html in your web browser. Use Ctrl+F5, to clear the browser cache and reload the page, in case the modified styles don’t reflect on the page. It should now look something like this:
As you can see, the submit field text is barely visible. This can be easily fixed by modifying the text color with the color property. Here’s the modified code:
style.css
input {
height: 30px;
width: 100px;
}
input[type=submit] {
background-color: #006699;
color: #FFFFFF;
text-decoration: none;
}
Save the style.css file and open/reload form.html again in your web browser. Here’s what the submit field should be looking like now:
We have managed to transform our plain and boring submit field into a more visually appealing version. Remember that you can play around with the CSS properties and adapt the style to suit your preferences as much as you want!
5. Download the Source Code
This was an example on styling the submit field of an HTML form.
You can download the full source code of this example here: CSSInputTypeSubmitExample.zip
wouldve been nice to use some of the “new” html5 types to see what they can do