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>

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

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

</head>
<body>

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="">

<label>Name:</label>
<input name="name">

<label>Email:</label>
<input name="email">

<label>Message:</label>
<textarea name="message"></textarea>

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

</form>

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">

<label>Name:</label>
<input name="name" placeholder="Your name here">

<label>Email:</label>
<input name="email" type="email" placeholder="Your email here">

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

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

</form>

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;
width:400px;
}

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 {
width:97px;
height:43px;
background:url('images/send_btn.png');
text-indent:-9999px;
border:none;
margin-top:20px;
cursor:pointer;
}

#submit:hover {
opacity:0.9;
}

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.


182 Responses »

  1. If you desire to increase your familiarity simply keep visiting this site and be updated with the
    hottest news posted here.

  2. Woah! I’m really enjoying the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s challenging to get that
    “perfect balance” between user friendliness and visual appearance.
    I must say you’ve done a superb job with this. In addition, the blog loads very fast for me on Chrome.
    Exceptional Blog!

  3. I comment whenever I especially enjoy a article on a site
    or I have something to add to the conversation. It is triggered by the sincerness communicated
    in the post I read. And on this article Creating an
    HTML5 and CSS3 Form Using the New Form Types | BoxieDesigner.
    I was excited enough to drop a thought ;) I actually do have a couple of questions for you if
    it’s allright. Could it be just me or does it look like like a few of the remarks look like
    they are left by brain dead folks? :-P And, if you are writing on
    additional social sites, I’d like to follow anything new you have to post.
    Could you make a list all of all your shared pages like your linkedin profile, Facebook page or twitter
    feed?

  4. Howdy! I could have sworn I’ve been to this site before but
    after browsing through a few of the articles I realized it’s new to me.
    Nonetheless, I’m definitely delighted I stumbled upon it and I’ll be bookmarking
    it and checking back often!

  5. Woah! I’m really digging the template/theme
    of this website. It’s simple, yet effective.
    A lot of times it’s very difficult to get that “perfect balance” between
    usability and visual appearance. I must say you’ve done a excellent job with this.
    Additionally, the blog loads super fast for me on Internet explorer.
    Excellent Blog!

  6. Hi! I’ve been following your site for a
    long time now and finally got the bravery to go ahead and give you a shout out from Dallas Texas!
    Just wanted to mention keep up the fantastic job!

  7. Hello there! I could have sworn I’ve visited this blog
    before but after browsing through some of the posts I realized it’s new to me.
    Regardless, I’m definitely delighted I stumbled upon it
    and I’ll be book-marking it and checking back often!

  8. Hello there, just became alert to your blog through Google, and found that it’s truly informative.
    I am gonna watch out for brussels. I’ll be grateful if you continue
    this in future. Lots of people will be benefited from your writing.
    Cheers!

  9. There’s definately a great deal to know about this issue.
    I really like all the points you’ve made.

  10. I used to be able to find good advice from your
    articles.

  11. Hi there! I could have sworn I’ve been to this website before but after browsing through a few of the posts I realized it’s new to me.
    Regardless, I’m certainly delighted I stumbled upon it and I’ll be bookmarking it and checking back frequently!

  12. My brother suggested I might like this web site.
    He was entirely right. This post actually made my day. You can not imagine just how much
    time I had spent for this information! Thanks!

Trackbacks

  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
  15. JAPANESE RESTAURANT QUEENS
  16. 5 star resorts in thailand

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.