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.


228 Responses »

  1. Тhis post will help the internet users for setting
    սp new webpage or even a weblog from start to end.

  2. Exϲellent poet however , I աas wondering iff you cօuld write
    a littee more on this suƅject? I’d be very grateful if you could elaborate a little bit more.
    Τhank ƴoս!

  3. І really like your blog.. very nice colors
    & theme. Did you Ԁesign this website yourѕelf
    or did you hirе someone to do it for you? Plz rwply as I’m looking to create my own blog and wouyld lіke
    to find out where u got this from. many thanks

  4. Hello to every one, the contents existing at this website
    are actually amazing for people experience, well, keep up the good work fellows.

  5. Very good article. I will be dealing with a few of these issues as
    well..

  6. A fascinating discussion is worth comment.
    I believe that you need to write more on this topic, it might not be a taboo
    matter but typically folks don’t discuss these issues. To the next!
    All the best!!

  7. excelent put up, very informative. I’m wondering why the opposite specialists of this sector don’t understand this.
    You must continue your writing. I am sure, you have a
    great readers’ base already!

  8. Greetings from Florida! I’m bored at work so I decided to check out your blog
    on my iphone during lunch break. I love the knowledge you present here and can’t wait to take a
    look when I get home. I’m amazed at how fast your blog loaded on my
    mobile .. I’m not even using WIFI, just 3G .. Anyways, fantastic site!

  9. I was very emotional in the last week leading as much as the
    anniversary of her demise and then one thing wonderful occurred.
    Should you do it effectively you promote and you get engaged followers.

  10. I all the time еmailed this blog post pɑge to all my
    associates, as if like to read it after that my links
    will too.

  11. Social media is a lot more than Facebook just, so make certain those on other networks know about your presence on another social
    media networks.

  12. Hi there, I think your website may be having internet browser compatibility issues.
    When I look at your site in Safari, it looks fine but when opening in Internet Explorer, it’s got some overlapping issues.
    I simply wanted to provide you with a quick heads up! Other than that, excellent blog!

  13. Hi there, I think your web site may be having internet browser compatibility problems.
    Whenever I take a look at your blog in Safari, it looks fine however,
    if opening in IE, it’s got some overlapping issues.
    I just wanted to provide you with a quick heads up! Other than that, fantastic site!

  14. Woah! I’m really loving the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between user
    friendliness and appearance. I must say that you’ve done a great job
    with this. In addition, the blog loads super fast for me on Opera.

    Outstanding Blog!

  15. Thanks designed for sharing such a good thinking, piece of writing is fastidious, thats why i have read it entirely

  16. Definitely believe that which you stated. Your favorite justification seemed to be on the
    web the easiest thing to be aware of. I say to you, I definitely get irked while
    people think about worries that they plainly don’t know about.
    You managed to hit the nail upon the top and also defined
    out the whole thing without having side-effects ,
    people could take a signal. Will probably be back to get more.
    Thanks

  17. I am really pleased to read this blog posts which
    carries tons of valuable facts, thanks for providing such data.

  18. While they may certainly be purchased by people who are
    not exactly what we would consider rich, the more luxurious ones
    have a life of their own that only money and a good art designer can achieve.
    Apart from these, the yacht charters in Croatia also offer catamarans for large
    family with children. The bedrock of the resort is its three PGA championship standard
    golf courses.

  19. Really feel comfy with the superior import facility that is used to exchange keyword and URL lists between Net CEO instruments – HitLens internet analytics, Ranking checker, Hyperlink Partners, Backlink Checker, Key phrase instrument.
    To search out out more concerning the Web CEO Professional plans and
    pricing, visit the WebCEO plans and pricing overview.

  20. Ѕatellites aree little object orbiting around bigger objects.

  21. Hi to every one, it’s actually a nice for me to go to see
    this site, it includes important Information.

  22. Here are five places you can advertise your small business online for free without actually placing an ad.
    If you do not develop this skill, you are going to find yourself stuck in thousands of half finished projects and an IM venture that won’t ever
    be a success. It is very much important to analyze the marketing plans of
    your competitors and change yours accordingly in order to be more successful
    compared to them.

  23. Hi I am so thrilled I found your site, I really found you by
    mistake, while I was researching on Digg for something else, Anyways I
    am here now and would just like to say cheers for
    a tremendous post and a all round interesting blog (I also love
    the theme/design), I don’t have time to read it all at the
    minute but I have saved it and also included your RSS feeds, so when I have time I will be back to read more, Please
    do keep up the excellent work.

  24. Excellent blog here! Also your site loads up very fast!
    What web host are you using? Can I get your affiliate link
    to your host? I wish my web site loaded up as quickly as yours lol

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
  17. 25个有用的HTML5提示表和网页开发的教程 | 前端开发
  18. social-dmsoler.mooo.com
  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

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.