Project Overview: Creating Forms with JavaScript

This project will test your knowledge of parsing through an array of data and appending it to the DOM.

Learning Objectives

• Learn how the browser interprets HTML, CSS, and JavaScript text files to create the Document Object Model (DOM).
• Demonstrate how to use JavaScript to manipulate the DOM and produce a web page.

What is the DOM?

• The Document Object Model (DOM) is a tree structure representation of your HTML document.
• When the browser loads all of the HTML, CSS, and JavaScript text files, it reads them in the order presented and uses that information to create the DOM.
• The browser constructs the DOM by parsing the HTML document and creating a "Node" for each element it finds.
  • Nodes are JavaScript objects that represent things like elements, attributes, and styles.
• You can use DOM commands to create, edit, and traverse the DOM.

Creating, Updating, and Removing DOM Nodes

• Creating New DOM Nodes To update a page with new content, you must create a node to contain that content.

• Inserting New DOM Nodes into the Page When new nodes are created, they aren't automatically attached to the page. You have to include them by manually appending them to a parent node.

• Deleting DOM Nodes Sometimes, you may need to remove a node from the page entirely.

• Altering Properties of Nodes Creating and inserting nodes won't always accomplish all of your aims. You may also need to update the text of a node, or add attribute values.

Creating a Form in HTML

HTML forms are an integral part of virtually every webapp on the web. They allow our applications to collect, update and delete information and are the principal way that users interact with databases and other server-side technologies. Without forms, we wouldn't have paid services, e-commerce, or social media.

The vast majority of our interaction with the web and applications is through forms. Well made forms create a seamless and effective user experience because good forms ask the right questions and use the appropriate input controls to collect data.

A good form is a powerful data collection tool, but to get the most out of your forms, you need to understand the nature of the data being collected. A semantic approach to choosing which input controls to use will go a long way toward the creation of usable and functional web forms.

How do forms work?

Forms contain a set of input controls that users can enter data into. Examples of input controls might be:

• A field where a user enters some text, like their name.
• Drop-downs that allow users to select from a set of predetermined values, e.g. "Select your state..."
• Checkboxes to select or de-select options, e.g. "Do you agree to our terms of service..."
• User clicks a "Submit" button