Creating an HTML5 Form Using the New Form Types

A web form is something that we all use at some stage in our online activities. As web designers and developers, we are always finding ourselves building or designing one, which at the least, would be the contact page of our website project. Unfortunately, it is not the nicest job in the world and can become quite a chore as some forms can get very complicated when you start talking about validation, error handling and styling. We either validate and catch our errors using a server side language such as PHP, or we use Javascript, or even both?

Whichever the case, web forms can take up a lot of your development time and this can be a problem. With HTML5 however, some of this pain has been taken away by the introduction of the new form types we can use. And when I say “use,” I mean you can use them right now — without any hacks or workarounds. This does not mean however, that every browser supports them – hell no! That would be way to easy. Instead, any browser that does not support these new types will just revert to ones they do support. So in this tutorial we will explore what is new, what is supported and what they can do. You can download all the code as a zip file at the bottom of the page.

What We Will Be Creating

This is how it will look like once we have finished. Obviously you can get as creative as you want here but unfortunately this is not a design tutorial, rather a tutorial on how to code a nice functional web form using the new HTML5 form types and some CSS3.

The Doctype

Having looked at our finished form, we have a good idea of how we need to set things out. Firstly, open up your favorite text editor and create a new file. Then add in the HTML5 doctype together with a link to your stylesheet. This doctype is recognized by all modern browsers but for those that don’t will only render the page in what is called standards mode.

<!DOCTYPE html>

<title>My shiny new HTML5 form</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="form.css" />


The wrappers

So that we can center our form using CSS, we need to create two wrappers divs, one called #wrapper and inside that a div called #form. Then looking at our final design we need to add in a h2 tag for our grey form header.

<div id="wrapper">

<div id="form">

<h2>My shiny new HTML5 form!</h2>

</div><!-- END form -->

</div><!-- END wrapper -->

The Form

The mark-up for our form is going to start off as a basic one, so nothing new here. But it’s considered best practice and more semantic to add in the label tags wrapped around our input names.

<form method="post" action="">

<input name="name">

<input name="email">

<textarea name="message"></textarea>

<input id="submit" name="submit" type="submit" value="Submit">


Different Input Tags

You will notice a slight difference here with our input tags. Unlike XHTML when you need a closed tag using the forward slash character ‘/>’, with HTML5 you don’t and this can take some getting used to. However, once you do you can clearly see that this is much cleaner.

In our first input tag, we have added in a new HTML5 attribute called ‘placeholder’. This handy little attribute is one of my favorites as it allows you to use what could only have been achieved using Javascript. So, whatever text the placeholder is holding, will be displayed inside your input field and will disappear and then reappear when that input field in clicked on and off – very handy indeed! Browsers that don’t support the placeholder attribute will simply ignore it.

<form method="post" action="index.php">

<input name="name" placeholder="Your name here">

<input name="email" type="email" placeholder="Your email here">

<textarea name="message" placeholder="Your comments here"></textarea>

<input id="submit" name="submit" type="submit" value="Submit">


The Email Type

The ‘email’ type is another great addition to our HTML5 form. One thing to note here is although this type is supported and has been for years, it does not really do anything worth writing about – until now of course. In some modern browsers, if you try and add in something other than an email address and try and submit the form, you get a nice little pop up telling us to sort it out! Again, this is something that could only have been achieved using a scripting language.

Email Type on Mobile Devices

Another handy feature of the type=”email” is the way the iPhone interprets it and as soon as the email field is selected, a modified keyboard will appear with a smaller spacebar to allow an ‘@’ symbol and a dot symbol to take centre stage.

The Autofocus Attribute

To help with the user experience, we can add in the autofocus attribute in the first input field and the autofocus will do just that – automatically focus on a particular input field as soon as the page has loaded. Browsers that don’t support this attribute will simply ignore it.

<input name="name" autofocus placeholder="Your name here">

Styling the Form

Now that we have all the mark-up written, it’s time to give our form some style. Without CSS our form will look similar to the image above.

As you can see it’s not nice to look at, is it? But it is considered best practice to create all your HTML first and then add in your styles. So open up your CSS file and let’s think about the background and positioning first. We want to give our page background a nice pattern and then we give our form a width of 400 pixels and then center it on our page.

