Read: 09 - Forms and JS Events

HTML Forms

Why are forms so important in web development? Web forms are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).

When designing a form, what are some key things to keep in mind when it comes to user experience? Before starting to code, it’s always better to step back and take the time to think about your form. Designing a quick mockup will help you to define the right set of data you want to ask your user to enter. From a user experience (UX) point of view, it’s important to remember that the bigger your form, the more you risk frustrating people and losing users. Keep it simple and stay focused: ask only for the data you absolutely need. Designing forms is an important step when you are building a site or application. It’s beyond the scope of this article to cover the user experience of forms.

List 5 form elements and explain their importance. <form> This element formally defines a form. It’s a container element like a <section> or <footer> element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves, The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered. When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device , element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent; The element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes., element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form., and <button> element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs a programmable action, such as submitting a form or opening a dialog.</button>

Learn JS

How would you describe events to a non-technical friend? Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them. For example, if the user clicks a button on a webpage, you might want to react to that action by displaying an information box. In this article, we discuss some important concepts surrounding events, and look at how they work in browsers. This won’t be an exhaustive study; just what you need to know at this stage.

When using the addEventListener() method, what 2 arguments will you need to provide? Inside the addEventListener() function, we specify two parameters: the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it.

Describe the event object. Why is the target within the event object useful? Sometimes, inside an event handler function, you’ll see a parameter specified with a name such as event, evt, or e. This is called the event object, and it is automatically passed to event handlers to provide extra features and information.

What is the difference between event bubbling and event capturing? Event bubbling and capture are terms that describe phases in how the browser handles events targeted at nested elements.