Reading
Design Text, Chapter 13 pgs 239 - 264 (Forms)
The text uses form elements when explaining functions and functions when
explaining form elements.
This makes both topics a little confusing, but that is why I listed Chapter 5 before
Chapter 3 for reading.
JavaScript Text, Chapter 5 pgs 223 - 236 (Forms, Text Boxes), 239 - 240 (Push buttons)
JavaScript Text, Chapter 3 (Functions and Events), pgs 115 - 129
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 an 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 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
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 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 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, this means that at the end of the tag you put a space and a slash / before the tag close >.
- 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. Notice the blinking cursor in the name text box.
- 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 event 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">
- 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() executes.
- For organizational purposes and to keep your html code in your form easy to read, functions are placed
in the head section of the page.
- Now look in the head section to view the function setFormFocus(). 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.
- The form example on page 231 has action="FormProcessor.html". This means that when the form is submitted
the data gathered in the form is sent to a page called FormProcessor.html. Follow the steps given using
FormProcessor for this assignment. The way the page works will be explained in another assignment.
- The Subscription.html page on pages 235 - 236 used a table. This was used for alignment. The form elements
could have been inside paragraph tags.
- The button example on page 240 uses an alert box. The alert box is a great debugging tool (helps you find errors).
You can use an alert box to show where you are in your code and what the values are at the point in your coding.
Practice:
- Forms
- Create an assignment5 folder (no spaces in the name, no uppercase) in your public_html folder.
- Subscription page
- Open your template.htm page in your editor.
- If you give the form a name, you must make changes in the DOCTYPE. Change the two occurrences of
strict and Strict to transitional and Transitional.
- If you refer to the form as forms[0], you may keep your DOCTYPE as strict.
- Save as subscription.htm in your assignment5 folder.
- Add the coding from pages 230 and 231 of the text.
- Add the coding from pages 235 - 236 of the text.
- Save the document.
- Compare your page to Figure 5-5 page 236.
- As shown the form gathers data, but goes nowhere and does nothing.
- Calling Functions
- TwoFunctions page
- Open your template.htm page in your editor.
- Save as twoFunctions.htm in your assignment5 folder.
- Add the coding from pages 119 and 120 of the text.
- Save the document.
- Compare your page to Figure 3-2 on page 120 of the text.
- Reference Web Page Elements
- Calculator page
- Open your template.htm page in your editor.
- If you give the form a name, you must make changes in the DOCTYPE and change the two occurrences of
strict and Strict to transitional and Transitional. (This is not necessary if you are using forms[0] to
access your form.
- If you refer to the form as forms[0], you may keep your DOCTYPE as strict.
- Save as calculator.htm in your assignment5 folder.
- Add the coding from pages 127 - 129 of the text.
There is a typo page 128, step 5.
You can put the form tags inside the div tags, but for steps 6 - 10, the input tags must
be inside another block element. The easiest solution is to change step 5 to have the form
tags as the outer tags and the div tags as the inner tags. Or, you could just add another set of div tags
inside the form tags.
- Be careful on steps 8 and 9. If you put a space before and after the numeric or decimal point in the call to
updateString(), your calculator won't work correctly.
- Save the document.
- Compare your page to Figure 3-5 on page 129 of the text.
Case Project:
- Begin Case Project 3-1 found on page 169 of your text. It will be completed in Assignment 6.
- Open your template.htm page.
- If you give the form a name, you must make changes in the DOCTYPE. Change the two occurrences of
strict and Strict to transitional and Transitional.
- If you refer to the form as forms[0], you may keep your DOCTYPE as strict.
- Save as calcShipping.htm in your assignment5 folder.
- Make your page look like the screen shot below.
- Your first step in solving the problem will be to call a function when the button is pressed.
- Hint: When you call your function, use the onclick event handler. The argument will be
the value entered in the text area, for example
onclick="doCalculations(document.calcShipping.amount.value)"
This assumes that your function is named doCalculations, your form is named calcShipping, and
your text area is named amount.
or in strict XHTML
onclick="doCalculations(document.forms[0].amount.value)"
- Your function header should have an argument that receives the value that is sent from the function
call. In your function, display a message that states what amount was entered by the user.
You will complete writing the function once you learn to use selection.
Update your index page:
- Add links on your index page to the pages in your assignment5 folder that are to be graded:
- subscription.htm
- twoFunctions.htm
- calculator.htm
- calcShipping.htm
Uploading:
- Upload your revised index.htm page to the public_html folder.
- Upload your assignment5 folder with the files:
- subscription.htm
- twoFunctions.htm
- calculator.htm
- calcShipping.htm
Testing uploaded pages
- Follow the checklist for grading shown on
the schedule page.
- Make any corrections for any page that does not validate or display correctly.