body {

font-family: Verdana, Arial;
font-size: 13px;
color: #000;
background: url('images/body_bg.png');

#wrapper {

margin: 50px auto; /* 50px from the top and auto centered */
width: 960px;

#form {
margin:0 auto;

Styling The Labels

Now to give our form that familiar look and feel, we can style our label elements by setting them to block level and giving them some room by adding a top margin.

label {
display: block;
margin-top: 20px;

Styling the Text Boxes

Let’s give our inputs fields some style. There is nothing new about this CSS rule and I encourage you to experiment on different colors and sizes. But as the input fields and the textarea share the same styles, we don’t want the textarea to be the same height for obvious reasons. So just underneath our first rule let’s add a height of 213 pixels to our textarea.

input, textarea {
width: 379px;
background: #efefef;
border: 1px solid #ddd;
font-size: 0.9em;
color: #ccc;
height: 25px;
padding: 10px;
margin-top: 3px;

textarea {

height: 213px;

CSS Focus

You saw how we can use the new HTML5 autofocus attribute in a few steps back. Here, we will use the old CSS way and add a light green border.

input:focus, textarea:focus {

border:1px solid #99cc66;

Styling the Submit Button

Now let’s add some style to the submit button by creating our own button in Photoshop (or whatever is your preferred design software) making sure we give it a height and width. We then indent the default text so you can’t see it and take away its default border. We also make the button appear like a button on hover by using the ‘cursor: pointer’ property and value. Lastly, to add some visual subtleness to the button, we take away some of its opacity on hover.

#submit {

#submit:hover {

Adding The Header Bar

To make our form complete, we can add some styles to our h2 tag so our header looks more like it should.

h2 {
color: #fff;
background-color: #666;
height: 30px;
padding: 10px;

Final Touches

To make our form really stand out of the crowd, we can add some nice new CSS3 rules to our input fields. Here we can add some rounded corners to all input fields and the textarea. Older browsers won’t recognize the ‘border-radius’ property – which is only for the most current versions of the supported browsers. So we need to add the ‘-moz-border-radius’ property for all gecko engine browsers (Firefox) and ‘-webkit-border-radius’ for all (yes you have guessed it) webkit engine browsers such as Google chrome and Safari.

input, textarea {

-mox-border-radius: 6px;
-weblit-border-radius: 6px;
border-radius: 6px;

So that’s all it takes to create an awesome HTML5 form using all the great HTML5 attributes. If you didn’t follow the tutorial, you can download the completed files using the link below.

Download Source Files
Click to Download Source Files.

242 Responses »

  1. Hey there! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly?
    My site looks weird when viewing from my iphone4. I’m trying to
    find a theme or plugin that might be able to fix this issue.
    If you have any recommendations, please share. Appreciate it!

  2. It’s a real pleasure to find someone who can think like that

  3. I know this site presents quality dependent articles or reviews and other stuff, is there any other site which provides these
    things in quality?

  4. Hello there, You’ve done an incredible job. I’ll definitely digg it and personally recommend to my friends.
    I am confident they will be benefited from this website.

  5. One of the main things that needs to be looked at is speed
    and jumping ability. Le – Bron James-CLE (NBA 2K15-98;
    NBA Live 15-95)Kevin Durant-OKC (NBA 2K15-95; NBA
    Live 15-94)Carmelo Anthony-NY (NBA 2K15-89; NBA Live 15-92)Paul
    George-IND (NBA 2K15-89; NBA Live 15-unknown)Kawhi Leonard-SA (NBA 2K15-85; NBA Live
    15-89)Andre Igoudala-GS (NBA 2K15-82; NBA Live 15-87). s act was to amaze
    the spectators in their skillful handling of several basketballs in the way they passed, juggled
    balls between players, and used their incredible coordination to make difficult shots.

  6. How far the suns will fall this year versus the Basketball gambling probabilities is the question we must answer.
    When it comes to number of wins in NBA history,
    the Boston Celtics are the top dog, with the Lakers not far behind.

    As Petrobras is the leader in the development of the subsalt area in Brazil, a major part of the
    investment in the region is expected to come from the company.

  7. Hello there, I believe your site may be having internet browser compatibility
    problems. Whenever I take a look at your website in Safari, it looks fine however, when opening in Internet Explorer, it’s got some overlapping issues.
    I merely wanted to provide you with a quick heads up! Aside from that,
    wonderful blog!

  8. I am curious too find out what blog platform you have been working with?
    I’m having some small security issues with my latest website and I’d
    like to find something more safe. Do you have any suggestions?

  9. Foor hottest information you have to pay a visit the wweb and oon the web I found this website as a fines web page
    foor hottrst updates.

  10. Ordained within thhe Church of Divine Unity after 5 years of intensive examine
    in spiritual and energetic healing, Christopher has also workerd alongside master nonn secular healers from lots of the world’s spiritual traditions.

  11. With havin so much written content do you ever run into any issues of plagorism or copyright infringement?
    My website has a lot of completely unique content
    I’ve either created myself or outsourced but it appears
    a lot of it is popping it up all over the
    internet without my agreement. Do you know any solutions to help protect against
    content from being ripped off? I’d really appreciate it.


  1. [2011/08/07] รวมลิงก์น่าสนใจ « MagicKiat's Weblog
  2. 25 Useful Html5 Cheat Sheets and Tutorials For Web Developer
  3. 25 exciting HTML 5 Tutorials - Open News
  4. 25 个精彩的 HTML 5 教程 | FM52.COM
  5. web前端开发资源-25 个精彩的 HTML 5 教程 | web前端开发
  6. 25 个精彩的 HTML 5 教程 | 夜明兔
  7. 25个HTML5教程和参考手册 | HTML5-CSS3
  8. 200+ HTML5 Tutorials, Techniques And Examples
  9. 夜明兔 » 25 个精彩的 HTML 5 教程
  10. 国外最新HTML5教程和参考手册 | Nobody
  11. 50 Best HTML5 Tutorials 2011 | Deep Ocean, Wide Sky
  12. App机器 » 25个有用的HTML5教程和参考手册
  13. Awesome HTML5 Cheat Sheets,Tutorials and Resources | HueDesigner
  14. 20 Helpful HTML5 and CSS3 Form Tutorials - Streetsmash
  16. 5 star resorts in thailand
  17. 25个有用的HTML5提示表和网页开发的教程 | 前端开发
  19. xe audi mui tran gia re
  20. bang gia xe oto nhap khau
  21. tem xe toyota ca map
  22. xe bmw giá
  23. diễn đàn xe máy axelo
  24. siêu xe toyota
  25. Waikiki Hotel

Leave a Comment

Category Selection

About Us

Boxie Designer is a blog on web design and development tips, tutorials, how-to's, and anything else under the web design and development genre. In order to keep our readers informed, we also have some Editor Picks in where the Editor selects some great outside articles on the topic.

Our Writers

The folks behind Boxie Designer are skilled designers and developers like yourself, with years of experience in the field. Their goal is to help share some tips and secrets they learned along the way.