1 / 8

Form Components and Elements

This figure showcases various control elements commonly used in web page forms, including input boxes, selection lists, checkboxes, radio buttons, and more.

monikaj
Download Presentation

Form Components and Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. text box First Name Last Name Address #1 Address #2 State Zip City Country Item Purchased Purchase Date Serial Number drop-down list box group box Network Operating System (check all that apply) Used For (check one) Netware Home Banyan Vines Business Windows Religious or Charitable Institution radio buttons IBM Lan Server Government check boxes PC/NFS Educational Institution text area Comments?: Send Registration Cancel form button Form Components and Elements This figure shows a form that contains various control elements commonly used in Web page forms.

  2. Input boxes • Accept user inputs (~ form fields) • Text (default) • Password • Radio (one selection only) • Checkbox (multiple selection is allowed) • Selection list • Text Area

  3. Input boxes • Perform actions • Submit • Reset • Button • Others • Hidden

  4. Form objects 1. Input text box document.form_name.field_name e.g., document.Registration.FirstName • Properties: • value: what is being entered? • value.length: how many characters are being entered? • Methods: • indexOf(“character): returns the relative location of the character within the text entered • Events: • focus(): moving the cursor into the field • Event handlers: • onBlur: when the user left the field

  5. Form objects 2. Selection list document.form_name.field_name e.g., document.Registration.State • Properties: • selectedIndex: the index value of the currently selected option in the list (starts with 0) • options[index].value: returns the value property of an option in a selection list • options[index].text: returns the text (shown to the user) in a selection list

  6. Form objects 3. checkboxes document.form_name.field_name e.g., document.Registration.brkfst • Properties: • checked: returns true if the checkbox is selected else returns false

  7. Form objects 4. Radio button document.form_name.field_name[index] e.g., document.Registration.meal[0] • Properties: • checked: returns true if the button is selected else returns false

  8. Form objects 5. Input button • Event handler: • onClick 6. Entire form • Event handler: • onSubmit

More Related