ITSE 1411 Beginning Web
JS Form Text and Password Boxes Chapter 5 Discussion

Textbook Clarifications

Discussion
  1. Forms
    • A form is a page that uses elements (or fields) to collect or display data. JavaScript is often used with forms to validate input before it is submitted to a server for further processing.

      To access form elements and validate data, you use the Form object. The Form object is part of the browser object model discussed in chapter 4.

  2. Referencing form elements
    • The first form in a document is referred to as document.forms[0]. Do not confuse the fact that although you may have more than one form on a page, this does not mean that you must have multiple forms on a page. For our assignments, you will have one set of form tags per page.

      When an element has no name or id, you may access that element with the order that the element is coded on the page (not the viewable order since that can change using CSS). Additionally, you may use the elements array (which refers to all elements) to access each element of the form. The drawback from using the elements array occurs when you wish to make a change to the form. When that happens, you must change the reference to all elements that are in a new order.
  3. Form examples
    • Resize this page to take up the left half of the screen.
    • Open form example using text boxes.
    • View the source code of the form example.
    • Resize the window of the source code to the right half of the screen.
    • Explanation of the form on the textboxesExample.htm page
      • form is the html block element tag used to contain the form elements.
        • In XHTML5, the action attribute is not required.
        • The action attribute is used to submit the elements and the entered values in those elements for further processing.
        • When you are not sending the data to another page or file on the server, then you may set the action to a null value
          action=""
      • The form elements must be contained inside a block element. You can use div element. This example uses a p tag.
      • input element uses the type attribute
        • One input element is the text type, which creates a text box and allows the user to enter text.
        • The optional value attribute of the input element can contain a default value, meaning it is declared as
          • value = "Enter name here"
          and is the value shown in the text box when the page renders. However, when the user enters text, the value will then be equal to the text entered by the user. Sometimes instructions to the user are entered as the value in a text box.
        • To be able to access the element you can assign the optional name attribute, which is used as an identifier of the element. Identifiers can only use uppercase, lowercase, numerical values, and underline. No special characters except for the underline "_" (this means no spaces) can be used in the identifier.
        • The name attribute does not validate in XHTML strict with the form element. In HTML5 you may use both the id and the name attribute.
        • The optional attribute size determines the width of the text box. When size is not used, the default size is 20 characters. (Can be a different number depending on the browser.) When a size is not limited, then characters are allowed to be entered, but the characters will scroll left out of the text box.
        • The optional attribute maxlength limits the number of characters a user may enter. Sometimes you do not want to limit the number of characters because you can accommodate more data.
        • The input tag is self-closing, this means that at the end of the tag you put a space and a slash / before the tag close >. (not required in HTML5)
      • Close the block element tag that contains your form elements.
      • Close your form tag.
  4. The Password Box
    • The password box is created similarly to the text box. Each character entered into the password box appears as an asterisk or bullet. In the subscription example, the text only tests the confirm password field. It does not test correctly if the user enters the password and confirm password fields out of order. The coding for that is a little more intricate; so do not be concerned that the complete verification is not really done.