1. JavaScript Forms
Adding User Input

2. Input Forms

3. 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

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

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

6. 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)

7. Button or input type=button?
Always put onclick first in either case
Generally, use input in form, button outside
Button tag
Always set attribute type
button: general purpose
reset: clear all fields in the form

8. Input attributes

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

10. Default Values
<form> <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>
<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 checkbox color date  datetime  datetime-local    file image month  number 
password radio range  reset search tel text time  url week

14. Select
Drop-down list
Supports autocomplete

15. Select Example
<form> <select> <option>Internet Explorer</option> <option>Firefox </option> <option>Chrome </option> <option>Opera </option> <option>Safari </option> </select> </form>

16. Another CSS Capability

17. Selecting based on attributes
tag[attribute=“value’]
Formatting only applies to tages with that attribute value
Tag.classname is same as
Tag[class=“classname”]
Other options (rarely used)
tag[attribute]: if the attribute is used
Not
Begins with
Ends with …
w3schools