Forms and Functions -- Text Boxes and JavaScript Functions

Discussion

Forms
- A form is a page that uses elements (or fields) to collect or display data.
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 order for a form to validate in strict XHTML, you must include a action attribute
    - 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 should set the action to a null value
      action=""
  - The form elements must be contained inside a block element. You can use div. this example uses a p tag.
  - input element depends on the type attribute
    - One type of the input element is the text which creates a text box and allows the user to enter text.
    - The value attribute of the input element can contain a default value, meaning it is declared as
      - value="someValue"
      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.
    - To be able to access the element you can assign the optional name attribute an identifier. Identifiers can only use uppercase, lowercase, and numerical values. No special characters except for the underline "_" (this means no spaces) can be used in the identifier.
    - The optional attribute size determines the width of the text box. When size is not used, the default size is 20 characters.
    - The optional attribute maxlength limits the number of characters a user may enter.
    - The input tag is self-closing.
  - Close the block element tag that contains your form elements.
  - Close your form tag.
- Close the source code and the window for textboxesExample.htm.
- Open form example using text boxes and the focus event handler..
- 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 controlFocusExample.htm page
  - Events and Event Handlers
    - An event is an action that occurs on your page. Often that action is initiated by the user.
    - An even handler is the code written to respond to the event that occurs. The event handler is identified by the characters on followed by the event name.
    - Events are associated with HTML elements
    - The load event and onload event handler
      - The load event occurs when a document or image loads (renders in the browser).
      - The onload event handler responds to the event and is an attribute of the body tag or the img tag.
      - The syntax for the onload event handler for the body tag is
        
        <body onload="JavaScript code">
  - What is JavaScript?
    - Always runs within a web page. Cannot run independently.
      - A client-side scripting language.
      - Used to create interactive pages.
      - Code contained inside HTML script tags.
        
        The script tag either contains scripting statements or it points to an external script file through the src attribute.
        
        Use the type attribute and assign the value "text/javascript" written
        <script type="text/javascript">
      - The W3C does not validate JavaScript code.
    - Possible data interpretation problems
      - The browsers recognize two types of data.
        
        PCDATA -- parsed character data
        
        Allows html tags to work and recognizes the < and > angle brackets as denoting an html tag.
        
        CDATA -- character data
        
        JavaScript can be written to include HTML elements. But when it is, it confuses the browser because the angle brackets are recognized as PCDATA. To instruct the browser to treat the code as CDATA you must create a block of CDATA.
        
        Immediately below the open script tag write
        /* <![CDATA[ */
        Immediately before the close script tag write
        /* ]]> */
      - Unlike HTML, if you make an error in your JavaScript code, it is likely that the page will not render, or will not render as expected.
  - JavaScript functions (methods)
    - The JavaScript code assigned to an event handler is usually a function call, meaning that the actual JavaScript code is not executed until it is "called". In this case, when the event load occurs, the function setFormFocus() executed.
    - For oganizational purposes and to keep your html code in your form easy to read, functions are placed in the head section of the page.
    - A JavaScript function uses the keyword function to tell the browser that this code is not executed until it is called.
    - The name of the function (the identifier) is always followed by parentheses. These parentheses are called a parameter list. When there is nothing inside of the parentheses it is called an empty list.
    - All statements associated with the function are contained inside curly braces.
    - The browser has some built-in methods that you can use. One is the focus() method that places the cursor in a designated form field.
  - Document Object Model (DOM)
    - DOM is a platform that allows scripts to dynamically access elements in a web page to update the content and format.
    - Sometimes called DHTML, Dynamic HTML
    - Each element in a web page can be located by its position or name.
    - When referring to an element of a page you indicate the document, the name or position of the form, the name or position of the element, and the attribute that you are using. For instance, if you want to display the value of the visitor_name in the controlFocusExample.htm page you would write
      - document.write("<p>" + document.forms[0].visitor_name.value + "</p>");
    - You will often see examples of form code that use the name attribute in a form, such as, name="studentForm". However, using the name attribute in the form tag has been deprecated in XHTML strict.
    - Any place where the name of the form is used, substitute forms[0] which points to the first form on the page. (Programmers start counting with 0, not 1.) For Example, to access the value entered in visitor_name when the name="myForm" attribute is used in the form tag you would enter:
      - document.myForm.firstName.value
      To access that same element using XHTML strict you would enter:
      - document.forms[0].firstName.value
  - By combining event handlers, DOM, and the focus() method, you can open a web page and place the cursor in a designated form field.

Practice:

Create a folder named public_html in your H drive.
Invoke the Less Than Slash editor, not Notepad.
Click on template
Right click and view source.
Save the source in a folder named public_html on your H drive.
Open your template.htm page in LTS.
Save the page as schoolSpirit.htm
Create a schoolSpirit.htm page with the following requirements:
- A heading appropriate for an enrollment for a School Spirit Club application.
- An image of the school mascot.
- A form to gather student information
  - A textbox for the student's name.
  - A textbox for the student's second period room number.
  - A textbox for the student's grade classification.
  - A textbox for the student's grade point average.
- The form should focus on the student's name.
Make sure that your page validates. In LTS, click Tools, W3C Validate. Make any corrections necessary.