Forms and JS Events

HTML & CSS - Jon Duckett

• Chapter 7: Forms

  • HTML uses the concept of a form to refer to different elements that allow you to collect info from visitors of your site. It uses the < form > element

  • Form controls:

    • Adding text, making choices, submitting forms, uploading files

  • How forms work:

    1. A user fills in a form and then presses a button to submit the info to the server

    2. The name of each form controls is sent to the server along with the value the user enters or selects

    3. The server processes the info using a programming language (PHP, C#, VB.net, Java). It may also store the info in a database

    4. The server creates a new page to send back to the browser based on the info received

  • Info from a form is sent in name/value pairs

• Chapter 14: Lists, Tables, and Forms

  • Lists, tables, and forms can all be formatted for your liking using CSS

  • List markers can be given differnt appearances using the list-style-type and list-style image properties

  • Table cells can have different borders and spacing in different browsers, but there are properties you can use to control them and make them more consistent

  • Forms are easier to use if the form controls are vertically aligned using CSS

  • Forms benefit from styles that make them feel interactive

JavaScript - Jon Duckett

• Chapter 6: Events

  • Events are the browser’s waya of indicating when something has happened

    • Example: when a page has finished loading or a button has been clicked

  • Binding is a process stating which event you are waiting to happen, and which element you are waiting for that event to happen upon

  • When an event occurs on an element, it can trigger a JS function, which in turn changes the web page in some way, and makes it feel interactive because it has repsponded to the person viewing the web page

Information taken from “HTML & CSS Design and Build Websites” and “Javascript & JQuery Interactive Front-End Web Development” by Jon Duckett