Code 201: Class 09 - Forms and Events

---

Read: HTML pp 144-175

Forms allow you to collection information from the user

• Form Structure
• <form action="URL" method="get"><p>This is where the form controls will appear.</p></from>
  • action links to the page the page on the server that will receive the information
  • method can use get or post, get better for short forms and nonsensitive info, post better for the other
• id used to identify the form specifically from other elements
• size old tag no longer used, specifies the width of text input boxes in character widths
• <input type="text" name="username" size="15" maxlength="30"/>
  • type="text" creates single line text input
  • name identifies the form control
  • maxlength sets a maximum number of characters that can be entered into the text box
  • type="password" acts like a single line text box, but characters are blocked out -<textarea>Enter text prompt here...</textarea> element used to create a multi-line text input
• Radio Button
  • type="radio" allows user to pick one of a number of items
  • value="example" contains the value that should be sent to the server when selected
  • checked indicates which radio button should be preselected on page load
• Checkbox
  • type="checkbox" allow user to select one or more answers to a question
• Drop Down List
  • <select><option value="example1>Example 1</option></select> select tag creates drop down menu, option tags create each menu option
• File Input Box
  • <input type="file"/> creates a text window with a browse… button for uploading a file
• Submit Button
  • type="submit" used to send form to server
• Image Button
  • type="image" allows you to use an image as the submit button
• Button and Hidden Controls
  • <button></button> can combine images and text between the tags to influence button appearance
  • type="hidden" allow page authors to add values to forms that users cannot see
• Labelling Forms
  • <label></label> used to label form fields
• Grouping form elements
  • <fieldset></fieldset> groups form items together
  • <legend> caption for the fieldset that indicates info about group of form items
• Placeholder
  • placeholder="example" any text input allows the use of placeholder which puts temp text in the input box on page load, disappears when user clicks on it

Read: HTML pp 330-357

Bullet Point Styling

• { list-style-type: ;} can be applied to <ol> <ul> <li> items
  • unordered lists can have styles: none, disc, circle, square
  • ordered lists can have: decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman
• Can use an image as a bullet point
  • ul{list-style-image: url("images/example.png");} allows author to set image as bullet point
• {list-style-position: ;} default is outside can be set to inside which would bring the point inside of the text box
• Shorthand *allows you to define multiple list-style options on a single line {list-style: inside circle;}

Table Properties

• width sets width of table
• padding sets space between content and border
• text-transformation convert content of table headers to uppercase
• letter-spacing, font-size to add additional styling to the content of the table headers
• border-top, border-bottom to set borders above and below table headers
• text-align align text left, center, or right
• background-color use to change the background color of rows or cells
• :hover highlight a table row when a user’s mouse goes over it
• Border on empty cells
  • show, hide, or inherit controls cell borders on empty cells
• Gaps between cells
  • collapse pushes cells together and merges their borders to a single width
  • separate puts margin between cells

Form Styling

• font-size controls font size of entered text
• color sets text color
• background-color sets input box background color
• border-radius rounds the corners of an input box
• :focus pseudo-class used to change the color of the input box when it is being used
• :hover pseudo-class applies styles when hover over input box
• background-image adds background image to the input box

Cursor Styles

• {cursor: example;} makes the cursor show up with a specific style or image when located above a specific element
  • auto, crosshair, default, pointer, move, text, wait, help, url("cursor.gif")

Read: JS pp 243-292

How events trigger JS code

• 1. Select element node that you want script to respond to
• 1. Indicate which event on the node will trigger response, “binding”
• 1. State code that should run when event occurs

Event Handlers

• HTML Event Handlers bad practice
  • a set of html attributes that triggered actions when specific elements were involved
• Traditional DOM Event Handlers original specification for the DOM
  • Allows JS to separated from html
  • Support on all browsers
  • Limitation, can only attach single function to an event
• DOM Level 2 Event Listeners this is now the favored wat of handling events
  • one event may trigger multiple functions, reduces potential conflicts

Traditional DOM Event Handler

function checkUsername() {
  //code to check the length of username
}
var el = document.getElementByID('username');
el.onblur = checkUsername;

• Lines 112-114: starts by defining the named function
• Line 115: reference to the DOM element node, often stored as a variable
• Line 116: function is called by the event handler on the last line, parentheses omitted

Event Listener

• Syntax example: element.addEventListener('event', functionName [,Boolean]);
  • element DOM element node to target
  • addEventListener('event, functionName [, Boolean]); Method, adds an event listener to the DOM element node
  • event event to bind nodes to
  • functionName name of function to call
  • [, Boolean] indicates something called capture and is usually set to false

Event Bubbling *event starts at the most specific node and flows outwards towards the least specific

Types of Events

• W3C DOM Events
• HTML5 Events
• BOM Events Browser Object Model

User Interface Events

• load fires when the page has finished loading or other specific nodes that finish loading
• unload fires when the webpage is unloading
• error fires when browser encounters a javascript error or an asset that is missing
• resize fires when teh browser window has been resized
• scroll fires when the user scrolls up or down

Focus and Blur Events

• focus when an element gains focus, focus event fires for that DOM node
• blur when an element loses focus, the blur event fires for that node
• focusin same as focus except not supported on firefox
• focusout same as blur except not supported on firefox

---

Return to reading-notes Deployed Site

Return to reading-notes Mark Down