The lesson source code utilizes a form to create a Purchase Order on a web page. Viewing the web page for this lesson may be helpful in comprehending the source code which appears in the above frame and the explanations of this code which appears in this frame.
The opening body tag sets the bgcolor (background color) attribute to the value of "ffffcc". This sets the background color for the web page. View this code in the above frame.
The next line of code utilizes the h2 tag pair and a font tag pair to center the text "Purchase Order" in the color of "red". View this code in the above frame.
The next two lines of code create a center aligned paragraph which displays the company name on the first line in the paragraph and the company address on a second line in the paragraph. View this code in the above frame. In the first line of code, a font tag pair sets the text color to "red" and the text size to "4" for the company name, "ABC's Book Store". A bold tag pair in the first line of code causes the company name to appear in the bold format. The second line of this code begins with a br (break) tag which causes the company address to be displayed on the second line in the paragraph. In this line of code, a font tag pair sets the text color to "red" and the text size to "1" for the company address, "123 Next Street, Anycity AW, 99999.
The next two lines of code create a center aligned paragraph, in bold format. The text in this paragraph displays the instructions for the utilization of this web page. Scroll to and view this code in the above frame.
The next line of code is an opening table tag. Scroll to and view this code in the above frame. This tag sets the width attribute to the value of 100% and the bgcolor (backgroundcolor) attribute to the value of "ffccff". Reminder; the "table" bgcolor attribute overides the "body" bgcolor attribute.
The next line of code is the opening form tag. Scroll to and view this code in the above frame. This tag sets the action attribute to the value of "mailto:webmaster@tecnetventures.com" and the method attribute to the value of "post". This tag and these attributes were presented and explained in Lesson 13 (refer to Lessons 13 if clarifications are required).
The next four lines of code create the first row of the table. Scroll all four lines of code into view in the above frame.
The first line of code is the opening tr (table row) tag.
The second line of code creates the first cell in this row. The opening td (table data) tag utilizez the width attribute to set the cell width to "10%" of the table width. The text, "Name", is an instruction to the user to enter his/her name in the text box (text field) which is in the following cell. This instruction is followed by the closing td tag.
In the next line of code, the opening td (table data) tag sets the colspan attribute to a value of "5". This tag is followed by the cell data which is an input tag with the type attribute set to the value of "text" (this value causes a text box to appear in the cell) and the name attribute set to the value of "purchaser". The input tag is followed by the closing td tag.
The table contains six cells (columns). The six cells are required later in the table. At this point, only 2 cells are needed, so the second cell spans the remaining 5 cells. A variety of formatting alternatives could be utilized in this table row.
One alternative would be to span the first three columns in the first td (table data) tag pair and span the last three columns in the second td tag pair. In this instance, the first cell could be right aligned and the second cell could be left aligned, causing the contents of the two cells to be displayed close together near the center of the computer screen (this display would be slightly "off center" because all cells are not the same length).
The cell (column) width is optional and is set in the td (table data) tag pair which creates the first cell in the column on an individual basis (the width attribute cannot be utilized in an opening td tag containing the colspan attribute). In this table, the width attribute for cells 2 through 6 cannot be utilized until a td tag pair applies to each one of these cells individually (this is a subsequent content in this lesson).
The next line of code is the closing tr (table row) tag.
The syntax in the next four lines of code creates the second row and is the same as the previous four lines of code except that the width attribute is not utilized. (once the width is set for the column, the setting is not repeated). Scroll all four lines of code into view in the above frame. In this row, the instruction, "Password:", is followed by a text box for the user's entry of his/her password (the name attribute in this input tag is set to the value of "password).
The syntax in the above four lines of code is repeated four times to provide instructions and related text boxes for the next four user inputs as follows (Scroll through and view each of these instances of this code);
The instruction, "Street:", is followed by a text box for the user's entry of his/her street address (the name attribute in this input tag is set to the value of "street").
The instruction, "City:", is followed by a text box for the user's entry of his/her city of residence (the name attribute in this input tag is set to the value of "city").
The instruction, "State:", is followed by a text box for the user's entry of his/her state of residence (the name attribute in this input tag is set to the value of "state").
The instruction, "Zip code:", is followed by a text box for the user's entry of his/her zip code (the name attribute in this input tag is set to the value of "zip").
The next three lines of code create a row for formatting purposes. Scoll these three lines of code into view in the above frame. The purpose of this row is to create space (a blank line) between the first two sections of the form. Reminder; a cell automatically expands in height to accomodate the cell data. In a like manner, a row without data collapses (does not have a visible height). The br (break) tag in the second line of this code creates a new line, causing the cell to expand to the height of a line (thereby creating the desired space for formatting purposes).
The next eight lines of code create the first row of the second section of the form (the book selection section). Scroll all eight lines of this code into view in the above frame.
The first line of this code is the opening tr (table row) tag which sets the bgcolor (background color) attribute to the value of "ccffff". The bgcolor for all rows in this section of the form are set to this color. Reminder; a tr (table row) bgcolor attribute overrides a table bgcolor attribute.
The next line of code creates the first cell in this row. This code begins with the opening th (table heading) tag (all six cells in this row are heading cells), followed by the test, "Select", followed by a br (break) tag, followed by the text, "Book(s)", followed by the closing th tag. The text, "Select Book(s)", is an instruction to the user for the utilization of the check boxes in this column. The br tag causes the two words to be displayed on two lines. The expansion of this cell to a height of two lines causes the browser to expand all cells in this row to two lines. This expansion creates a color frame around all of the other cells in this row because these cells have one line of text. Reminder; heading text is, by default, in bold and centered in the cell.
The next line of code creates the second cell in this row. This code begins with the opening th (table heading) tag, followed by the text data, "Title", followed by the closing th tag. This column will display the titles of the books offered.
The next four lines of code have the same syntaz as the previous line of code to create the following column headings pertaining to the books offered; Author, Publisher, Catgegory and Price.
The "width" attribute could be utilized in the opening th (table heading) tag for any or all of the cells in this row except the first cell (the width of the first cell has already been set). The width attribute is applicable at this point in the opening th tags for columns 2 through 6 because this is the first row in the table where these cells are created individually. Due to the absence of the width attribute in any of these cells, the browser, by defaut, sets all of these cells to an equal width. The 90% available for these five cells (10% was specified for the first cell) causes the browser to set the column width for each of these five cells to 18% (90 divided by 5 = 18). Setting the width to 20% for any three of these five cells would use 60% of the 90% available, leaving 30% for the two cells that do not have a specified width. The browser would, by default, set the width of each of these two cells to 15% (30 divided by 2 = 15).
The next line of code is the closing tr (table row) tag.
The next eight lines of code create the second row of the second section. Scroll all eight lines of this code into view in the above frame.
The first line of this code is the opening tr (table row) tag which sets the bgcolor (background color) attribute to the value of "ccffff" (the bgcolor for all rows in the second section are set to this color).
The next line of code creates the first cell in this row. This line of code begins with the opening td (table data) tag, followed by an input tag (a form control), followed by the closing td tag. The opeing td tag centers the cell content by setting the align attribute value to "center". In the input tag, the value of the type attribute is set to "checkbox" (this value causes a checkbox to appear in this cell), the value of the name attribute is set to "select", and the value of the value attribute is set to "Tough Guy". This checkbox appears under the heading of "Select Book(s)". Further explanations of the syntax for checkboxes are presented below.
The next line of code creates the second cell in this row. This line of code begins with the opening td (table data) tag, followed by the cell text, "Tough Guy" (this text appears under the heading of "Title"), followed by the closing td tag.
The next line of code creates the third cell in this row. This line of code begins with the opening td (table data) tag, followed by the cell text, "A. R. Busybody" (this text appears under the heading of "Author), followed by the closing td tag.
The next line of code creates the fourth cell in this row. This line of code begins with the opening td (table data) tag, followed by the cell text, "Letterman Limited" (this text appears under the heading of "Publisher"), followed by the closing td tag.
The next line of code creates the fifth cell in this row. This line of code begins with the opening td (table data) tag, followed by the cell text, "Thriller" (this text appears under the heading of "Category"), followed by the closing td tag.
The next line of code creates the sixth cell in this row. This line of code begins with the opening td (table data) tag, followed by the cell text, "$19.95" (this text appears under the heading of "Price"), followed by the closing td tag.
The next line of code is the closing tr (table row) tag.
The syntax for the above table row is repeated four times to provide the checkboxes and related book descriptions for the four other books offered. Scroll through and view the code for each of these four rows.
The syntax of creating five checkboxes (one for each book) with the same name, "select", causes the five check boxes to be in the same checkbox group (the group identified by the identity of "select"). The value attribute in each input tag in the checkbox group has a unique value (a book title). Assuming that the checkbox for the first, third,and fifth books have been clicked (are checked) when the "Submit Purchase Order" button is clicked, the segment of the e-mail message for the selected books would read as follows; select=Tough+Guy&select=Missing+Link&select=Edge+of+Space. This is a list of the three titles for the three books selected. For each checkbox selected, the browser e-mails the value of the value attribute (the book title as specified in the input tag).
The next ten lines of code create the first row in the third section of the form. Scroll through and view these lines of code in conjunction with the following explanations.
The first line of this code is the opening tr (table row) tag which sets the bgcolor (background color) attribute to the value of "ccffcc" (the bgcolor for all rows in the third section are set to this color).
The next two lines of this code create the first cell in this row. The first line of this code begins with the opening td (table data) tag, followed by the opening bold (b) tag, followed by the cell text, "Select" followed by a break (br /) tag. The second line of this code begins with the cell text, "Shipment" followed by the closing bold tag, followed by the closing table data tag. The break tag causes the two words in the cell to be displayed on two lines. The one line of text in the remaining cells causes these cells to have a color frame around the text. The cell text, "Select Shipment" is an instruction to the user for the utilization of the radio buttons in this row (radio buttons are explained below).
The next two lines of code create the next cell in this row. The first line of this code begins with the opening td (table data) tag followed by an input (form control) tag. This input tag sets the type attribute value to "radio", the name attribute to "ship", the value attribute to "Parcel Post", and contains the "checked" attribute. Setting the type attribute to the value of "radio" causes a radio button to appear in the cell. The other attributes and values in this input tag are explained below. The second line of this code begins with the text "Parcel Post" followed by the closing td tag. These two lines of code cause a radio button to be displayed in the cell with the text "Parcel Post" appearing immediately after the button as a description of this selection.
The next two lines of code create the next cell in this row. The first line of this code begins with the opening td (table data) tag followed by an input (form control) tag. The opening td tag sets the colspan attribute value to "2" (the radio button and associated user instruction will span 2 of the six cells in this row). The input tag sets the type attribute value to "radio", the name attribute to "ship", and the value attribute to "Priority". Setting the type attribute to the value of "radio" causes a radio button to appear in the cell. The other attributes and values in this input tag are explained below. The second line of this code begins with the text "Priority (2-3 days, add $2.50)" followed by the closing td tag. These two lines of code cause a radio button to be displayed in the cell with the text "Priority (2-3 days, add $2.50)" appearing immediately after the button as a description of this selection.
The next two lines of code create the next cell in this row. The first line of this code begins with the opening td (table data) tag followed by an input (form control) tag. The opening td tag sets the colspan attribute value to "2" (the radio button and associated user instruction will span 2 of the six cells in this row). The input tag sets the type attribute value to "radio", the name attribute to "ship", and the value attribute to "Overnight". Setting the type attribute to the value of "radio" causes a radio button to appear in the cell. The other attributes and values in this input tag are explained below. The second line of this code begins with the text "Overnight (add $10.00)" followed by the closing td tag. These two lines of code cause a radio button to be displayed in the cell with the text "Overnight (add $10.00)" appearing immediately after the button as a description of this selection.
A radio button that is not selected is a small white circle. A radio button that is selected is a small white circle containing a smaller black circle. All of the radio buttons in a group have the same name. The three buttons in this group all have the name "ship". The "selected" attribute is utilized in an input tag to cause the button to appear as the selected button when the button group first appears on the computer screen. The "selected" attribute does not have a value. When a radio button group is created, one (and only one) of the buttons in the group can (as a matter of syntax) be selected. In a radio button group, only one button can be selected at any point in time. When an unselected radio button is selected (clicked), the black circle appears in the the selected button, and the black circle is removed from the radio button that was previously selected.
When the radio button with the label of "Overnight" is selected, and the "Submit Purchase Order" button is clicked, the portion of the e-mail message pertaining to this button will read as follows; ship=Overnight (the browser returns the value of the value attribute as specified in the input tag which created the seleceted button).
The next twelve lines of code create the second row in the third section. Scroll through and view these lines of code in conjunction with the following explanations.
The first line of this code is the opening tr (table row) tag which sets the bgcolor (background color) attribute to the value of "ccffcc" (the bgcolor for all rows in the third section are set to this color).
The next line of code contains the opening td (table data) tag which sets the colspan attribute value to "6" (this value causes this cell to span the entire table), and the align attribute value to "center" (this value center aligns the cell contents).
The next line of code begins with an opening font tag which sets the color attribute to the value of "ccffcc", followed by text (a period), followed by a closing font tag, followed by a br (break) tag. The color, "ccffcc" is the row background color. Setting the text color to the row bgcolor causes the text to be invisible. The text (an invisible period) followed by the break (new line) tag causes the cell height to expand, creating the portion of a color frame which is before the cell content (a form control). This process is repeated after the cell content to complete the color frame
The next six lines of code create the cell content, a selection box, which is a form control.
The first line of this code is the opening "select" tag which sets the name attribute to a value of "selectpay".
The second line of this code begins with the first "option" tag (the first choice) for the four options (choices) in this selection box. This tag sets the value attribute to a value of "selection" and contains the "selected" attribute (the "selected" attribute does not utilize a value). The option tag is followed by the text which reads as follows; Select Payment Method. This option tag and associated text are explained in further detail below..
The next line of code creates the second option. This tag sets the value attribute to a value of "check". The option tag is followed by the text which reads as follows; Check.
The next line of code creates the third option. This tag sets the value attribute to a value of "moneyorder". The option tag is followed by the text which reads as follows; Money Order.
The next line of code creates the fourth option. This tag sets the value attribute to a value of "charge". The option tag is followed by the text which reads as follows; Charge Account.
The next line of code is the closing select tag.
A "select" box first appears on the computer screen as a one line text field (text box) with a "down" arrow at the end of the text field. When the select box first appears on the computer screen, the text associated with the option tag containing the "checked" attribute appears in the text field (one, and only one, option tag can contain the "checked" attribute; the option tag containing the "checked" attribute can be any one or the selection options). When the down arrow is clicked, a drop down list of selections appears. When the drop down list of selections appears, the option containing the "checked" attribute is highlighted. In this instance, one of the choices is an instruction to the user (the tag creating this choice contains the checked attribute, causing this instruction to be displayed in this selection box when the selection box first appears on the computer screen). When a choice in the drop down selections is clicked, the drop down list disappears and the selected choice appears in the "select" box.
When the "Submit Purchase Order" is clicked, the option value for the selected choice in the "select" box is forwarded. Assuming the choice "Charge Account" appears in the select box text field when the "Submit Purchase Order" is clicked, the portion of the e-mail message pertaining to the select box would read as follows; selectpay=charge. The value of the value attribute, as specified in the option tag creating the choice, is forwarded.
The next line of code begins with a br (break or new line) tag, followed by an opening font tag which sets the color attribute value to "ccffcc", followed by text (a period), followed by a closing font tag. This is the second expansion of the cell height by the utilization of a br (break) tag and an invisible period. This expansion completes the color frame around the cell content.This table row has a height of three lines (the first and third lines create the color frame). Utlizing the rowspan and setting the value to "3" would be a valid syntax. If this is done, this row would have to be followed by two tr (table row) tag pairs (one opening and closing tr tag pair for the second row created by the rowspan attribute and one opening and closing tag pair for the third row created by the rowspan attribute). These tr tag pairs would not have any td (table data) tag pairs because all of the cells in these rows would be created by the rowspan attribute. This use of the rowspan attribute would not eliminate the need for the two br (break) tags (without content, these rows would collapse). This use of the rowspan attribute is not utilized in this lesson because this extra code is not required or beneficial (the use of the two br (break) tags creates three lines, causing the row to expand to the height of three lines). The rowspan attribute is useful when such use is not in conjunction with a colspan (column span) that spans all cells in the table row (such as having a graphic, or other large element in a portion of the row and not wanting this large element to expand the other cells in the row).
The next line of code is the closing td (table data) tag.
The next line of code is the closing tr (table row) tag.
The next five lines of code create the third row in the third section. Scroll all five lines of this code into view in the above frame. The bgcolor (background color) for this row is "ccffcc" (the bgcolor for all rows in the third section are set to this color). This row contains user instructions for the utilization of a message box which appears in the next row. Explanations are omitted here because this code was presented and explained in Lesson 13. This code should be viewed for comprehension (refer to Lesson 13 if clarifications are required).
The next four lines of code create the fourth row in the third section. Scroll all four lines of this code into view in the above frame. The bgcolor (background color) for this row is "ccffcc" (the bgcolor for all rows in the third section are set to this color). This row contains the message box. Explanations are omitted here because this code was presented and explained in Lesson 13. This code should be viewed for comprehension (refer to Lesson 13 if clarifications are required).
The next seven lines of code create the "submit" and "reset" buttons. Scroll all seven lines of this code into view in the above frame. The opening tr (table row) tag does not utilize the bgcolor (background color) attribute. Due to the omission of the bgcolor attribute in the opening tr tag, the bg color for this row is the table bgcolor set in the opening table tag (this row has the same bgcolor as the first section of the form). Explanations are limited here because most of this code was presented and explained in Lesson 13 (refer to Lesson 13 if clarifications are required). View this code in conjunction with the explanations in this paragraph. This code differs from the code in Lesson 13 in three ways; 1.) a br (break) tag is utilized to create an additional line height in the row for fromatting purposes, 2.) this row is comprised of one cell (a cell that spans all six columns and 3.) this code uses invisible periods to position (format) the cell contents (the two buttons). The number of periods in the code for each of the two spacings was determined by a trial and error process; the process of starting with a "best guess" for the number of periods in each spacing, and adjusting (adding or deleting periods for either or both of these spacings) until the desired formatting is achieved.
The next line of code is the closing form tag.
The next line of code is thc closing table tag.
The remaining code is the closing body tag and the closing html tag.
Lesson 14 CommentsThis lesson presented a form as a purchase order because forms are frequently utilized for this purpose on the Internet. Purchase orders on the Internet differ in the following ways;
The form control entries are transmitted to a a special Internet address for processing. Purchase order information is not transmitted by e-mail because of the lack of security for such transmissions.
The purchase order information is manipulated by a script. The script is a computer program that utilizes the user entered information to calculate the amount due, and to create and display an invoice on the computer screen. The script program also allows users to use a credit card to complete the purchase.
A purchase order on the Internet contains hyperlinks for access to any other provisions that the seller requires as a part of the purchase transaction (policy, warranties, shipment, returns, etc..).
Internet forms for purchasers do not usually request a date because this data is avaialble within the computer operating system and is accessed by a script which includes this data in the purchase transaction.
A form can have hidden form controls that are not utilized by the user (not visible on the computer screen). The purpose of this type of form control is the automatic transmission of the value attribute data when the submit button is clicked. The same form could be on more than one web page, and in such instances, any submitted form could have a hidden control form to identify the source. Assume one of the web pages containing the form is named, "Dept2.html", the input tag contents for the hidden form control to identify all submissions from this web page would be as follows;
input type="hidden" name="dept" value="Dept 2"
When the submit button is clicked, the portion of the e-mail message pertaining to this hidden input tag would read as follows; dept=Dept+2
The attribute values for the name and value attributes can be changed to any preferences.
The input tag would be placed in a table cell at any location between the opening and closing form tags. This tag does not cause a line height in the cell because nothing is displayed on the computer screen (if placed in a cell that spans the entire table, the row is without height and has no effect on formatting).
The form has useful non-business applications. The form can be used for surveys or the acquisition of any information for which e-mail security is not a concern.
For business or non-business applications, a form provides quick and easy selections of predefined choices made available through radio buttons, checkboxes and selection boxes.
End of Lesson 14.