Step 12: Forms

Forms in HTML5 are still created the same way as before, but there are some cool new functions that are so worth mentioning. To show you the possibilities, let’s create a contact form just like in the old HTML course, but we’ll add some of the new features to it.

Creating a form

I’ll be trying to include it all at once, but obviously you don’t have to use it all this way. So make sure you copy and paste this code and save it as contact.html.

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Whatever title of your file</title>
</head>

<body>

<form action=”mailto:e-mail@somewhere.com” method=”post” autocomplete=”on” id=”myform”>
<p>
My name is: <br />
<input type=”text” name=”name” size=”30″ autofocus>
</p>
<p>
I am:<br />
<input type=”radio” name=”sex” value=”man”> a man
<input type=”radio” name=”sex” value=”woman”> a woman
</p>
<p>
I’ve discovered this site on this date:<br />
<input type=”date” name=”discoverdate” min=”1996-01-01″>
</p>
<p>
My birthdate is (a date before 2014-01-01):<br />
<input type=”date” name=”discoverdate” max=”2014-01-01″>
</p>
<p>
My e-mail address is:<br />
<input type=”text” name=”email” size=”30″ autocomplete=”off” required>
</p>
<p>
I think this site is:<br />
<select name=”rating”>
<option value=”great”>great
<option value=”ok”>ok
<option value= “terrible”>terrible
</select>
</p>
<p>
In which browser are you viewing this site:<br />
<input list=”browser”>

<datalist id=”browser”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
</p>
<p>
My feedback:<br />
<textarea cols=”10″ rows=”10″ name=”reaction” wrap=”virtual” maxlenth=”255″>
</textarea>
</p>
<p>
Showing you a field that is disabled<br />
Address:<br />
<input type=”text” name=”address” disabled>
</p>
<p>
Showing you a field that is read only<br />
City:<br />
<input type=”text” name=”city” readonly>
</p>
<p>
I would love to listen to between 1 and 5 songs (fill out the quantity):<br />
<input type=”number” name=”quantity” min=”1″ max=”5″>
</p>
<p>
<input type=”submit” value=” send to webmaster’s e-mail ” formtarget=”_parent”>
<input type=”submit” formnovalidate formmethod=”post” formaction=”somescript.php” value=” Submit to another page “>
<input type=”image” src=”submit_image.gif” alt=”Submit” width=”100″ height=”50″>
<input type=”reset” value=” reset “>
</form>
</p>

<p>
Oops, I forgot to ask you your age:<br />
<input type=”text” name=”age” form=”myform”>
</p>

</body>
</html>

We’ll go through this form bit by bit, starting with the opening of the form:
<form action=”mailto:e-mail@somewhere.com” method=”post” autocomplete=”on” id=”myform”>
With this line of coding you start the form. The attribute “action” is needed to tell the browser where to send the information once the visitor clicks on “submit”. In this case, it should e-mail it to a non-existing e-mail address: e-mail@somewhere.com. Obviously, you would have to replace that with your own e-mail address. However, nowadays, this is not a very common way of using the form. You usually send the information to some sort of script (for example an ASP or PHP file).

Do you want to POST or GET the info

The method-attribute can only be “post” or “get”, which tells the browser what to do with the data. This depends on how the information is received by the script following the form. “Get” sends all the information as one long URL to the script. “Post” deals with the information behind the scenes (in the HTTP-headers to be precise). In this case, we’re not calling on a script, but sending it using our e-mail client.

Autocomplete a form

New to HTML5 is the attribute autocomplete. In this case, it’s turned on for most of the form. It means that, even if the user leaves a field blank, the browser autocompletes the form with the most commonly filled in answers. You can either turn it on or off in the <form>-element or in an <input>-element. When used in the <form>-element it will apply to the whole form. Later in the form you can see it’s turned off for one field though;
<input type=”text” name=”email” size=”30″ autocomplete=”off” required>

You are not obligated to use autocomplete-attribute in your form at all.

ID your form

With the id-attribute you name the form. Here we have chosen to name is “myform”. This is needed for applying scripts on the form itself:

<form action=”mailto:e-mail@somewhere.com” method=”post” autocomplete=”on” id=”myform”>

Autofocus on a field

The next line asks for the user’s name:
My name is: <br />
<input type=”text” name=”name” size=”30″ autofocus>
We’re using an input box of the type text. There are many types you can choose. Most are used in the sample form, so we’ll deal with that as they come. You set the name of this form field in the name-attribute. In this case, it’s a little bit confusing because it’s name is also “name”, but you can tell with all the following fields that you have to make sure every field has it’s own unique name. If you use duplicate names, the last filled out data will be the date you will receive.
The size-attribute sets the size of the field. This has nothing to do with the amount of characters someone’s allowed to fill out, but it’s the size of the form field on your website.

The autofocus-attribute, new to HTML5,  can be used once in any <input>-element  of your form. It will make sure the mouse’s arrow is already placed in this field, making it extremely easy for your user to fill out the form.

Radio and checkbox buttons

