reading-notes

Reading 9

HTML Forms

Your first web form

Why are forms so important in web development?

• they are one of the main points of interaction between a user and a website or application
• allow users to enter data which is generally sent to a web server for processing and storage or used on the client side immediately to update the interface in some way

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

• keep it short, keep it simple
  • long forms rist frustrating people and alienating users
  • only ask for the data you need

List 5 form elements and explain their importance.

• label does exactly that
  • definse the purpose of that input area
• input defines the type of input being provided; text, email
  • a single line area that only accepts that specific type of input
• textarea is a multiline text field, think comment or message area
• button allows the user to send or “submit” their data once they have filled out the form.
  • can be a submit, reset, or anything button that you design the function for with JS
• fieldset element is a convenient way to create groups of widgets that share the same purpose for styling and semantic purposes. You can label a fieldset by including a legend element just below the opening fieldset tag

Learn JS

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

• I wouldn’t…everyone rolls their eyes when I start nerding about code stuff…but if I did have to tell them I would say events are like when someone calls you and your phone rings or comes to your house and rings the doorbell. The caller or guest is doing something and letting you know via a system that is in place.

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

• a string that specifies the type of event you want to listen for; “click”, or something
• a function to call when the event happens

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

• specified with a name such as event, evt, or e and is automatically passed to event handlers to provide extra features and information
• target is always a reference to the element the event occured upon

What is the difference between event bubbling and event capturing?

• According to ChatGPT: Event bubbling and event capturing are two different ways that events can be propagated in the Document Object Model (DOM) hierarchy.

Event bubbling refers to the default behavior in which an event that is triggered on a child element “bubbles up” through its parent elements all the way to the top of the DOM hierarchy, triggering any event listeners that are registered on those elements along the way. In other words, when an event occurs on an element, it is first processed on the target element and then on each ancestor element in the DOM hierarchy, all the way up to the root element.

Event capturing, on the other hand, is the opposite of event bubbling. It refers to the process of capturing an event at the top of the DOM hierarchy and then propagating it down to the target element. In this case, the event is processed on the root element first and then on each descendant element all the way down to the target element.

To visualize the difference between event bubbling and event capturing, imagine a tree-like structure of nested HTML elements. When an event occurs on a specific element within this structure, event capturing would start from the root of the tree and work its way down to the target element, whereas event bubbling would start from the target element and work its way up to the root.

Both event capturing and event bubbling can be used to handle events in JavaScript, and which method you choose will depend on your specific needs. By default, most events use the event bubbling model, but you can use the addEventListener() method’s capture option to enable event capturing if you need it.