HTML5 Basics

This post covers the basics of HTML5. Some of the deprecated tags, and a lot of the new stuff. Let’s start at the beginning!

HTML5 Boilerplate:

This boilerplate can be auto-inserted with hotkeys in Atom and Sublime Text with the following:

Note** File must be saved as .html before these shortcuts will work.

Atom: Type html and then enter

Sublime Text: Type html and then tab

Div vs Span

There is one key difference between <div> and <span>.

<div> is a block-line element and <span> is an inline element. Spans can be used within divs without creating a line break.

Tables

In HTML5 tables have now been separated into head and body tags. <thead> has replaced <th> for the header row and the rest of the table rows are now contained inside of the <tbody> element. The old tags will still work but these new tags are considered to be more correct. Just as <strong> has replaced <b> and <em> for emphasis has replaced <i>.

Note that you will still use the <th> tag inside <thead> if you want the Title to be bold and centered. Otherwise it will display like a normal table cell.

See the Pen HTML5 – Simple Form by Nicholas Coughlin (@nicholascoughlin) on CodePen.

Forms

<form> represents a document section that contains interactive controls to submit information to a web server. Common attributes of <form> include:

action=”the url to send form data to”

method=”the type of http request, get or post” (this is a boolean option)

<input> creates interactive controls. Then the <type> attribute determines the type of input. For example text, date, color, file, checkbox.

<input type=”color”> etc…

A full list of inputs are available here.

Simple Inputs

To understand HTML5 forms completely let’s start with something very simple and then add complexity over time.

See the Pen JpdPWa by Nicholas Coughlin (@nicholascoughlin) on CodePen.

This most simple form doesn’t do anything when you submit it. But do note that the text input field will show the characters when you type them in, but the password field will not. This is one of the key features of the password input type. Also note that this form will not submit any information because we have not specified the action attribute, which is where the data is sent (typically a database) or the method attribute (get or post) which tells us if we are sending or receiving information. We will get to those later.

Labels

Now lets add a little more complexity by labelling our input fields. There are two ways to do this. We will start with the most simple.

See the Pen HTML5 – Form Labels Syntax 1 by Nicholas Coughlin (@nicholascoughlin) on CodePen.

In this method we simple wrap the input tags with the <label> tag as shown.

The 2nd method avoids nesting the tags by assigning a meta tag (id) to each input, and then referencing that id with for in the label.

See the Pen HTML5 – Form Label Syntax 2 by Nicholas Coughlin (@nicholascoughlin) on CodePen.

Placeholder Text

Next we will simply add “placeholder” text to our inputs, using the placeholder attribute in the input element.

See the Pen HTML5 – Simple Form Placeholders by Nicholas Coughlin (@nicholascoughlin) on CodePen.

Placeholder text can be very useful to prompt the user with the Correct format. For example a phone number that requires a specific format to validate.

Validation

Required Fields

For Chrome or other browsers to actually prompt you to fill in the forms correctly, the most simple form of validation is the required attribute in the input element. This is a simple boolean that will not allow you to submit the form unless the field has been filled out. But it does not require any specific formatting or character length to be accepted.

See the Pen HTML5 – Form Validation – Required Fields by Nicholas Coughlin (@nicholascoughlin) on CodePen.

Type Validation

There are also validations based on the type of input being used. For example if we use the email input type <input type=”email”> the browser will check to make sure that the data includes an @ symbol. Try to submit the following form without an @ symbol and you will be prompted that the field was not completed correctly.

See the Pen HTML5 – Form Validation – Input Type Email by Nicholas Coughlin (@nicholascoughlin) on CodePen.

The method of validation is up to the browser. For example in Chrome even if you include an @ symbol but nothing after that, you will still be prompted that you have not input a valid email address.

Minlength & Maxlength

If you would like to set a minimum length or maximum length for an input (in characters) you can use the minlength or maxlength attribute. However this attribute is not widely supported and it is better to use the pattern attribute. However, here is an example of minlength and maxlength.

See the Pen HTML5 – Input minlength & maxlength Attribute by Nicholas Coughlin (@nicholascoughlin) on CodePen.

Pattern

The pattern attribute is much more widely supported than minlength and also is much more flexible in what it will or won’t allow. The basic format looks like this

