Create a HTML5 form and submit it using AJAX.

This two part tutorial will show you how to create a HTML5 form and submit it using AJAX. In today’s post we will be focusing solely on creating and styling the form, so if you are looking for the AJAX code you may want to skip straight to step two.

This is pretty much your standard HTML form with a bit of HTML5 goodness added in. As the target audience of this tutorial should already have a good understanding of HTML, I will limit my explanation to the HTML5 attributes and elements.

The first thing you might notice is the new input type used for the email field. HTML 5 introduces some interesting new input types allowing for better control of input elements & improved accessibility.

To expand on the accessiblity point, this is mainly referring to usage on mobile devices. When a mobile user interacts with an ’email’ input, the ‘@’ symbol is added to their keyboard for example. A similar thing happens for the ‘url’ input too… if you have any experience using a mobile device for entering form data you will probably appreciate how much of an improvement this is.

Moving on, the list below provides an overview of the new input types available(I wont go over these in any detail as it is outside the scope of this tutorial):

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

There are a couple of new attributes used in the form. The first being ‘placeholder’ and the second being ‘required’. It’s probably easy to to get a rough idea of their purpose from the name alone, but let’s take a closer look anyway.

The placeholder attribute, as you may have guessed by now, can be used to add placeholder content to form inputs. The placeholder content will remain visible until the user actually adds content to the input, at which point it will be removed. If at any point the user decides to delete all content from the input, then the placeholder content will be added back in. Prior to this attribute being available, it was possible to achieve a similar effect; you could use javascript, something similar to the below code would work:

The HTML5 way is quicker, neater and much easier to read. Of course, it will not work in older browsers – but it does degrade gracefully and the attribute will simply be ignored.

The ‘required’ attribute can be used to mark an input as mandatory and will prevent the form from being submitted until some content is added to it. Additionally, the user will be presented with a small tool-tip near the input stating that it is required. Again, this is just a more efficient way of doing what you probably would have done yourself using JS anyway.

Step 2 – Style the form using CSS3.

Let’s start with the form itself.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

#message-form {

margin:0auto;

width:60%;

margin-top:20px;

font-family:myriad pro;

}

#message-form fieldset {

display:block;

border:0;

padding:20px;

border:1pxsolid#d3d3d3;

border-top:0;

}

I find it useful to add any margin, padding, borders etc to the parent element first of all so that it’s easier to see the bigger picture early on. In this example, the ‘fieldset’ element is going to be used as the inner wrapper so the border has been added to this rather than the form itself.

If you are not familiar with the transition property, it works as follows:

transition: [property] [duration]

In this example we have simply applied the transition to all properties. Now, when we add some properties to the ‘:focus’ pseudo selector, the changes will transition in smoothly rather than instantly. The transitions could also be applied to other pseudo selectors (‘:hover’ for example).

The final CSS rules are for the submit button and the dotted lines at the bottom of the form. Let’s take a look.

Nothing too fancy here, you may have noticed the inset box shadow applied to the ‘:active’ pseudo element of the button. This gives the impression that the button has actually been pushed down when the user clicks it.

Hi,
Could you expand on the label comment please, not entirely sure what you mean.
Regarding the inline javascript comment, the snippet is not actually used on the form at all and is only used to quickly demonstrate how placeholder functionality could be implemented pre HTML5. Obviously a better way to implement it would be to use unobtrusive javascript, separating script from markup.
Cheers,
John.