reading-notes

Reading 9 - Forms and JS Events

HTML Forms

Source: MDN, Your first form

Q1 Why are forms so important in web development?

Forms are important because they are one of the main points of interaction between a user and a website or application. They allow users to input data, which is usually either sent to a web server or used on the client-side immediately to update the interface.

Q2 When designing a form, what are some key things to keep in mind when it comes to user experience?

Source: Smashing Magazine, UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 1)

• Visually grouping fields that belong together will also help users fill a form.

• Display only the fields that people need, and ask for optional things at the end

• Present fields in a single-column layout.

• In portrait mode, display the label on top of the field. In landscape mode, put labels on the left and inputs on the right.

Q3 List 5 form elements and explain their importance.

Source: MDN, How to structure a web form

• : Formally defines a form and attributes that determine the form's behavior. Each time you want to create an HTML form, you must start it by using this element, nesting all the contents inside.
• : a convenient way to create groups of widgets that share the same purpose, for styling and semantic purposes.
• : formally describes the purpose of the

  it is included inside.

• : the formal way to define a label for an HTML form widget.

• : where the user enters the data.

Learn JS

Source: MDN, Introduction to events

Q4 How would you describe events to a non-technical friend?

Events are user interactions that you write your code to prepare for, such as a user clicking a button.

Q5 When using the addEventListener() method, what 2 arguments will you need to provide?

Source: w3, HTML DOM Element addEventListener()

• The event type to listen for

• The function that will run when the event occurs

Q6 Describe the event object. Why is the target within the event object useful?

The event object is an object that contains information about the event that has occurs.

The target tells you which HTML element was interacted with and triggered the event.

Q7 What is the difference between event bubbling and event capturing?

Event bubbling describes how the browser handles events targeted at nested elements. Event capturing is like event bubbling but the order is reversed: so instead of the event firing first on the innermost element targeted, and then on successively less nested elements, the event fires first on the least nested element, and then on successively more nested elements, until the target is reached.

Things I want to know more about:

• Event objects, event bubbling, and event capturing