3 November Building an Interactive Web Page: HTML Forms

Caveat There are lots of differences between browsers What I’m going to describe works for HTML 4 on Mozilla No guarantees on other browsers That’s why some pages don’t work on Mozilla but only Internet Explorer

Standards What is a standard? 3 : something established by authority, custom, or general consent as a model or example 4 : something set up and established by authority as a rule for the measure of quantity, weight, extent, value, or quality 5 a : the fineness and legally fixed weight of the metal used in coins

Standards Compliance When people want to connect to each other, they abide by standards When people get an advantage by having other program run on their machines, they abide by standards When people think they have the upper hand and want to keep a captive audience, they may ignore standards

Standards in Computers Hardware: Good compliance Third party providers Reduced cost of commodities Software: Mixed bag Lots of standards (IEEE, IETF, W3 Consortium, …) Lots of standards Microsoft, adobe set de facto standards Danger: they can change them when they want Networking and web are among the best observed standards Why?

Creating Interactive Pages Need way to accept inputs way to calculate new values way to display outputs HTML forms Javascript

HTML Forms Syntax … Primarily a grouping mechanism id names the grouping. We won’t be taking advantage.

Types of Inputs Radio Buttons (select one of a list) Buttons (click on or off) Text inputs (user types text) Checkbox (select as many as wanted) Select List (select from a list) Place to try out different forms:

Radio Buttons Syntax <input type=“radio” name=“name for all buttons” value=“value to be assigned” [checked]> What it does Lets the user choose exactly one value Checked indicates the initial value Does not create any text How it does it Name becomes a variable When this button is chosen, that is the value assigned to the variable

Storing information How computers work Set of locations that store values Locations referred to as memory Refer to the place, not the value Similar to a person that holds a position Refer to the position and it implies the person: “the President” Changes over time We’re now going to name the location

Variables The location is referred to as a variable A variable’s name is called an identifier Usually do not need to distinguish the two Select a name that will remind you how it is used: size, weight, error_count

Checkbox Syntax <input type=“checkbox” name=“name for this option” [checked]> What it does Lets the user choose as many as wanted Checked indicates the initial value Does not create any text How it does it Each box is it’s own variable When the box is selected, the value is set to true

Text box Syntax <input type=“text” name=“name for this field” [value=“initial value”]> What it does Lets the user type in data Optional initial value Does not create any text How it does it Own variable Value is the entered text