Then to restrict the types of character you use []’s and to restrict the length you use {}

So for example to only allow capital letter we could use the following:

<input pattern="[A-Z]">

To allow all letters but no symbols or special characters:

<input pattern="[A-Za-z]">

Then to add a restriction on # of character you (say minimum 5 and maximum 10):

<input pattern="[A-Za-z]{5,10}">

Or if we just wanted to say minimum 5 character with no other restrictions:

<input pattern=".{5,}">

You may have noticed that these restrictions are formatted as regexp

Title (describing the restrictions)

Lastly, you will want to describe to the user what the restrictions are, otherwise they wont know how to meet your requirements! This is done with the title attribute, which is used right after the required attribute.

See the Pen HTML5 – Input Pattern Attribute + Tittle Attribute by Nicholas Coughlin (@nicholascoughlin) on CodePen.

Name attribute

To view the data that is being sent by injecting it into the url, we have to provide a name for the browser to display. We do this using the name attribute which is added directly to the input element.

See the Pen HTML5 Forms – Name Attribute by Nicholas Coughlin (@nicholascoughlin) on CodePen.

You won’t be able to see the effect of this if you submit the form in the codepen here. But if you paste that code into an html file and open it in the browser you would get the following:

So we input NickC for our username and 123456 for our password, and when we hit submit we can see that data was injected into the url.

NOTE: We never want to actually post a password in the URL, this is just an illustration to show that by naming the pieces of data we are able to retrieve them later.

Also note that because we have not specified the action or the method the form will send the information to the default location, which is the current location. If the method is not specified it will use the default method, which is get!

Inputs

Radio Button and Checkbox

These are very simple inputs. The important distinction to note between them is that the radio input cannot be toggled, while the checkbox input can be toggled.

See the Pen HTML5 – Input – Radio and Checkbox by Nicholas Coughlin (@nicholascoughlin) on CodePen.

The radio input is useful for situations where the user has to pick one or the other of the options, but must pick one of the options, and cannot pick both! For example, identifying between male or female. However we need to let the form know that we are associating the two radio buttons with each other by giving them the same name. That way they are part of a set, and the browser knows to only let the user pick one of these options.

See the Pen HTML5 – Radio Input by Nicholas Coughlin (@nicholascoughlin) on CodePen.

If we give this form a submit button, and submit our choice between male and female, what data would we expect would be sent? Probably Male or Female right? Actually what we would get is this:

And the result is the same whether we select the Male or Female radio buttons.

This is because we actually have to specify the value of the radio button. This makes sense if you think about it. So far we already have the following for the input: type, id & name. The type just specifies that this is a radio button. The id is simply linking the button to the label, and the name is linking this radio button to the other button as part of a set. We haven’t actually indicated what the value (or data) is that we are trying to submit by choosing this button.

See the Pen HTML5 – Radio Button Values by Nicholas Coughlin (@nicholascoughlin) on CodePen.

As you can see in the code above, we have now added a value to each of the radio buttons. This changes nothing visually, but now when you submit the form you get the following:

Select Tag (Drop Down Menus)

Dropdown selections operate on a lot of the same principles as the radio buttons. Here is a quick sample:

See the Pen HTML5 – Sample Dropdown Input by Nicholas Coughlin (@nicholascoughlin) on CodePen.

One quick thing to note here is that we have given our options a value that is not identical to the choices in the dropdown. If we submit this selection remember that we are sending the value of the selection, not what is shown in the dropdown. However, if you do not specify a value, the text in between the option tags will be sent as a default.

Text Area

The <textarea> element different from the other inputs. To start lets look at the difference between <input type=”text> vs <textarea> elements.

See the Pen HTML5 – Text Inputs by Nicholas Coughlin (@nicholascoughlin) on CodePen.

The primary difference between these two is that the <input type=”text> is just one line of text, while the text area can accept whole paragraphs and can have it’s default display size adjust. Like the other inputs however, if you want to pass the data on submission you must give the element a name.

MDN <textarea> Attributes

Additional References:

Mozilla HTML5 Reference

Mozilla Elements Reference

Mozilla Attributes Reference

Nick Coughlin