Forms are important in web development because, for the front-end, it provides the web page a way to interact and get data from the user.
Some key things to keep in mind when designing a form is the key information you need from the user, the simplicity of the form, and its focus.
<!-- This container tag will define the form -->
<form action="/form-submission-page" method="post">
<!-- The attributes action and method should always be set in a form -->
<!-- the label tag creates a label for its corresponding data input tag (with matching id's)-->
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
<!-- The input tag will be the point of data entry for your form-->
<!-- the fieldset tag is a convenient element used to group together widgets/inputs that share the same purpose, -->
<fieldset>
<legend>Favorite Color</legend>
<!-- The legend is like a label for the fieldset -->
<label for="color_red">Red</label>
<input type="radio" name="color" id="color_red" value="red">
<label for="color_blue">Blue</label>
<input type="radio" name="color" id="color_blue" value="blue">
</fieldset>
<button type="submit">Submit message</button>
<!-- The button element will submit the data once the form is filled out -->
</form>
The way I would describe events to a non-technical friend would be really simple and high level. I would explain to them, that when they click their mouse, scroll their wheel, or even move their mouse into a certain area of a webpage, that is an event in programming.
You will need to provide the name of the event and a function to handle the event.
document.body.addEventListener('click', fireClickFunction)
The target property of the event object is useful because it is a reference to the element that the event is occurring on.
Event bubbling and capturing are outdated and have been combined but.
The difference between event bubbling and event capturing is:
With event bubbling, when we assign the same event handlers to an element, and its parents, the event fires on the child element first then bubbles up to its parents.
With event capturing, the reverse happens, the event fires on the parents first then goes down to its child.
References