1. JavaScript Forms
Adding User Input

2. Forms: Cubby holes in HTML
Remember that we need a place to get information and put it
Rather than variables, we can get and put data in forms
Lets users give input and let’s us return new values
Today, we read; Thursday, we write

3. Input Forms

4. User Input: Forms <form name=“formname”>
Just another way to collect pieces together (like div, section)
Anything can be in there
Formatting just like all other elements
Always name forms

5. User input We’d like to let users give us information Request input
<input type="text" name="name">
Lots of types
Use name to identify the element

6. Naming Elements Reference value through CONTEXT:
<form name=“form-name”>
<input type=“text” name=“field-name”>
</form>
Reference value through CONTEXT:
form-name.field-name.value

7. Retrieving the value form-name.field-name.value
Note that the first 2 parts of this are just normal selector notation (like you use in css)
The .value is to be used exactly and says to use that tag’s value
(Note this is only the first and simplest way to access information)

8. Input attributes

9. Labeling Elements <form name=“fname”> <label> Label:
<input type=“text”>
</label>
</form>
No formatting, but accessibility gains

10. Default Values
<form name=“fname”> <label> Label: <input type=“text” value=“COMP”> </label> </form> Sets default value, but can be changed

11. Hint Text Gives text but never passed as value
<form name=“fname”>
<label>
Label:
<input type=“text” placeholder=“department”>
</label>
</form>
Gives text but never passed as value

12. Other Input Types

13. Many Element Types
Button color date datetime datetime-local file image month number
password radio range  reset search tel text time  url week