HTML5 Forms – A Beginner’s Introduction
Wherever you go on the web there are forms! From registering for a new service, to sending a Tweet or updating your Facebook status, the role of HTML Forms is to start an interaction with your visitor. Different forms interact in different ways – some may just store data relevant to your current visit, some send emails, some interact with databases.
In this tutorial, I am going to introduce you to some standard form field types. Since HTML5 kicked in, the number of field types has expanded – but they are more descriptive which makes them easier to learn! So let’s get into learning HTML5 Forms!
In this exercise we will build a basic contact form.
Before you look at adding form fields, you need to first set up a
<form> tag pair:
<form action="/scripts/sendmail.php" method="POST"> </form>
For the purposes of this tutorial, we will make a non-functional form, but the next one we will hook it up to a program that sends emails.
action parameter means where is the form data being sent? Usually this is a script (a kind of text-based program) which is on the same server as your website. Some forms may use other website’s scripts (such as logging in via Facebook, for example). The
The thing to bear in mind is that the action must point at a relevant, active URL to be able to function correctly.
The method Parameter
There are two ways to send form data over the Internet:
GET. The Post Method sends all the form fields in a kind of ‘hidden’ way. The GET Method sends the data as part of the URL.
So, say we have a ‘Name’ field and an ‘Email’ field. If you use
method="GET" then the resultant URL would look like this:
Spaces in URLs are ‘encoded’ and become
%20. Each field-value pair is separated by an apersand:
GET method is okay for short forms, but does have a couple of drawbacks:
- It is less secure since visitor tracking, history storage etc have your personal data in the URL.
- It becomes much harder to control when using large forms.
So in most cases, you’re best to use
HTML5 Form Fields
There are a lot of different data types in HTML5, but I will introduce you to the most common and then over the course of these tutorials, introduce you to additional types. All your Form Fields must be placed between your opening and closing
A basic single-line text box looks like this in your code:
<input type="text" name="full_name" value="Your Name" placeholder="Enter Your Name" size="40" maxlength="100" required>
Note: there is no
Here’s an explanation of the attributes:
- type: as quite a few form fields can use the
typespecifies what kind of form field it is. In this case it’s just “text”.
- name: all your fields should have a unique name. Try to avoid spaces in names – underscores make a good alternative.
- value: if you want to specify a ‘default value’ then you can do it here. The actual value of the text box is whatever the user puts in before they submit the form.
- placeholder: not supported by really old browsers. This is a description which only appears when the text box is empty (or where
value=""). This is an alternative to writing words next to your text box to inform the user of what you want to go in the box.
- size: this is the size of your text box measured in the number of characters
- maxlength: what is the maximum number of characters allowed in the text box? This is important to stop spammers from posting reams and reams of data into your form in order to slow your site or your hosting server down.
- required: with HTML5 came the
If you want more text from your user – say a ‘message’ box in a contact form, or a ‘bio’ description on a profile page, then a simple text box will not be enough. In this case we need to use the
<textarea> tag pair instead:
<textarea name="your_message" cols="40" rows="5" placeholder="Your Message"> Please enter your message here. </textarea>
Some attributes are the same as
<input type="text"> but there are some unique factors:
- cols and rows: this determines the size of your textbox. cols is not the same as size so you’ll have to experiment with cols to get the width to be the same as any ordinary text boxes in your form. Rows however is how many lines of text will be visible at any time. The user can put more in if they want to, but then a scrollbar will appear.
- Text Between the Tags:
textareas don’t support the
value=""attribute. Instead whatever appears between your opening and closing
<textarea>tags will be the default value, including any new line characters you insert.
If you want to provide a text box for a password, then follow the model for
type="text" but replace with
type="password". Note however that any default
value will be obscured. You can still use
placeholder in the same way.
A word of caution: Although visibly-speaking, the password field is non-readable, the way it is transmitted is in readable form. For this reason websites should use SSL to encrypt form data as it’s sent across the web. And before storing in any database, passwords should be ‘mashed up’ in a way that means the actual password inputted is still non-readable.
HTML5 introduced us with
type="date". A date field comes with a calendar-style date-picker so people can click the date from the calendar, rather than write the date by hand. It looks something like this:
And here’s the code:
<input type="date" min="2015-01-01" max="2015-12-31" name="booking_date">
- min and max: only specify this if you want to limit the date to a specific timeframe. The date needs to be in USA timeformat here so YYYY-MM-DD, although I see the above demo in UK Format – i.e. DD/MM/YYYY
- type: there is a wide choice of
types: datetime-local, month, week and time. These give different options for input depending on what you want from your visitors.
- step: I haven’t put this in my example as it could over-complicate the tutorial for you. But there is an excellent explanation of the
stepattribute over at WuFoo.com
If you want to give your users a list of options to select one from, then you need the
<select name="Package" required> <option value="" selected>[Please Select]</option> <option value="Gold">Gold</option> <option value="Silver">Silver</option> <option value="Bronze">Bronze</option> </select>
So your total list of options is contained within
<select> </select> tags. Then each individual option is contained within
<option> </option> tags.
value="Gold" is the actual value transmitted for the option selected. The text between the option tags is the readable text your user will see.
Preventing No Choice Being Made
In this instance we have done three things to try to prevent the user from selecting nothing:
- required attribute: we have used HTML5’s
requiredattribute on the
<select>tag. This is fine for browsers that support HTML5.
- setting a default answer: if you use the
selectedattribute on one of your options, then that one will be selected by default. If you don’t set one, the first option in your list will be selected instead.
- Made the Top Option Value Empty: by making the top option have an empty
value, it will not pass the
requiredtest, which forces the user to select another option.
When building a form you always have to be thinking about how people might use your form. They don’t always react the way you hope!
Finally let’s look at a couple of buttons you can add at the bottom of your form.
Resetting the Form and Starting Again
You can specify a button which resets all the form fields to their original values. There are two ways of doing this:
HTML4 (still works in HTML5)
<input type="reset" value="Start Over">
The only thing which needs explanation here is that the
value attribute sets the text to be displayed on the button itself.
<button type="reset">Start Over</button>
In HTML5, the button text sits between the opening and closing button tags.
Submitting / Sending Your Form
A form is no good if it doesn’t do something. Your
action specified right at the start of this tutorial won’t be processed unless your form is submitted. For that you need a submit button. As with the reset button, there are two ways of doing this:
HTML4 (Still works in HTML5)
<input type="submit" value="Send Now">
<button type="submit">Send Now</button>
The same difference in how the text is displayed applies to a submit button as it did on the reset button.
Put HTML5 Forms Together
In the next tutorial we will look at form control and layout. For now go ahead and create yourself a demo form. Here’s one to get you started:
<form action="/scripts/sendmail.php" method="POST"> <p> Name:<br> <input type="text" name="full_name" value="Your Name" placeholder="Enter Your Name" size="40" maxlength="100" required> </p> <p> When Would You Like to Visit?<br> <input type="date" min="2015-01-01" max="2015-12-31" name="booking_date"> </p> <p> Do you have any special requirements?<br> <textarea name="special_requirements" cols="40" rows="5" placeholder="Do you need help with access, or have any dietary requirements?"></textarea> </p> <p> <button type="reset">Start Over</button><button type="submit">Send Now</button> </p> </form>
Well done on making it this far. There are other form fields than those listed here, but as this is a beginner’s tutorial, I wanted to limit it.
Feel free to use the comments if you have any questions!