Appendix J Introduction to HyperText Markup Language 4: Part 2 1409 the textarea should be. This textarea is four rows of characters tall and 36 characters wide. Any default text that you want to place inside the textarea should be contained in the textareaelement. The input type = “password” (line 44) inserts a text box with the indicated size. The password input field provides a way for users to enter information that the user would not want others to be able to read on the screen. In visual browsers, the data the user types into a password input field is shown as asterisks. However, the actual value the user enters is sent to the server. Nonvisual browsers may render this type of input field differently. Lines 50 68 introduce another type of form element, the checkbox. Every inputelement with type =”checkbox” creates a new checkbox item in the form. Checkboxes can be used individually or in groups. Each checkbox in a group should have the same name(in this case, name=”thingsliked”). This notifies the script handling the form that all of the checkboxes are related to one another. Common Programming Error J.5 When your form has several checkboxes with the same name, you must make sure that they have different values, or else the script will have no way of distinguishing between them. Additional form elements are introduced in Fig. J.5. In this form example, we introduce two new types of input options. The first of these is the radio button, introduced in lines 80 97. Inserted into forms with the inputattribute type = “radio”, radio buttons are similar in function and usage to checkboxes. Radio buttons are different in that only one element in the group may be selected at any time. All of the nameattributes of a group of radio inputs must be the same and all of the valueattributes different. Insert the attribute checked to indicate which radio button you would like selected initially. The checked attribute can also be applied to checkboxes. Common Programming Error J.6 When you are using a group of radio inputs in a form, forgetting to set the namevalues to the same name will let the user select all the radio buttons at the same time an undesired result. 1 3 4 5 6 7 8 9 10 11 12 13 14

Feedback Form

15 Fig. J.5 Fig. J.Fig..Fi J5g. J.5J.5Form including radio buttons and pulldown lists. (Part 1 of 4.) Fig.
Note: In case you are looking for affordable and reliable webhost to host and run your j2ee application check Vision J2ee Web Hosting services.

1408 Introduction to HyperText Markup Language 4: Part 2 Appendix J 63 65 66 Source code 67 69

70 71

72 73 74

75 76

77 78 79 Fig. J.4 Fig. J.Fig..Fi J4g. J.4J.4Form including textareas, password boxes and checkboxes. (Part 3 of 3.) Fig. Lines 37 38 introduce the textarea element. The textarea element inserts a text box into the form. You specify the size of the box with the rows attribute, which sets the number of rows that will appear in the textarea. With the cols attribute, you specify how wide
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.

Appendix J Introduction to HyperText Markup Language 4: Part 2 1407 11 12 13 14

Feedback Form

15 16

Please fill out this form to help us improve our site.

17 18

19 20

21 23 24 26 27 29

30 31

Name: 32 33

34 35 43

Email Address: 44 45

46 47

48 Things you liked:
49 50 Site design 51 53 54 Links 55 57 58 Ease of use 59 61 62 Images Fig. J.4 Fig. J.Fig..Fi J4g. J.4J.4Form including textareas, password boxes and checkboxes. (Part 2 of 3.) Fig.
If you are looking for affordable and reliable webhost to host and run your business application visit our ftp web hosting services.

1406 Introduction to HyperText Markup Language 4: Part 2 Appendix J

Name:

The input type = “text” inserts a one-line text box into the form (line 36). A good use of the textual input element is for names or other one-line pieces of information. The labelelement on lines 35 37 provide a description for the input element on line 36. We also use the size attribute of the inputelement to specify the width of the text input, measured in characters. You can also set a maximum number of characters that the text input will accept using the maxlengthattribute. Good Programming Practice J.2 When using input elements in forms, be sure to leave enough space with the maxlength attribute for users to input the pertinent information. Common Programming Error J.3 Forgetting to include a label element for each form element is a design error. Without these labels, users will have no way of knowing what the function of individual form elements is. There are two types of inputelements in lines 42 43 that should be inserted into every form. The type = “submit” input element allows the user to submit the data entered in the form to the server for processing. Most visual Web browsers place a button in the form that submits the data when clicked. The value attribute changes the text displayed on the button (the default value is “submit”). The input element type = “reset” allows a user to reset all form elements to the default values. This can help the user correct mistakes or simply start over. As with the submitinput, the valueattribute of the resetinputelement affects the text of the button on the screen, but does not affect its functionality. Common Programming Error J.4 Be sure to close your form code with the

tag. Neglecting to do so is an error and can affect the functionality of other forms on the same page. J.5 More Complex HTML Forms We introduce additional form input options in Fig. J.4. 1 3 4 5 6 7 8 9 10 Fig. J.4 Fig. J.Fig..Fi J4g. J.4J.4Form including textareas, password boxes and checkboxes. (Part 1 of 3.) Fig.
Visit our web design programs services for an affordable and reliable webhost to suit all your needs.

Appendix J Introduction to HyperText Markup Language 4: Part 2 1405 The form begins on line 21

with the form element. The method attribute indicates the way the information gathered in the form will be sent to the Web server for processing. Use method = “post” in a form that causes changes to server data, for example when updating a database. The form data will be sent to the server as an environment variable, which scripts are able to access. The other possible value, method = “get”, should be used when your form does not cause any changes in server-side data, for example when making a database request. The form data from method = “get” is appended to the end of the URL (for example, /cgibin/ formmail?name=bob&order=5). Also be aware that method=”get” is limited to standard characters and cannot submit any special characters. A Web server is a machine that runs a software package like Microsoft s PWS (Personal Web Server), Microsoft s IIS (Internet Information Server) or Apache. Web servers handle browser requests. When a browser requests a page or file somewhere on a server, the server processes the request and returns an answer to the browser. In this example, the data from the form goes to a CGI (Common Gateway Interface) script, which is a means of interfacing an HTML page with a script (i.e., a program) written in Perl, C, Tcl or other languages. The script then handles the data fed to it by the server and typically returns some information for the user. The action attribute in the form tag is the URL for this script; in this case, it is a simple script that emails form data to an address. Most Internet Service Providers (ISPs) will have a script like this on their site, so you can ask your system administrator how to set up your HTML to use the script correctly. For this particular script, there are several pieces of information (not seen by the user) needed in the form. Lines 24 31 specify this information using hidden input elements. The input element is common in forms and always requires the type attribute. Two other attributes are name, which provides a unique identifier for the input element, and value, which indicates the value that the input element sends to the server upon submission. As shown above, hidden inputs always have the attribute type = “hidden”. The three hidden inputs shown are typical for this kind of CGI script: An email address to which the data will be sent, the subject line of the email and a URL to which the user is redirected after submitting the form. Good Programming Practice J.1 Place hidden input elements in the beginning of a form, right after the opening
tag. This makes these elements easier to find and identify. The usage of an input element is defined by the value of its type attribute. We introduce another of these options in lines 35 37:
Note: In case you are looking for affordable and reliable webhost to host and run your j2ee application check Vision J2ee Web Hosting services.

1404 Introduction to HyperText Markup Language 4: Part 2 Appendix J 11 12 13 14

Feedback Form

15 16

Please fill out this form to help us improve our site.

17 18 19 20 21
22 23

24 26 27 29 30 32

33 34 41 42 43 44

45 46

47 48 49 Fig. J.3 Fig. J.Fig..Fi J3g. J.3J.3Simple form with hidden fields and a text box. (Part 2 of 2.) Fig.
If you are looking for affordable and reliable webhost to host and run your business application visit our ftp web hosting services.

Appendix J Introduction to HyperText Markup Language 4: Part 2 1403

The colgroupelement can be used to group and format columns. Each col element in the