Next we want to find out whether it’s a man or a woman using the form. In the sample form we do this using radio boxes that someone can check:
I am:<br />
<input type=”radio” name=”sex” value=”man”> a man
<input type=”radio” name=”sex” value=”woman”> a woman
When you use radio boxes, you have to include values. Whichever value is checked will show as the data you receive. You can also choose the type “checkbox”. However, it is allowed to check more than one checkbox and that’s not what you would expect here, ‘cos in most cases, you’re usually not a man and a woman. I have chosen to use radio boxes instead, because it automatically forces people to check only one or the other.

Date

New to HTML5 is that you can now use the type “date” and also, if you so desire, set a minimum (the filled out date has to be after a certain day) and a maximum (the filled out date has to be before a certain day):
 I’ve discovered this site on this date:<br />
<input type=”date” name=”discoverdate” min=”1996-01-01″>
My birthdate is (a date before 2014-01-01):<br />
<input type=”date” name=”discoverdate” max=”2014-01-01″>

Required fields

As mentioned earlier, I’ve decided to turn the autocomplete off for the form field in which I request an e-mail address. You don’t have to do this ofcourse. I’ve also used to new required-attribute to make sure the form doesn’t send any info unless this field is filled. You can use this with any field.
My e-mail address is:<br />
<input type=”text” name=”email” size=”30″ autocomplete=”off” required> 

Drop down menu

In order to create a drop down menu you use the <select>-element and add each option with the nested <option>-element. This always has to have a value. The value is shown as the selected data in the information you receive:
I think this site is:<br />
 <select name=”rating”>
 <option value=”great”>great
 <option value=”ok”>ok
 <option value= “terrible”>terrible
 </select>

Suggest input

But, new to HTML5, you can also add suggestions to an <input>-element:
In which browser are you viewing this site:<br />
<input list=”browser”>
<datalist id=”browser”>
   <option value=”Internet Explorer”>
   <option value=”Firefox”>
   <option value=”Chrome”>
   <option value=”Opera”>
   <option value=”Safari”>
</datalist>
The <datalist>-element provides the form field “browser “, in this case, with suggestions that the user could fill out. It’s a great way to help people out with correctly completing the form.

Textarea – a bigger text field

When you want to let people write a longer bit of text, you can use the <textarea>-element. You can best always add an amount of cols (columns) and rows to this. Also, never forget to add it’s name and personally I always add the wrap-attribute to make sure the end of a row is recognized when the user is typing in the field. Otherwise all filled out content will always remain on one line.
Maxlength is not required, but I’ve added it to show you that you could limit the amount of characters someone is allowed to fill out:
My feedback:<br />
<textarea cols=”10″ rows=”10″ name=”reaction” wrap=”virtual” maxlength=”255″>
</textarea>

Disabled and read only fields

At any time, you could always decide to disable form fields. They will still show, but you can’t fill them out. There are two ways of doing so:
Showing you a field that is disabled<br />
Address:<br />
<input type=”text” name=”address” disabled>
</p>
<p>
Showing you a field that is read only<br />
City:<br />
<input type=”text” name=”city” readonly>

Number

You can now also add a field for any type of number:
I would love to listen to between 1 and 5 songs (fill out the quantity):<br />
<input type=”number” name=”quantity” min=”1″ max=”5″>
In this case, I’ve added a minimum and a maximum value, but you don’t have to do so. If you want you can also add a step-attribute here. Suppose you’d add:
<input type=”number” name=”quantity” step=”2″>
It allows the use to only add number in steps of 2, for example: -2, 0, 2, 4, 6 etc.

Submit buttons

There are various options available to you to submit the form now:
<input type=”submit” value=” send to webmaster’s e-mail ” formtarget=”_parent”>
<input type=”submit” formnovalidate formmethod=”post” formaction=”somescript.php” value=” Submit to another page “>
<input type=”image” src=”submit_image.gif” alt=”Submit” width=”100″ height=”50″>
<input type=”reset” value=” reset “>
</form>

The first button will send the form as set in the <form>-element. I’ve added the new formtarget-attribute to show you that you can also set it’s window target here.
The second button will send it to a script using the information placed within the formaction-attribute. You can best also add the formmethod-attribute here again to tell the browser how it’s supposed to deal with the information. The information provided here will overwrite the default settings in the <form>-element. In order to show you some of the new functions, I’ve also added the formnovalidate-attribute here. This is a booleaan attribute. It tells the browser not to validate any of the <input>-elements. In this case, you could assume the following PHP script will validate these, but you are not required to use this attribute.
The last submit-button shows you how to use an image as a submit button. You can then customize this completely to your liking.

Adding a form field outside the <form>-element

The cool thing about HTML5 is that you can always add fields to your form later. You just refer to the id of your form:
Oops, I forgot to ask you your age:<br />
<input type=”text” name=”age” form=”myform”>

File upload fields

There are two more input types you can use that haven’t been mentioned in my sample. In case you are creating a form for uploading files, you can use the type “file” and you can now also use this upload multiple files:
Upload files: <input type=“file” name=“files” multiple>

Check for patterns

Another really cool option to HTML5 is the fact that you can now make sure only certain patterns get filled out without needing any scripting, sample:
Country code: <input type=“text” name=“countrycode” pattern=“[A-Za-z]{3}” title=“Three letter country code”>
You can use the regular expressions that are available to Javascript

Bookmark the permalink.

Comments are closed