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!
Contents
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=”text”>
<input type=”date”>
<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.
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.
+ There are no comments
Add yours