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!
- 1 HTML5 Boilerplate:
- 2 Div vs Span
- 3 Tables
- 4 Forms
- 5 Name attribute
- 6 Inputs
- 7 Additional References:
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.
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.
<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.
To understand HTML5 forms completely let’s start with something very simple and then add complexity over time.
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.
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.
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.
Next we will simply add “placeholder” text to our inputs, using the placeholder attribute in the input element.
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.
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.
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.
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!
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.
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.
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.
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:
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.
The <textarea> element different from the other inputs. To start lets look at the difference between <input type=”text> vs <textarea> elements.
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.