Creating User Friendly Web Form with HTML5

, , Leave a comment

You probably designed a complicated user interface and you know that the basic HTML is limited. You may stuck using text fields, select menus, radio buttons, checkboxes, and so on. In this tutorial I will show you how to build a user friendly web form using some new  form types and we’ll also implement auto focusing and placeholder text in HTML5.

Modern Browsers can use these new fields to display better controls to the user without the need for JavaScript. Mobile devices and virtual keyboards for tablets and touch screens can use the field types to display different keyboard layouts. For example, the iPhone’s Mobile Safari browser displays alternate keyboard layouts when the user is entering data into the URL and email types, making special characters like @ , . , : , and / easily accessible.

Not like traditional doctype the HTML5 doctype is very simple and easy to remember


{code}<!DOCTYPE html>{/code}
Place that at the top of the document, and you’re using HTML5. Of course, you can’t use any of the new HTML5 elements that your target browsers don’t yet support, but your document will validate as HTML5.

Final Output


{code}<form id=”create_account” action=”/signup” method=”post”>

<fieldset id=”signup”>

<legend>Create New Account</legend>



<label for=”first_name”>First Name</label>

<input id=”first_name” type=”text”


name=”first_name” placeholder=”‘John'” >



<label for=”last_name”>Last Name</label>

<input id=”last_name” type=”text”

name=”last_name” placeholder=”‘Smith'” >



<label for=”email”>Email</label>

<input id=”email” type=”email”

name=”email” placeholder=”Email address” >



<label for=”url”>Website</label>

<input id=”url” type=”url”

name=”url” placeholder=””>



<label for=”password”>Password</label>

<input id=”password” type=”password” name=”password” value=””

autocomplete=”off” placeholder=”8-10 characters” />



<label for=”password_confirmation”>Password Confirmation</label>

<input id=”password_confirmation” type=”password”

name=”password_confirmation” value=””

autocomplete=”off” placeholder=”Type your password again” />


<li><input type=”submit” value=”Sign Up”></li>



We are making this form with labels.This is essential when creating accessible forms. The ‘for’ attribute of the label references the id of its associated form element. This helps screen readers identify fields on a page. I used <ul> to reduce the complex tables or div structures.


The fieldset element defines a form control group. By grouping related form controls, you can divide a form into smaller, more manageable parts, improving the usability disaster that can strike when confronting users with too many form controls.



The HTML5 specification says that the email input type is designed to hold either a single email address or an email address list, so that’s the perfect candidate for our email field.

{code}<label for=”email”>Email contact</label>

<input type=”email” name=”email” id=”email”>{/code}
Mobile devices get the most benefit from this type of form field, because the virtual keyboard layouts change to make entering email addresses easier.


There’s a field type designed to handle URLs too. This one is especially nice if your visitor uses an iPhone, because it displays a different keyboard layout, displaying helper buttons for quickly entering web addresses, similar to the keyboard displayed when entering a URL into Mobile Safari’s address bar. 
{code}<label for=”url”>Website</label>

<input type=”url” name=”url” id=”url”>{/code}


You can really speed up data entry if you place the user’s cursor in the first field on the form when they load the page. Now HTML5 provides this capability as part of the language.
you can  add the autofocus attribute to any form field. I have added this in my firstname text field.
{code}<label for=”first_name”>First Name</label>

<input id=”first_name” type=”text”  name=”first_name”  autofocus=”true” >{/code}


Placeholder text provides users with instructions on how they should fill in the fields.
To add placeholder text, you just add the placeholder attribute to each input field. Link this:
{code}<input id=”first_name” type=”text”  name=”first_name” placeholder=”‘John'” >{/code} 


Preventing Autocompletion

HTML5 introduces an autocomplete attribute that tells web browsers that they should not attempt to automatically fill in data for the field. Some browsers remember data that users have previously typed in, and in some cases, we want to tell the browsers that we’d rather not let users do that. We have added the attribute to the password fields on this form.
{code}<label for=”password”>Password</label>

<input id=”password” type=”password” name=”password” value=”” autocomplete=”off” />{/code}



font-family:Verdana, Geneva, sans-serif;





width: 216px;


fieldset ul{

list-style: none;




fieldset ul li{

margin:0 0 9px 0;



/* Make inputs go to their own line */

fieldset input{


Now only Safari, Opera, and Chrome will have helpful text inside the form fields. Firefox and Internet Explorer will not support the placeholder.

Share this: