This lesson utilizes form tags and an e-mail link to create a web page which serves as a guest register. This web page contains an entry field for the users name, a message box for any comments the user would like to submit, and an e-mail link that can be utilized if the user prefers this type of communication.
An HTML "form" provides a way to receive and utilize keyboard input from people who visit your 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 first line of code in the body of this web page contains two opening tags; the opening paragraph tag and the opening font tag. Scroll this line of code into view in the above frame. The opening paragraph tag utilizes the align attribute to "center" the paragraph on the computer screen. This paragraph has one line of text. When a centered paragraph has more than one line of text, each line of text will be centered on the computer screen. The opening font tag utilizes the font attribute to specify the text size of "5" and the text color of "blue".
The next line of code contains the paragraph text followed by the closing font tag and the closing paragraph tag. Scroll to and view this line of code.
The next line of code is an opening table tag containing the align attribute with a value of "center" and the width attribute with the value of "80%". Scroll to and view this line of code.
The next line of code is the opening form tag (identified by the word "form"). Scroll this line of code into view in the above frame. The action attribute has a value of "mailto:jim.campbell.att.net" (the e-mail address must be preceded by "mailto:"). This attribute and value cause the keyboard input to be e-mailed to the specified e-mail address when the "Send Entries" button is clicked on the web page (the "Send Entries" button is a form control; this form control is a subsquent content in this lesson). The method attribute has a value of "post" which causes the data entered by the user to be accumulated so that the data can be forwarded when the "Send Entries" button is clicked (the user enters data in form controls; these form controls are a subsequent content in this lesson).
The form is nested in the table (the opening form tag immediately follows the opening table tag and the closing form tag is immediately before the closing table tag). This nesting enables the table to be utilized for the formatting of the form. Some of the table cells contain form controls (form controls are a subsequent content of this lesson) and other table cells contain instructions for the utilizations of the form controls.
The next 4 lines of code create the first table row. Scroll all four lines of code into view in the above frame.
The first line of this code is the opening table row tag.
The second line of this code creates the first cell in this row. The text in this cell is right aligned. The font tags in this line of code cause the text in this cell to be displayed in the color of "blue" and in the text size of "4". The table data, "Your name:" is an instruction to the user to enter his/her name in the text box (a form control) which immediately follows this instruction. The table data is followed by the closing font tag and the closing td tag.
The third line of this code creates the second cell in this row. The cell data in this cell is left aligned. The cell data in this cell is a form control, created by an input tag (identified by the word "input"). The type attribute with a value of "text" causes the text box (text field) to be displayed in the table cell. The name attribute has the value of "visitor", which is the identity of this form control. The characters in the name attribute vaule are limited to alphabetic and numerical characters plus the underscore, "_", or dash, "-", characters. As a matter of syntax, each form control must have a unique name. The input tag is not a paired tag; note the space slash syntax for this tag. The input tag is followed by the closing td tag.
When the data entered by the user is e-mailed to the specified e-mail address, the control identity (visitor) will appear immedaiately before the name entered by the user.
The first cell in the first table row is "right" aligned and the second cell in this row is "left" alligned. These two alignments cause the cell data in the two cells (the instruction, "Your name:", and the text box) to appear close together near the center of the comnputer screen. To see this result, view the instructions, "Your name:" and the text box on the web page for this lesson.The size of the "text" input box in this lesson is the default size. This size can be changed by utilizing the "size" attribute with a value of the desired size (an integer specificing the size of the text box as a number of characters). In either instance, the default size or a specified size, the text box will scroll when the user enters excess characters (a smaller size box, with scrolling, can be utilized when this is important for the web page layout). The input tag can also utillize the "maxlength" attribute to specify a maximun size for the text box (the maximum number of characters that can be entered by the user). With adequate user instructions, maximum length inputs would be appropriate for telephone numbers, social security numbers, and credit card numbers.
The fourth line of this code contains the closing table row (tr) tag.
The next 4 lines of code create the second table row. Scroll these 4 lines into view in the above frame.
The first line of this code is the opening table row (tr) tag.
The second line of code begins with the opening "td" (table data) tag. The opening "td" (table data) tag contains the colspan (column span) attribute with a value of "2". This is an instruction to the browser to combine the two cells in this row so that the row will be comprised of one cell (this cell will have the width of two cells). The align attribute is utilized to center the cell data. The opening "td" tag is followed by the opening "font" tag. The opening font tag utilizes attributes to display the text in the color blue and in the text size of "4".
The third line of code contains the cell data (the instructions to enter a message), the closing font tag,and the closing table data (td) tag.
The td (table data) tags for the second cell in this row must be omitted because this cell is created by the colspan attribute. The utilization of td tags that should be omitted cause undesirable results when the table is displayed on the computer screen.
The fourth line of code is the closing tabel row (/tr) tag.
The next 4 lines of code create the third table row. Scroll these four lines of code into view in the above frame.
The first line of this code is the opening table row (tr) tag.
The second line of this code consists of the opening table data (td) tag and the opening textarea tag (a form control) identified by the word "textarea". The opening table data (td) tag contains the align attribute with the value of "center" and the colspan attribute with a value of "2" (this cell will have the width of two cells). The cell data is the textarea tag which causes the text area (message box) to appear on the web page. The textarea tag contains the name attribute with the value of "comments", the rows attribute with a value of "10" and the cols (columns) attribute with a value of "60". The values for the rows and cols attributes can be changed to create a text area of a different size (reminder; a cell will automatically adjust in size to accomodate the cell data).
When the message entered by the user is e-mailed to the specified e-mail address, the control identity (comments) will appear immedaiately before the message entered by the user. As a matter of syntax, each form control must have a unique name.
The third line of code contains the closing textarea tag and the closing table data (td) tag.
The td (table data) tag for the second cell must be omitted because this cell is created by the colspan attribute.
The fourth line of code contains the closing table row (tr) tag.
The next 4 lines of code create the fourth table row. Scroll these four lines of code into view in the above frame.
The first line of this code contains the opening table row (tr) tag.
The second line of this code contains an opening table data (td) tag, an input tag (which creates a form control), and a closing table data (td) tag. The opening table data tag contains the align attribute with a value of "center". The input tag contains the type attribute with the value of "submit" and the value attribute with the value of "Send entries". The type attribute value of "submit" causes a button to be displayed in the cell. The value attribute with the value of "Send Entries" causes the text "Send Entries" to be displayed on the button which appears in the cell. Utilization of the value attribute is optional. When this attribute is not utilized, the text "Submit" will appear on the button by default. The input tag is not a paired tag; note the space slash syntax for this tag. When this created button is clicked by the user, the user entries are e-mailed to the address specified in the opening form tag. If the "Send Entries" button is clicked without making any entries an e-mail message will be sent, but this message will contain only the identities (names) of the control forms (in this instance, the identities are "visitor" and "comments").
The third line of this code contains an opening table data (td) tag, an input tag (which creates a form control), and a closing table data (td) tag. The opeing table data tag contains the align attribute with a value of "center". The input tag contains the type attribute with the value of "reset" and the value attribute with the value of "Clear Entries". The type attribute value of "reset" causes a button to be displayed in the cell. The value attribute value of "Clear Entries" causes the text "Clear Entries" to be displayed on the button which appears in the cell. Utilization of the value attribute is optional. When this attribute is not utilized, the text "Reset" will appear on the button by default. The input tag is not a paired tag; note the space slash syntax for this tag. When this created button is clicked by the user, any entries that have been made by the user will be cleared from the form controls.
The fourth line of this code is the closing table row (tr) tag.
The next line of code is the closing form tag.
The next line of code is the closing table tag.
The next line of code is a break (br /) tag.
The next line of code is the horizontal rule (hr /) tag.
The next two lines of code create a paragraph which contains an anchor tag pair for the e-mail link.
The first line of this code is the opening paragraph tag containing the align attribute with a value of "center" (the paragraph tag causes a blank line to appear immediately before the e-mail link and the align attribute value of "center" causes the e-mail link to be centered on the web page).
The second line of this code contains the opening anchor tag, the hyper text which reads "E-Mail Jim Campbell", the closing anchor tag, and the closing paragraph tag. The opening anchor tag contains the href attribute with a value of "mailto:jim.campbell@att.net". This attribute and value cause an e-mail message box to appear on the computer screen with the specified e-mail address appearing in the "To:" text box of the message box.
The next line of code is the closing body tag.
The next (and last) line of code is the closing html tag.
Lesson 13 comments:
A form cannot be nested in a form.
The form "action" attribute can have a value which is a special internet address for a computer program file located on a server. This usage is for the utilization of web page scripts which can, among other things, make interactive computer programs available to web page users.
The form method attribute can have a value of "get". This value causes a search to be performed by a specified search program. When the "get" value is utilized, the form action attribute must contain a special internet address for a computer program file (a search program, also referred to as a search engine) and must have a form text entry box (text field) which allows the user to enter the data which is the criteria for the search. The form must also contain a "submit" button. When the user enters the search criteria and clicks the "submit" button, a data transmission executes the search program located at the special internet address. This transmission also passes three values to the search program for utilization by the search program (these three values are automatically appended to the special internet address). These three values and the sequence of these three values are as follows; 1.) a question mark (a default value), 2.) the indentity (name) of the text entry box, and 3.) the text entry data (the search criteria). When the search program executes, a search is performed and the result is returned.
The colspan attribute is utilized to span cells horizontally. The rowspan attribute can be utilized to span cells vertically. The colspan and rowspan attributes can be utilized in the same opening td (table data) tag to simultaneously span columns and rows (creating a block of cells). In any use of the colspan and rowspan attributes (individually or jointly), the td tags for the spanned cells must be omitted. In simple spans, the required omissions of td tags in the source code can be comprehended by viewing the span attributes and their values. In complex spans, documentation of the required omissions is helpful. In the location of each omission, a comment can be inserted, explaining the omission. The ability to create attractive presentations of text and graphics in tables can be developed throught trial and error activities.
The clicking of a "submit" button for a form that has an action of "mailto:address" may cause a message box (dialogue box) to appear providing a reminder of the security risk of e-mail and an option to cancel the e-mail.
The type attribute for an input tag can have a value of "password". The syntax for this value is the same as the "text" value except that an asterick appears on the computer screen for each keystroke on the keyboard (masking the input). The utilization of a web page script (possibly with an interactive computer program available on a server) would be required to verify the validity of a password.
A guest web page can contain as many input and textarea tags as desired. A possible expansion of the web page for this lesson could be as follows:
Two additional text inputs; one for a password and one for the visitor's e-mail address. Unique names must be specified, such as "pass" and "mail". Like the text input named "visitor", usage instructions must be provided for the two added text inputs.
Two additional textareas (assume seeking comments as being "for" or "against" a particular thing); In this instance, provide a textarea for each position (one named "for" and one named "against"). When e-mail messages are received, the name (which precedes the message) provides instant reconigition of the senders position. Like the existing textarea input named "comments", usage instructions must be provided for the two added textareas. The name of the existing textarea could be changed from "comments" to "undicided" (the input instructions for this textarea should also be changed to provide instructions that this text entry is for an "undecided" position).
End of Lesson 13.