Code Fellows 201
Day 09 Notes
Home
Reading
HTML Forms
Your first Web Form. How To Structure A Web Form.
- Web forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see Sending form data later in the module), 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).
- 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.
- All forms start with a <form> element. 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. All of its attributes are optional, but it’s standard practice to always set at least the action and method attributes:
- The action attribute defines the location (URL) where the form’s collected data should be sent when it is submitted.
- The method attribute defines which HTTP method to send the data with (usually get or post).
-
The <label>, <input>, and <textarea> elements
Our contact form is not complex: the data entry portion contains three text fields, each with a corresponding <label>:
-
The input field for the name is a single-line text field.
-
The input field for the e-mail is an input of type email: a single-line text field that accepts only e-mail addresses.
-
The input field for the message is a <textarea>; a multiline text field.
- The <button> element allows the user to send, or “submit”, their data once they have filled out the form. This is done by using the <button> element
Learn JS
Introduction To Events.
How would you describe events to a non-technical friend?
- events are the actions that we want the computer to respond to
- 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.
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
- 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.
- The target property of the event object is always a reference to the element the event occurred upon.
What is the difference between event bubbling and event capturing?
-
When an event is fired on an element that has parent elements (in this case, the <video> has the <div> as a parent), modern browsers run three different phases — the capturing phase, the target phase, and the bubbling phase.
-
In the capturing phase:
- The browser checks to see if the element’s outer-most ancestor (<html>) has a click event handler registered on it for the capturing phase, and runs it if so.
- Then it moves on to the next element inside <html> and does the same thing, then the next one, and so on until it reaches the direct parent of the element that was actually clicked.
-
In the target phase:
- The browser checks to see if the target property has an event handler for the click event registered on it, and runs it if so.
- Then, if bubbles is true, it propagates the event to the direct parent of the clicked element, then the next one, and so on until it reaches the <html> element. Otherwise, if bubbles is false, it doesn’t propagate the event to any ancestors of the target.
-
In the bubbling phase, the exact opposite of the capturing phase occurs:
- The browser checks to see if the direct parent of the clicked element has a click event handler registered on it for the bubbling phase, and runs it if so.
- Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the <html> element.
-
In modern browsers, by default, all event handlers are registered for the bubbling phase. So in our current example, when you click the video, the event bubbles from the <video> element outwards to the <html> element. Along the way:
- It finds the click handler on the video element and runs it, so the video first starts playing.
- It then finds the click handler on the videoBox element and runs that, so the video is hidden as well.
Bookmark and Review
HTML5 Input Types
Event Reference and listings