Why Forms?

In addition to enabling users to search, forms also allow users to perform other functions online. You will see forms when registering as a member of a website, when shopping online, and when signing up for newsletters or mailing lists.

Form Controls:

ADDING TEXT:

1.Text input (single-line)

2.Password input

3.Text area (multi-line)

Making Choices:

1.Radio buttons

2.Checkboxes

3.Drop-down boxes

Submitting Forms.

Uploading Files.

How Forms Work?

A user fills in a form and then presses a button to submit the information to the server.

Form Validation

You have probably seen forms on the web that give users messages if the form control has not been filled in correctly; this is known as form validation.

Whenever you want to collect information from visitors you will need a form, which lives inside a <form> element.

Lists and Table:

Table Properties:

You have already met several properties that are commonly used with tables. Here we will put them together in a single example using the following:

1.Width to set the width of the table

2.Padding to set the space between the border of each table cell and its content

3.Text-transform to convert the content of the table headers to uppercase

4.Letter-spacing, font-size to add additional styling to the content of the table headers

5.Border-top, border-bottom to set borders above and below the table headers

6.Text-align to align the writing to the left of some table cells and to the right of the others

7.Background-color to change the background color of the alternating table rows

8.:hover to highlight a table row when a user’s mouse goes over.

Cursor Styles:

Here are the most commonly used values for this property:

auto

crosshair

default

pointer

move

text

wait

help

url(“

This helpful extension for Firefox and Chrome provides tools to show you the CSS styles that apply to an element when you hover over it, along with the structure of the HTML.

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. Together these steps are known as event handling:

1.Select t he element node(s) you want the script to respond to :

For example, if you want to trigger a function when a user clicks on a specific link, you need to get the DOM node for that link element. You do this using a DOM query

2.Indicate which event on the selected node(s) will trigger the response:

Programmers call this binding an event to a DOM node. The previous two pages showed a selection of the popular events that you can monitor for.

3.State the code you want to run when the event occurs:

W hen the event occurs, on a specified element, it will trigger a function. This may be a named or an anonymous function

EVENT LISTENER:

An event is an important part of JavaScript.A web page respond according to an event occurred. Some events are user generated and some are generated by API’s. An event listener is a procedure in JavaScript that waits for an event to occur. The simple example of an event is a user clicking the mouse or pressing a key on the keyboard.

DIFFERENT TYPES OF EVENTS:

W3C DOM EVENTS : The DOM events specification is managed by the W3C (who also look after other specifications including HTML, CSS, and XML). Most of the events you will meet in this chapter are part of this DOM events specification.

HTM LS EVENTS :The HTMLS specification (that is still being developed) details events that browsers are expected to support that are specifically used with HTML.

SOM EVENTS :Browser manufacturers also implement some events as part of their Browser Object Model (or BOM). Typically these are events not (yet) covered by W3C specifications (although some will be added to W3C specifications in the future).

The most commonly used events are W3C DOM events, although there are others in the HTMLS specification as well as browser-specific events.

Done by Omar-zoubi GitHub

Why Forms?

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

In addition to enabling users to search, forms also allow users to perform other functions online. You will see forms when registering as a member of a website, when shopping online, and when signing up for newsletters or mailing lists.

Form Controls:

ADDING TEXT:

1.Text input (single-line)

2.Password input

3.Text area (multi-line)

Making Choices:

1.Radio buttons

2.Checkboxes

3.Drop-down boxes

Submitting Forms.

Uploading Files.

How Forms Work?

A user fills in a form and then presses a button to submit the information to the server.

Form Validation

You have probably seen forms on the web that give users messages if the form control has not been filled in correctly; this is known as form validation.

Whenever you want to collect information from visitors you will need a form, which lives inside a <form> element.

Lists and Table:

Table Properties:

You have already met several properties that are commonly used with tables. Here we will put them together in a single example using the following:

1.Width to set the width of the table

2.Padding to set the space between the border of each table cell and its content

3.Text-transform to convert the content of the table headers to uppercase

4.Letter-spacing, font-size to add additional styling to the content of the table headers

5.Border-top, border-bottom to set borders above and below the table headers

6.Text-align to align the writing to the left of some table cells and to the right of the others

7.Background-color to change the background color of the alternating table rows

8.:hover to highlight a table row when a user’s mouse goes over.

Cursor Styles:

Here are the most commonly used values for this property:

auto

crosshair

default

pointer

move

text

wait

help

url(“

Web Developer Toolbar:

This helpful extension for Firefox and Chrome provides tools to show you the CSS styles that apply to an element when you hover over it, along with the structure of the HTML.

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. Together these steps are known as event handling:

1.Select t he element node(s) you want the script to respond to :

For example, if you want to trigger a function when a user clicks on a specific link, you need to get the DOM node for that link element. You do this using a DOM query

2.Indicate which event on the selected node(s) will trigger the response:

Programmers call this binding an event to a DOM node. The previous two pages showed a selection of the popular events that you can monitor for.

3.State the code you want to run when the event occurs:

W hen the event occurs, on a specified element, it will trigger a function. This may be a named or an anonymous function

EVENT LISTENER:

DIFFERENT TYPES OF EVENTS:

W3C DOM EVENTS : The DOM events specification is managed by the W3C (who also look after other specifications including HTML, CSS, and XML). Most of the events you will meet in this chapter are part of this DOM events specification.

HTM LS EVENTS :The HTMLS specification (that is still being developed) details events that browsers are expected to support that are specifically used with HTML.

SOM EVENTS :Browser manufacturers also implement some events as part of their Browser Object Model (or BOM). Typically these are events not (yet) covered by W3C specifications (although some will be added to W3C specifications in the future).

The most commonly used events are W3C DOM events, although there are others in the HTMLS specification as well as browser-specific events.