Read:09 | Forms and Events
Textbook: Jon Duckett: HTML & CSS + JavaScript & jQuery
(HTML book: Chapters 7 + 14 | JS book: Chapter 6)
HTML | Forms
- The
<form>element in HTML is a parent tag where you can nest various input tags to collect information from the user - Inputs from the form fields are saved as name/value pairs and sent to the server
- You can connect the
<label>tag to the<input>tags using the input’sidattribute matching to the label’sforattribute - The
<input>tags contain very usefultypeattributes such as:file,submit,image,hidden,text,password,email,radio,checkbox - The
<form>element takes two standard attributes:action(usually a URL) andmethod(GET/POST)
HTML | Lists, Tables and Forms
- There are CSS properties that are specifically designed for lists, tables, and forms, such as
list-style-type: lower-roman;, which would make the bullets on the list turn into lower-case Roman numerals - To make sure your table cells are consistent across all browsers, be sure to utilize CSS properties such as
border-spacing,border-collapse,empty-cells - Aligning form controls makes the form easier to use for the user, see the image below for reference:
JS | Events
- Events are actions made by the user such as a button click or when a page has loaded
- Includes key press, mouse scrolls, form submits, focus/blur
- Binding dictates the event you are listening for from a specific element
- Events are usually captured in a JS function which changes the website in some way and feels dynamic to the user
- Event delegation can be set up for future events that happen in child elements
Traditional DOM event handler is set up like this:
Event listener syntax is like this:
NOTE: The preferred modern method is event listener syntax
Using an Event Listener in JS:
