HTML

Structure of a Page

The following HTML elements can define different areas of a webpage:

Contains the page banner, often including a title, graphic, company icon or link to the home page

Contains the navigation bar / links

Contains the page content: Text, graphics, audio and video

Contains general information, for example links to contact details, FAQs, copyright information or legal agreements

Page content can be sub-divided into different areas using both <section> and <div> elements. Using both elements allows the sub-divided content to be independently styled, without the need to implement classes or IDs:

In this example, the content has been sub-divided using three section elements, which are then controlled using float and clear CSS declarations:

The ID Attribute

HTML Code

We have used 3 individual ID attribute's so that we can select each DIV tag individually

CSS Code

The ID selectors are denoted by the use of a # symbol. If we only styled the div tags themselves then all divs would adopt the same appearance.

Forms

The HTML <form> element defines a form that is used to collect user input:

<form>

form elements

</form>

There are various form controls you may see:

Text Boxes
Radio Buttons
Drop Down Menus (Combo Boxes)
Number Pickers
Submit Buttons

Inputs can be validated using length check, restricted choice, presence check and range check.

This is an example HTML form. Let’s look at the coding behind it…

Text

This code implements two text input boxes for forename and surname, including length and presence checks:

Number

Inputting a number in a form can be limited to a minimum value, maximum value or both.

Radio Button

Radio buttons can be used for restricted choice validation.

If the <br> elements are not included, the radio buttons align horizontally.

Text-Area

A larger text box, for use with extended text input, can be implemented using the textarea form element:

If required, please delete and state any special requirements:

The width and height of the textarea element is set using rows and columns.

If required, a length and presence check can be applied to the above input element.

maxlength = “100” determines the maximum number of characters that can be inputted.

Submit Button

When a form is submitted, the browser shows any validation errors (although this is browser dependant).

A JavaScript onclick event can be used to let users know a form has been submitted.

Drop Down Menu

The select element creates a restricted choice list of inputs in a drop-down menu.

A drop-down menu can use a size attribute to display a fixed number of options (if the number of options is larger than the size attribute, a scroll bar will appear).

Users can choose more than one option by using the multiple attribute:

Pre-Populating Form Input

Form elements can be given values that are displayed when the web page loads.

These can be left unchanged, deleted or edited by the user.

The value attribute can pre-populate text and number elements:

To pre-populate a textarea, the text is included between the start and end elements

A radio button can be pre-select using the checked attribute (this can be used to select one, multiple or all of the radio buttons).