Some of the advanced features in xHTML include tables, lists, and forms.
A table is a group of structured information. The structure usually includes records (rows) and fields (columns). Tables are commonly used in browsers to help format the placement of information.
The table element defines a table in xHTML. XHTML Basic tables lack the advanced features of XHTML like borders and nesting. Also, some microbrowsers render XHTML Basic tables without alignment. You can add the special character to add spaces in a column.
The attribute summary of the table element describes the table’s contents. Speech devices use this attribute to make the table more accessible to users with visual impairments.
The caption element describes the table’s content and helps text-based browsers interpret the table data. Most browsers put the text inside the <caption> tags above the table. Attribute summary and element caption are two of many XHTML Basic features that make Web pages more accessible to users with disabilities.
The Pixo Microbrowser does not support the table header element, th. The th element causes other browsers to render the text within the header cells in bold. You can also use the strong element to create the same effect.
Each tr element defines an individual table row. Data cells contain individual pieces of data and they are defined with td (table data) elements.
Example 7 and figure 1.8 shows a table in an XHTML Basic document. It generates a table on the device that lists “Apple”, “Orange”, and “Banana” and the cost of each.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
http://www.w3.org/TR/xhtml;-basic/xhtml-basic10.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title> Basic Table</title>
<head>
<body>
<table summary= " This table provides information about the price of fruit">
<caption> Price of Fruit</caption>
<tr>
<td>Apple</td>
<td>$0.25</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>
</table>
</body>
</html>
Lists are groups of information elements (list items) that may be displayed and/or selected by users. Lists may be displayed in any order (unordered) or organized (sorted) based on the list items and the specified order criteria (such as alphabetically ascending).
Unordered lists can be created in XHTML Basic by using the ul element. Unordered lists are lists that do not order their items by letter or number. Each entry in an unordered list is a li element. Most wireless clients show these elements with a line break and a bullet mark at the beginning of the line.
Example 8 and figure 1.9 shows an XHTML Basic document that uses an unordered list. The unordered list has two elements in it, Prentice Hall and Microsoft, each of which is a link to the associated web site. The elements in an unordered list show up in most browsers having bullets next to each one.
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" http://www.w3.org/TR/xhtml;-basic/xhtml-basic10.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title> Unordered List</title> <head> <body> <p>Select a Website</p> <u1> <li> <a href=http://www.prenhall.com> </a> </li> <li> <a href=http://www.microsoft.com> </a> </li> </u1> </body> </html>
Ordered lists are in XHTML Basic are created using the ol element. An ordered list is enumerated or numbered by the browser. It also uses the li element for items in the list, as does the unordered list.
Example 9 and figure 1.10 below shows the XHTML code for a page with an ordered list. The align=”center” attribute of the <p> command is used in order to center the title as well as the elements in the list. Figure 10 shows the resulting screen for the code in example 9.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
http://www.w3.org/TR/xhtml;-basic/xhtml-basic10.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title> Ordered Lists</title>
<head>
<body>
<p align="center">Ford Truck Models</p>
<p align="center">
<o1>
<li>
F-150
</li>
<li>
F-250
</li>
<li>
F-350
</li>
</o1>
</p>
</body>
</html>
Nested lists are lists that are embedded as a list item in another list. Lists can be nested in XHTML Basic in order to show a hierarchical relationship between items. Both unordered lists and ordered lists can be nested. A nested list is contained within a list element of another list. Most web browsers show nested lists by indenting the list one level.
Example 10 and figure 1.11 shows an ordered list nested within an unordered list. The unordered list has two elements in it, Prentice Hall and Microsoft, which appear as bulleted elements. The ordered list of Text Books and Training is nested under the unordered element Prentice Hall. Ordered list elements appear numbered in most micro browsers.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
http://www.w3.org/TR/xhtml;-basic/xhtml-basic10.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title> Feedback form</title>
<head>
<body>
<h3>Feedback Form</h3>
<form method="post" action="/cgi-bin/nameemail">
<p>
<label>
Name:
<input type="text" name="name"/><br/>
</label>
<label>
email:
<input type="text" name="email"/><br/>
</label>
<input type="submit" value="Submit"/>
<input type="reset" value="Clear"/>
</p>
</form>
</body>
</html>
Forms are structured displays of screen information that usually allows a user to enter and edit information in predefined fields on specific areas of the form. xHTML uses forms to assist the user in entering and providing information to web servers such as email address, search keywords, and addresses. Forms display information prompts to the user that allows the user to select which information item(s) to enter and send. The form is used to help route the user data to the web server, which passes it to a computer graphics interface (CGI) script, usually written in C++, Perl, Java, or some other scripting language. The data is sent to the CGI script when the submit button is pushed on the XHTML Basic document. The script then processes the data and returns information in the form of an XHTML Basic document to the web browser.
Example 11 and figure 1.12 shows a XHTML Basic document that asks for the users name and email address. It uses the input type “text” for the inputting of the name and the email, and it uses the input type “submit” and “reset” for the buttons on the bottom of the screen.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
http://www.w3.org/TR/xhtml;-basic/xhtml-basic10.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title> Feedback form</title>
<head>
<body>
<h3>Feedback Form</h3>
<form method="post" action="/cgi-bin/nameemail">
<p>
<label>
Name:
<input type="text" name="name"/><br/>
</label>
<label>
email:
<input type="text" name="email"/><br/>
</label>
<input type="submit" value="Submit"/>
<input type="reset" value="Clear"/>
</p>
</form>
</body>
</html>
Forms can contain visual and non-visual components. Visible components include clickable buttons and other graphical user interface components for the user to interact. Non-visual components, called hidden inputs, store data that the document author wishes to pass to the cgi script.
In the form element, the method attribute specifies how the form’s data is sent to the web server. Using method = “post” appends form data to the browser request, which contains the protocol (i.e.HTTP) and the resources URL. Scripts that reside on the web server can access the form data sent as part of the request. The other possible value for method is “get” which appends the form data directly to the end of the URL. The action attribute of the form tag specifies the URL of a script on the web server.
The input element specifies data to be provided to the script. The input element can have type = “hidden”, which allows the document author to send form data that is not entered by the user to a script. The input attribute name specifies the variable name for this data, and the attribute value, specifies a value for that variable inputted.
Another input type is “text”. This inserts a text box into the document. Users can type data into these text boxes. The label element displays information about the input element’s purpose next to the text box.
The input types of “submit” and “reset”, create buttons on the display that cause the data to be submitted (to the cgi script) or cleared out of the forms. The value attribute specifies the text for the buttons.
XHTML Basic also allows for the use of more complex forms for inputting data from a user. One is textarea that allows more text to be entered than with text boxes. Also, checkboxes and radio buttons offer pre-set options to the user.
The textarea element inserts a multiline text box, called a text area into the form. The rows attribute specifies the number of rows, and the cols attribute specifies the number of columns. To display a default text in the text area, place the text between the <textarea>…</textarea> tags. Default text can be specified in other input types, such as text boxes, by using the value attribute.
The input type checkbox enables users to select items from a set of options. When a user selects a checkbox, a check mark appears in the check box. Checkbox inputs can be used individually or in groups. When used in groups, each checkbox input is can be given the same name.
The input type radio is similar to checkboxes, except that only one radio button in a group of radio buttons can be selected at any time. All radio buttons in a group have the same name and have different value attributes.
Another input form is the select element. The select element provides a drop down list from which a user can select an item. The name attribute identifies the drop-down list. The option element adds items to the dropdown list. The option element’s selected attribute specifies which item is the initially selected item in the select element.
Example 12 and figure 1.13 shows the use of an input type of textarea, as well as an input type of checkbox. The checkbox type is used to have the user check which type of foods they like, and the text area is used for the user to enter comments. The submit and reset buttons are the last two input types shown. This figure shows the two screens where the second screen shown is a continuation of the first screen, when scrolled down.
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" http://www.w3.org/TR/xhtml;-basic/xhtml-basic10.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title> More Complex Forms</title> <head> <body> <form method="post" action="/cgi-bin/geninput"> <p> Food you like:</br> <label> Fruit <input type="checkbox" name="foodliked" value="fruit"/></br> </label> <label> Meat <input type="checkbox" name="foodliked" value="meat"/></br> </label> <label> Cheese <input type="checkbox" name="foodliked" value="cheese"/></br> </label> Comments: <textarea name="comments" rows="4" cols="15"> </textarea> <input type="submit" value="Submit"/> <input type="reset" value="Clear"/> </p> </form> </body> </html>
Example 13 and figure 1.14 shows the use of the input type radio, as well as the select element. Only one of the radio buttons can be pushed, so the name attribute is the same in all three. The select element creates the drop down list, when clicked on. This example shows the three screens where the first two are a continuation of a single screen, and the third screen is what is shown when the drop down list is selected.
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" http://www.w3.org/TR/xhtml;-basic/xhtml-basic10.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title> Complex Forms</title> <head> <body> <form method="post" action="/cgi-bin/geninput"> <p> How did you find this site><br/> <label> Search Engine <input type="radio" name="howtosite" value="search engine"/></br> </label> <label> Site Link <input type="radio" name="howtosite" value="link"/></br> </label> <label> Book Ref <input type="radio" name="howtosite" value="book"/></br> </label> <label> Rate our site: <select name="rating"> <option selected="selected">Great</option> <option>Good</option> <option>Fair</option> </select> </label> </p> </form> </body> </html>
