Java Script Forms Adding User Input Input Forms

Java. Script 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 <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 <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 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 … w 3 schools