HTML5 Form with CSS3 Markup

Look Inside

Recently I noticed that my friends are keep discussing about HTML5 Form. It seems like HTML5 Form has become a popular topic among web developers and web designers. HTML5 has introduced several new input types, new form attributes and other awesome form features. Native browser-side form validation, one of the well known feature of HTML5 form. However, there are still many awesome form features out there.

In this demo, I’ve created a simple HTML5 form with using different old and new input types and style it using CSS3. You can check out the outcome at demo above.

The HTML Markup

The HTML markup for HTML5 Form is pretty straight forward and same as usual. But with HTML5, you have several new options for input types such as email, url, range, and etc. Since this is HTML5 Form demo, so I will try to use as many new HTML5 input types as possible.

Below is the list of input types that are going to be used in creating the HTML5 form.

<input type="text" />
<input type="password" />
<input type="email" />
<input type="url" />
<input type="number" />
<input type="range" />
<textarea></textarea>
<input type="checkbox" />
<input type="submit" />

Now, we will make use of these input types and convert it to registration form with binding a label to each input type.

<form>
	<fieldset id="account"><legend>Account Details</legend>
		<label for="username">Username:</label>
		<input id="username" type="text" name="username" />

		<label for="password1">Password:</label>
		<input id="password1" type="password" name="password1" />

		<label for="password2">Re-type Password:</label>
		<input id="password2" type="password" name="password2" />

		<label for="email">Email:</label>
		<input id="email" type="email" name="email" />
	</fieldset>
	<fieldset id="personal">
		<legend>Personal Details</legend>

		<label for="website">Website:</label>
 		<input id="website" type="url" name="website" />

		<label for="age">Age:</label>
 		<input id="age" type="number" name="age" />

 		<label for="salary">Monthly Salary:</label>
 		<input id="salary" type="range" name="salary" />

 		<label for="description">Description:</label>
 		<textarea id="description" name="description"></textarea>
	</fieldset>

	<fieldset id="confirm">
		<input id="tnc" type="checkbox" name="tnc" />
 		<label for="tnc">I agree to the Terms and Conditions and Privacy Policy.</label>
 		<input type="submit" value="Submit" />
	</fieldset>
</form>

As you can see, I have categorized the form fields into three groups, which are ‘Account Details’, ‘Personal Detail’ and ‘Confirm’ using HTML5 element <fieldset> and <legend> to make it looks more tidy.

The HTML5 Form Validation

Now here come the exciting part, we will enhance this form by adding some HTML5 browser-side validation attributes such as require and pattern. These attributes will provide an automatic validation mechanism for an input field without using JavaScript. Required attribute will make sure the input field is not empty before the form is submitted and pattern attribute will validate the input format to match specified regex. Another cool attribute by HTML5 is placeholder attribute. With placeholder attribute, you can specify a short hint that describes the expected value of the input field. Below is the HTML markup after the enhancement.

<form>
	<fieldset id="account">
		<legend>Account Details</legend>

		<label for="username">Username:</label>
 		<input id="username" class="textbox" type="text" name="username" />

 		<label for="password1">Password:</label>
 		<input id="password1" class="textbox" type="password" name="password1" />

 		<label for="password2">Re-type Password:</label>
 		<input id="password2" class="textbox" type="password" name="password2" />

 		<label for="email">Email:</label>
 		<input id="email" class="textbox" type="email" name="email" />
	</fieldset>

	<fieldset id="personal">
		<legend>Personal Details</legend>

		<label for="website">Website:</label>
 		<input id="website" class="textbox" type="url" name="website" />

 		<label for="age">Age:</label>
 		<input id="age" class="textbox" type="number" name="age" />

 		<label for="salary">Monthly Salary:</label>
 		<input id="salary" class="textbox" type="range" name="salary" value="10000" />

 		<label for="description">Description:</label>
 		<textarea id="description" name="description" rows="5" cols="30"></textarea>
	</fieldset>

	<fieldset id="confirm">
		<input id="tnc" type="checkbox" name="tnc" />
 		<label for="tnc">I agree to the Terms and Conditions and Privacy Policy.</label>
 		<input type="submit" value="Submit" />
	</fieldset>
</form>

To have more complicated validation such as password matching validation, we need some help from JavaScript.

<label for="password1">Password:</label>
<input id="password1" class="textbox" type="password" name="password1" />

<label for="password2">Re-type Password:</label>
<input id="password2" class="textbox" type="password" name="password2" />

<script type="text/javascript">
function checkPasswords() {
	var password1 = document.getElementById('password1');
	var password2 = document.getElementById('password2');

	if (password1.value != password2.value) {
		password2.setCustomValidity('Passwords not match');
	} else {
		password2.setCustomValidity('');
	}
}
</script>

