Forms

Traditionally, the term ‘form’ has referred to a printed document that contains spaces for you to fill in information

Form Controls

There are several types of form controls that you can use to collect information from visitors to your site

1. Adding Text

2. Making Choices

3. Submitting forms

4 Uploading Files

Form Structure < form >

There are several types of form controls that you can use to collect information from visitors to your site

Text Input

The < input > element is used to create several different form controls. The value of the typeattribute determines what kind of input they will be creating

Type=”password” When the type attribute has a value of password it creates a text box that acts just like a single-line text input, except the characters are blocked out. They are hidden in this way so that if someone is looking over the user’s shoulder, they cannot see sensitive data such as passwords

The < Textarea > element is used to create a mutli-line text input. Unlike other input elements this is not an empty element. It should therefore have an opening and a closing tag

Checkbox

type=”checkbox”Checkboxes allow users to select (and unselect) one or more options in answer to a question.

Lists, Tables and Forms

The list-style-type property allows you to control the shape or style of a bullet point (also known as a marker).

* Unordered Lists

#### none #### disc #### circle #### square

Ordered Lists

For an ordered (numbered) list you can use the following values:

decimal

1 2 3

decimal-leading-zero

01 02 03

lower-alpha

a b c

upper-alpha

A B C

lower-roman

i. ii. iii

Images for Bullets

You can specify an image to act as a bullet point using thelist-style-image property

Styling Forms

Nobody I know enjoys filling in forms, so if you can make yours look more attractive and easier to use, more people arelikely to fill it in. Also, when you come to look at a form in a few different browsers (as shown on the right), you will see that each browser displays them differently

Aligning Form Controls : Problem

Labels for form elements are often different lengths, which means that the form controls will not appear in a straight line. This is demonstrated in the example on the right (without CSS applied to the form controls).

Events

When you browse the web, your browser registers different types of events. It’s the browser’s way of saying, “Hey, this just happened.” Your script can then respond to these events.

HOW EVENTS TRIGGER JAVASCRIPT CODE

When the user interacts with the HTML on a web page, there are three steps involved in getting it to trigger some JavaScript code.

Forms

Traditionally, the term ‘form’ has referred to a printed document that contains spaces for you to fill in information

Form Controls

There are several types of form controls that you can use to collect information from visitors to your site

1. Adding Text

2. Making Choices

3. Submitting forms

4 Uploading Files

Form Structure < form >

There are several types of form controls that you can use to collect information from visitors to your site

Text Input

The < input > element is used to create several different form controls. The value of the typeattribute determines what kind of input they will be creating

The < Textarea > element is used to create a mutli-line text input. Unlike other input elements this is not an empty element. It should therefore have an opening and a closing tag

Checkbox

type=”checkbox”Checkboxes allow users to select (and unselect) one or more options in answer to a question.

Lists, Tables and Forms

The list-style-type property allows you to control the shape or style of a bullet point (also known as a marker).

* Unordered Lists

Ordered Lists

For an ordered (numbered) list you can use the following values:

decimal

1 2 3

decimal-leading-zero

01 02 03

lower-alpha

a b c

upper-alpha

A B C

lower-roman

i. ii. iii

Images for Bullets

You can specify an image to act as a bullet point using thelist-style-image property

Styling Forms

Nobody I know enjoys filling in forms, so if you can make yours look more attractive and easier to use, more people arelikely to fill it in. Also, when you come to look at a form in a few different browsers (as shown on the right), you will see that each browser displays them differently

Aligning Form Controls : Problem

Labels for form elements are often different lengths, which means that the form controls will not appear in a straight line. This is demonstrated in the example on the right (without CSS applied to the form controls).

Events

When you browse the web, your browser registers different types of events. It’s the browser’s way of saying, “Hey, this just happened.” Your script can then respond to these events.

HOW EVENTS TRIGGER JAVASCRIPT CODE

When the user interacts with the HTML on a web page, there are three steps involved in getting it to trigger some JavaScript code.

HTML EVENT HANDLER ATTRIBUTES (DO NOT USE)

TRADITIONAL DOM EVENT HANDLERS

USING DOM EVENT HANDLERS

USING PARAMETERS WITH EVENT HANDLERS & LISTENERS

FALLBACK FOR USING EVENT LISTENERS IN I E8