JavaScript Forms Adding User Input

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

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

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)

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

Input attributes

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

Default Values <form> <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> <label> Label: <input type=text placeholder=“department” /> </label> </form> Gives text but never passed as value

Other Input Types

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

Select Drop-down list Supports autocomplete

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

Another CSS Capability

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