By the way, to make the slider field looks perfect, we will display the current value of the slider. Hence, we have to use JavaScript one more time to achieve this.

<label for="salary">Monthly Salary:</label>
<input id="salary" class="textbox" type="range" name="salary" value="10000" onchange="showValue(this.value)" />
<span id="rangevalue">10000</span>

<script type="text/javascript">
	function showValue(value) {
		document.getElementById("rangevalue").innerHTML=value;
	}
</script>

The CSS3 Styling

Now is time to style the form. We will use CSS3 transitions and transformations to style this HTML5 form. If your browser do not support CSS3, then you’re miss out on a chance to see the magic of CSS3.

label, input, textarea, fieldset {
	display:block;
}
fieldset#account, fieldset#personal {
	width:250px;
	padding:0 50px 50px;
	margin:10px;
	float:left;
	background:rgb(244,244,244);
	background:rgba(244,244,244,0.7);
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
    	border-radius: 25px;
	border:3px double #999;
}
fieldset#confirm {
	padding-top:10px;
	clear:both;
	border:none;
	line-height:15px;
	margin:10px 0;
}
fieldset#confirm label, fieldset#confirm input {
	display:inline;
	float:left;
	margin:15px 5px 0;
}
legend{
	font-size:20px;
	font-weight:bold;
	letter-spacing:5px;
	color:#999;
	margin-left:-20px;
	text-align:left;
	padding:0 10px;
	text-shadow:1px 1px 0 #ccc;
}
label {
	font-size:17px;
	font-weight:bold;
	margin:17px 0 7px;
	text-align:left;
	text-shadow:1px 1px 0 #fff;
}
input.textbox, textarea {
	padding:5px 10px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border:1px solid #fff;
	width:200px;
	text-shadow:1px 1px 1px #777;
	-moz-box-shadow: 0px 2px 0px #999;
	-webkit-box-shadow: 0px 2px 0px #999;
	box-shadow: 0px 2px 0px #999;

	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;

	background:#F0F0EF; /* fallback */
	background:-webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
	background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:-ms-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:-o-linear-gradient(top, #E3E3E3, #FFFFFF);
}
textarea {
	resize:both;
	max-width:230px;
}
input.textbox:focus, textarea:focus {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	transform: scale(1.1);
	-moz-box-shadow: 5px 3px 1px #ccc;
	-webkit-box-shadow: 5px 3px 1px #ccc;
	box-shadow: 7px 7px 2px #ccc;
	text-shadow:1px 1px 3px #777;
}
input[type=submit] {
	padding:10px;
	margin:0 10px !important;
	width:300px;
}
#rangevalue {
	display:block;
	text-align:right;
	margin-top:-25px;
}

/* style placeholder */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: #aaa;
	font-style:italic;
	text-shadow:1px 1px 0 #fff;
}
input:-moz-placeholder, textarea:-moz-placeholder {
	color: #aaa;
	font-style:italic;
	text-shadow:1px 1px 0 #fff;
}

For your information, you can differentiates require input fields and optional input fields as well as invalid input fields and valid input field by using new CSS pseudo-classes – :required, :optional, :valid, :invalid.

input:required {
	background:url(required.png) no-repeat 200px 5px #F0F0EF; /* fallback */
	background:url(required.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
	background:url(required.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:url(required.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:url(required.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:url(required.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF);
}
input:valid {
	background:url(valid.png) no-repeat 200px 5px #F0F0EF; /* fallback */
	background:url(valid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
	background:url(valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:url(valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:url(valid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:url(valid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF);
}
input:focus:invalid {
	background:url(invalid.png) no-repeat 200px 5px #F0F0EF; /* fallback */
	background:url(invalid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
	background:url(invalid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:url(invalid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:url(invalid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF);
	background:url(invalid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF);
}

Final Modification

As we all know, not all browsers support HTML5 form validation, some partly and some totally not. Hereby, we have to do some adjustments regarding this. In this case, I will only simply showing a message for different browsers.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	if($.browser.msie) {
		$('#lbl').text('Oops! Look like your browser doesn\'t support HTML5 Form. Try Using Chrome or Safari.');
	}
	else if($.browser.mozilla) {
		$('#lbl').text('Oops! Your browser is not fully support HTML5 Form. Try Using Chrome or Safari.');
	}
	else{
		$('#lbl').text('Yeah... Your browser support HTML5 Form!');
	}
});
</script>

This HTML5 form is not working in Internet Explorer. However, Firefox is support HTML5 form validation but not support new HTML5 input types like number and range. By the way, this HTML5 form will works fine in Chrome and Safari. Therefore, you are advised to view this HTML5 Form using Chrome or Safari to have better results.

View Demo Download Source!