READING-NOTE

View on GitHub

Forms and JS Events

Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

The HTML <form> element is used to create an HTML form for user input.

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

Example

HTML Forms






The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

The <input type=”text”> defines a single-line input field for text input.

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

The <input type=”radio”> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

A form with radio buttons:

Choose your favorite Web language:



The <input type=”checkbox”> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

A form with checkboxes:



The <input type=”submit”> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form’s action attribute.

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example

<!DOCTYPE html>

The name Attribute




If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".

Notice that the value of the "First name" field will not be submitted, because the input element does not have a name attribute.

JavaScript Events

HTML events are “things” that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can “react” on these events.

HTML Events

An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.

With single quotes: <element event=’some JavaScript’>

With double quotes: <element event=”some JavaScript”>

In the following example, an onclick attribute (with code), is added to a <button> element:

 <!DOCTYPE html>
 <html>
 <body>

 <button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

 </body>
</html>

<!DOCTYPE html>

What can JavaScript Do?

Event handlers can be used to handle and verify user input, user actions, and browser actions:

Many different methods can be used to let JavaScript work with events:

HTML event attributes can execute JavaScript code directly