reading-notes

HTML Forms

Why are forms so important in web development?

User input: Forms allow users to input data or provide feedback, making it possible to create interactive websites that respond to user input. Data collection: Forms allow you to collect data from users, which can be used to gain insights into user behavior, preferences, and needs. This data can be used to improve website functionality, design, and content.

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

Keep it simple: A form should be easy to understand and fill out. Avoid using jargon or technical terms, and keep the number of fields to a minimum.

Use clear and descriptive labels: Use labels that clearly describe what information is required in each field. Consider using examples or placeholder text to help users understand what they should enter.

List 5 form elements and explain their importance.

Text input: Text input fields allow users to enter text, such as their name, address, or email. These fields are essential for collecting information from users and are often used in contact forms, registration forms, and login forms.

Checkboxes: Checkboxes allow users to select one or more options from a list of choices. They are useful for collecting user preferences or allowing users to select multiple items, such as products or services.

Radio buttons: Radio buttons allow users to select a single option from a list of choices. They are useful when only one option should be selected, such as selecting a payment method.

Dropdown lists: Dropdown lists provide a list of options for users to choose from in a compact format. They are useful for conserving space on the page while still allowing users to select from a list of options.

Submit button: The submit button triggers the form to be submitted and processed by the server. It is essential for completing transactions, submitting feedback, or registering user accounts.

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

Events are an important part of creating interactive and dynamic websites and applications. By responding to user actions with specific behaviors or actions, events help create a more engaging and personalized user experience.

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

The first argument is the type of event you want to listen for, such as “click”, “mouseover”, “keydown”, etc. This specifies what type of action should trigger the event listener.

The second argument is a function that specifies what action should be taken when the event occurs. This function is sometimes referred to as the event handler or callback function. It contains the code that should be executed when the specified event is triggered

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

In JavaScript, when an event occurs, an event object is created and passed to the event listener or callback function. This event object contains information about the event that occurred, such as the type of event, the target element, the position of the mouse, and so on.

One of the properties of the event object is target, which refers to the element that triggered the event. This property is useful because it allows you to access the element that the event occurred on and to manipulate it in some way. For example, you might use the target property to change the style or content of the element, add or remove a class, or perform some other action in response to the event.

What is the difference between event bubbling and event capturing?

Event bubbling is the most common form of event propagation in which an event starts at the most specific element (e.g., a button) and then “bubbles up” through its ancestors (e.g., its parent, its grandparent, etc.) until it reaches the topmost element (e.g., the document object). This means that the event handlers of the ancestor elements are called in order of their nesting. event capturing works in the opposite direction. The event starts at the topmost element (e.g., the document object) and then “captures” the event as it propagates down to the most specific element (e.g., a button). This means that the event handlers of the ancestor elements are called in the opposite order of their nesting.