JavaScript Forms Adding User Input

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

Input Forms

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

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

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

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)

Input attributes

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

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

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

Other Input Types

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