A page reacts when a user does something
An event is something that happens on a page, such as a click, a key press or a form being sent. A listener is a function that runs when that event happens.
A form collects text from a user, and checking that text before it is used is called validation. In this lesson you will handle a click and check a form.
By the end of this lesson
Note
I can handle a click and check a form.
Key words
| Word | What it means | Example |
|---|---|---|
| Event | something that happens on the page | click |
| Listener | a function that runs when an event happens | |
| Form field | a box or choice where a user gives a value | <input> |
| Label | the words that name a form field | |
| Validation | checking that a value is acceptable | |
| Submit | to send the form, usually by pressing a button |
The cells students fill in are left blank in this preview.
A listener waits for one kind of event
You write element.addEventListener("click", work). The first value is the event name. The second is the function to run. The browser calls that function when the event happens.
The function receives an event object that describes what happened. Common events are click, input (a field changed as the user typed), change and submit.
Try it: count the clicks
<button id="add" type="button">Add one</button>
<p id="total">Clicks: 0</p>Worked example: common events
| Event | When it happens | Typical use |
|---|---|---|
| click | The user presses a button or a link | Open a menu |
| input | The text in a field changes | Filter a list as they type |
| change | The user finishes changing a field | Update a price |
| submit | The user sends a form | Check it before it goes |
| keydown | The user presses a key | A keyboard shortcut |
The cells students fill in are left blank in this preview.
A form is labels, fields and a button
A form is a form element that holds fields. Each field needs a label joined to it. The label's for attribute matches the field's id. This lets a user click the words to reach the field, and a screen reader read them.
The type of an input says what it takes: text, email or number. Attributes such as required let the browser do a first check.
Count the form parts on the lab page
docker exec jupyter python3 steps/tags.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The lab page has one small form
In the output find these lines: form 1, input 1, label 1 and button 2. The form has one label, one text field and a button that sends it. The second button changes the theme and is outside the form.
The script reads the form's submit event and the field's input event, so the list filters as you type.
Check the data in the page, then again
Validation checks a value against a rule. Typical rules are: the field is not empty, an age is a whole number in range, and an email has an @ and a dot.
Checking in the page gives a quick, friendly message. The server must still check again, because anybody can skip the page and send data directly.
Try it: check an age
<form id="join">
<label for="age">Your age</label>
<input id="age" type="text">
<button type="submit">Join</button>
<p id="message"></p>
</form>A common mistake
Warning
Many people think that checking a form in the page keeps bad data out. It does not. A user can skip the page, or turn off the script, and send anything. Check in the page for the user's sake, and check on the server for safety.