This is important because..
Overview of module with links to related readings, tutorials, and the like.
At the core, a main interaction method for users and a site, program, and/or application. The inputs generated by the user can be stored, processed, manipulated to cause dynamic changes in the interface.
Various types and styles of elements exist that allow interaction with a form, these are called form controls and most can be made through the use of the <input> element.
Types include:
Form Validation is to allow only a specific format or value to be used/entered.
Before writing a single line of code, plan what the form will entail in its design and what it’ll ask from the user. Pen and paper (or pencil) are friends and tools.
<form> is the parent / container element.
Attributes are optional, although it is recommended to include action (where to submit data input) and method (defines HTTP method used to send data; get or post).
Up next are <label>, <input>, and/or <textarea> elements.
for attribute uses id to link with form control associated with.
<label> - self-explanatory, for providing context as to what the input area is for.<input> - define single or multi line text, button, dropdown, etc. type attribute is vital for defining how the input will be received / entered, and behavior to expect once submitted.<textarea> - could be an alternative to <input>, although the way its structured is different.<button> - can be coded to used as submit button + other interactive changes.
type attribute also applicable with submit (sends data to specified URL defined in action in <form> element), reset (resets all widgets / form controls to default), or button (used for custom buttons).action and method attributes inside opening <form> tag provides instructions on where and how data is sent.
Also where the name attribute defined for individual form control matters, as they provide context on what to name each piece of data being processed (name/value pairs). For more information, visit Sending form data article.
Flexibility can equal complexity; forms come in all shapes and sizes and its your job as the developer to orchestrate the most optimal, functional, and accessible structure.
<form> - The parent element / container for all other form elements with attributes that define the forms behavior. Never, ever, nest a form within a form; bad practice and could cause unpredictable behavior.<fieldset> - semantic element that groups controls that share a purpose. Useful for type="radio" buttons or sectioning within a form.
<legend> - label for <fieldset> that describes purpose/use.<label> - defines form widget / control. Useful when using screen readers, as it will speak not only element label, but also any related instructions through for/id association.
<label> can also be done by nesting <input> within, but still recommended to use for.<li> then <ul> / <ol>, but not exclusively, as <div> or <p> can also be used to.<sections> are allowed as tools to help with the structure.<form> - without it, no form<label> - provides context on what the are is for, usually input.<fieldset> - groups related sections<button> - a way for the user to interact with the form; can select from choices or be used to submit.<textarea> - another form to input data, this can be a single line or a multi-line, adaptable text box.Landing page for learning the essentials of the core language. Provides links for readings, tutorials, and challenges.
Events are changes or… well, events that happen in a system, program, application that are recognized and accounted for to allow subsequent changes to happen. When an ‘event’ occurs, the system creates a signal, which in turn provides an opportunity for an action (code) to occur (run/execute).
Many different type of events exist and can be tied to a single element, various elements, The entire HTML file, or the entire browser window. View the event index for a comprehensive list of all the types of events that may occur.
An event listener is what is used to react to events and allow changes to occur. An event handler is a function that responds from the event listener and respond in kind. This process is known as registering an event handler.
addEventListener()A method appended to objects that can execute events. Parameters include what event to expect and ‘listen’ for, and a function of some sort to invoke after the event is registered. The function can be built globally and just referenced by name within the parameters, rather than built in.
Handlers can be removed just as easy as added, removeEventListener(). Can improve execution and writing efficiency, as well as allowing a button (or other element/control) to do different things depending on circumstances and environment. Likewise, one event may have multiple ‘event listeners’ / multiple handler functions executing at same time.
addEventListener() is the go-to method, but there are a few different methods such as, event handler properties (onClick or something similar after on, and then appended to a named function) and inline event handlers, which are not recommended at all and considered bad practice.
Disadvantages include, but not limited to; not being able to add multiple listeners for one event, can become unmanageable, inefficient, and easily illegible from mixing HTML and JavaScript in the same file.
Parameter specified in the event handler function that is inherited directly into event handlers themselves. Usual naming schemes will be, the event object then the property referencing the element the event took place. eventObject.property.
Choose a name you can easily reference inside the event handler function; e, evt, and event are most common.
The Event reference page contains a list of properties and methods available for use.
Through data validation features, we as the developer, are able to plan and account for when the input is not as expected and therefore preventing the standard behavior and events.
preventDefault() is the function we’d call upon when input does not fit where we expected a certain value or other input.
Events exist far and wide outside of JavaScript; many programming languages cater to some sort of event model and each is different. Node.js and WebExtensions are two examples of many others.
addEventListener() method, what 2 arguments will you need to provide?
Event objects preventDefault() creation (loop like?)