class-09.md

Forms and JS Events

Forms

HTML borrows the concept of a form to refer to different elements that allow you to collect information from visitors to your site.

Why Forms?

The best known form on the web is probably the search box that sits right in the middle of Google's homepage.

Form Controls

• ADDING TEXT:

1. Text input
2. Password input
3. Text area

MakingChoices:

1. Radio buttons
2. Checkboxes
3. Drop-down boxes

Submitting Forms:

1. Submit buttons
2. Image buttons
3. File upload

---

Lists, Tables and Forms

There are several CSS properties that were created to work with specific types of HTML elements, such as lists, tables, and forms.

list-style-type

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

list-style-image

You can specify an image to act as a bullet point using the list-style-image property.

list-style-position

Lists are indented into the page by default and the list-styleposition property indicates whether the marker should appear on the inside or the outside of the box containing the main points.

empty-cells

If you have empty cells in your table, then you can use the empty-cells property to specify whether or not their borders should be shown.

cursor

The cursor property allows you to control the type of mouse cursor that should be displayed to users.

---

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.

DIFFERENT EVENT TYPES

Here is a selection of the events that occur in the browser while you are browsing the web. Any of these events can be used to trigger a function in your JavaScript code.

THREE WAYS TO BIND AN EVENT TO AN ELEM ENT

1. HTML EVENT HANDLERS
2. TRADITIONAL DOM EVENT HANDLERS
3. DOM LEVEL 2 EVENT LISTENERS

DIFFERENT TYPES OF EVENTS

1. W3C DOM EVENTS
2. HTM LS EVENTS
3. SOM EVENTS