tags can format any number of columns (specified with the span attribute). Any formatting to be applied to a column or group of columns can be specified in both the colgroupand coltags. In this case, we align the text inside the leftmost column to the right. Another useful attribute to use here is width, which specifies the width of the column. Most visual Web browsers automatically format data cells to fit the data they contain. However, it is possible to make some data cells larger than others. This effect is accomplished with the rowspan and colspan attributes, which can be placed inside any data cell element. The value of the attribute specifies the number of rows or columns to be occupied by the cell, respectively. For example, rowspan=”2″tells the browser that this data cell will span the area of two vertically adjacent cells. These cells will be joined vertically (and will thus span over two rows). An example of colspanappears in line 36,
where the header cell is widened to span four cells. We also see here an example of vertical alignment formatting. The valign attribute accepts the following values: “top”, “middle”, “bottom” and “baseline”. All cells in a row whose valign attribute is set to “baseline”will have the first text line occur on a common baseline. The default vertical alignment in all data and header cells is valign=”middle”. The remaining code in Fig. J.2 demonstrates other uses of the table attributes and elements outlined above. Common Programming Error J.2 When using colspan and rowspan in table data cells, consider that the modified cells will cover the areas of other cells. Compensate for this in your code by reducing the number of cells in that row or column. If you do not, the formatting of your table will be distorted, and you could inadvertently create more columns and/or rows than you originally intended. J.4 Basic HTML Forms HTML provides several mechanisms to collect information from people viewing your site; one is the form (Fig. J.3). 1 3 4 5 6 7 8 9 10 Fig. J.3 Fig. J.Fig..Fi J3g. J.3J.3Simple form with hidden fields and a text box. (Part 1 of 2.) Fig.
Searching for affordable and reliable webhost to host and run your web applications? Go to our java web server services and you will be pleased.

1402 Introduction to HyperText Markup Language 4: Part 2 Appendix J 51
52 53
54 Camels (bactrian)

55 2

56 Africa/Asia

57
Llama

58
Llama

59

60 61
62 Llamas

63 1

64 Andes Mountains

65

66 67

68 69

70 71 72 Fig. J.2 Fig. J.Fig..Fi J2g. J.2J.2Complex HTML table. (Part 2 of 2.) Fig. The table begins on line 16. The colgroup element, used for grouping columns, is shown on lines 22 25

In case you need affordable webhost to host your website, our recommendation is ecommerce web host services.

Appendix J Introduction to HyperText Markup Language 4: Part 2 1401

Table Example Page

Fig. J.2 Fig. J.Fig..Fi J2g. J.2J.2Complex HTML table. (Part 1 of 2.) Fig.
In case you need quality webspace to host and run your web applications, try our personal web hosting services.

Posted in Tomcat | No Comments »

inserts a caption element into the table. The text inside the caption element is inserted directly above the table in most visual browsers. The caption text is also used to help textbased browsers interpret the table data. Tables can be split into distinct horizontal and vertical sections. The first of these sections, the head area, appears in lines 27 29

Put all header information (for example, the titles of the table and column headers) inside the thead element. The tr, or table row element, is used to create rows of table cells. All of the cells in a row belong in the

element for that row. The smallest unit of the table is the data cell. There are two types of data cells, one type the th element is located in the table header. The other type the td element is located in the table body. The code example in Fig. J.1 inserts a header cell, using the th element. Header cells, which are placed in the
element, are suitable for column headings. The second grouping section, the tbodyelement, appears in lines 34 36

Like thead, the tbody element is used for formatting and grouping purposes. Although there is only one row and one cell (line 35) in the above example, most tables will use tbody to group the majority of their content in multiple rows and multiple cells. Look-and-Feel Observation J.1 Use tables in your HTML pages to mark up tabular data. Common Programming Error J.1 Forgetting to close any of the elements inside the table element is an error and can distort the table format. Be sure to check that every element is opened and closed in its proper place to make sure that the table is structured as intended. J.3 Intermediate HTML Tables and Formatting In the previous section and code example, we explored the structure of a basic table. In Fig. J.2, we extend our table example with more structural elements and attributes
We would like to recommend you tested and proved virtual web hosting services, which you will surely find to be of great quality.

Posted in Tomcat | No Comments »

---

Here is a more complex sample table.

Here is a small sample table.

	Camelid comparison Approximate as of 8/99
	# of Humps	Indigenous region	Spits?	Produces Wool?
This is the head.
This is the body.