HTML and HTML5 Forms Tutorial

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!


The FORM Tag | Action and Method | Text Box | Textarea | Password | Date | Resetting & Submitting


In this exercise we will build a basic contact form.

The <form> Tag

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>

The action Parameter

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.

The 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 action could also be a JavaScript function, but that falls out the scope of this beginner’s tutorial.

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: POST and 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:

http://your-domain.com/scripts/sendmail.php?Name=Bob%20Jones&[email protected]

Spaces in URLs are ‘encoded’ and become %20. Each field-value pair is separated by an apersand: &. The 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 method="POST".

↑ Top


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 form tags.


Text Box (Single Line)

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 </input> tag.

Here’s an explanation of the attributes:

  • type: as quite a few form fields can use the <input> tag, the type specifies 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 required attribute. For browsers that support this, it will prevent the form being sent if this field is not filled in. The user will also get a reminder that a required field was not completed. Older browsers won’t support this on their own. You can get JavaScript libraries to help build in compatibility, but we don’t have space to cover that here.

↑ Top


Text Box (Multiple Lines)

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.

↑ Top


Password Text Box

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.

↑ Top


HTML5 Date Field

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 step attribute over at WuFoo.com

↑ Top


Drop-down Box: The select Tag

If you want to give your users a list of options to select one from, then you need the <select> tag.

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

The 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:

  1. required attribute: we have used HTML5’s required attribute on the <select> tag. This is fine for browsers that support HTML5.
  2. setting a default answer: if you use the selected attribute 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.
  3. Made the Top Option Value Empty: by making the top option have an empty value, it will not pass the required test, 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!

↑ Top


Resetting and Sending Your Form

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.

HTML5 Only

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

HTML5 Only

<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.
↑ Top


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!
↑ Top

Spread the Word

Share This On Facebook Share This On Twitter Share This On Linkedin Share This On Google Plus Share This On Pinterest Share This On Mail

Leave a Reply

Your email address will not be published. Required fields are marked *