# Connexions

You are here: Home » Content » Web Programming Quick Start: XTHML -- Forms

### Lenses

What is a lens?

#### Definition of a lens

##### Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

##### What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

##### Who can create a lens?

Any individual member, a community, or a respected organization.

##### What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

#### In these lenses

• bethelwebdesign

This module is included inLens: Susan McClements's Lens
By: Susan McClements

Click the "bethelwebdesign" link to see all content selected in this lens.

Click the tag icon to display tags associated with this content.

### Recently Viewed

This feature requires Javascript to be enabled.

### Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

# Web Programming Quick Start: XTHML -- Forms

Module by: Ronald Sawey. E-mail the author

Summary: This module discusses how to add forms to your XHTML files. The tags discussed are <form>, <label>, <input>, <select>, <option>, and <textarea> tags.

## Introduction

The primary goal of this "Web Programming Quick Start" series is to get the reader to the point of doing something productive with a minimum of time and effort. It is not intended to be an exhaustive treatment/reference of any of the subjects discussed. This is also very much a work in progress. All comments, criticisms, suggestions, etc. are most welcome .

In the series of modules on XHTML (eXtensible HyperText Markup Language) and CSS (Cascading Style Sheets), we will be following the "current wisdom" on web page construction and design as exemplified by the three excellent web-related books of Rachael Andrew . Specifically, we will endeavor to keep the content and the styling/formatting of the web documents separate .

This module builds on material discussed in some of the XHTML modules, e.g. the creation of an initial XHTML file . A complete listing of the links to all XHTML and CSS modules is also available.

Segments of the XHTML source code are shown in this module as image files, but links are given to the XHTML files and the source is readily available from a browser via the menu bar using File/Save As... , View/Source, or something comparable.

## Forms

In this module we will discuss the construction of forms. Our approach will be to start with a single element (a text box) and to add form elements (radio buttons, checkboxes, etc.) one at a time, while also discussing and demonstrating how the data in the form are transferred to the server from the client (using a web browser) system. We will demonstrate both the get and post methods.

### Initial Form with a Textbox

Let's say that we want to gather data on what folks think of this "Web Programming Quick Start Series." We now put together a form for this purpose. We do this one form element at a time, eventually covering all of the "basic" form elements.

formdemo1a.html is our first step. Figure 1 shows the XHTML code and Figure 2 shows the view of the file from the Firefox web browser.

Please note the following concerning the XHTML code and related points:

• Lines 10 and 11 -- Begin the form specification with several attributes:
• id and name -- For our purposes, these will serve the same purpose, to identify the form if we were to need to refer to it at some point later on.
• method -- This attribute usually takes either of two values: get and post . The method attribute specifies the means by which the data from the form are sent to the server for processing. We will begin with the get method. After you complete the email text box in this form, you can press <enter> and the data are sent to the server. You can see the format of the data being sent by observing the URL/Address line of your browser. We will discuss the post method later.
• action -- The value of this attribute is the address of the script to be executed when the data are sent to the server to be processed. In this example, it is the complete URL to a server other than the one on which these modules reside. If the script were on this server and in the same directory/folder as the form, all that would be required would be the file name for the script.
• Lines 12 and 15 -- To meet "strict" XHTML standards, each form elements (in this case a textbox) should be surrounded with <p> tags.
• Line 13 -- Contains the label tag. Browsers will render form elements without these tags. For accessibility, these tags should be included with each form element. They are used by reader programs to give the information related to what is required/requested in each form element. The for attribute is used to tie the label with the form element by way of the id attribute of the input tag, shown in Line 14. This, of course, means that the for and id attributes must have the same value in order for this linkage to work as intended.
• Line 14 -- Shows the input tag (an "empty tag"). The type attribute specifies the kind of form element to be presented by the browser. In this case it is a textbox via the value " text ." The name attribute is the name of the data, whose value will also to be sent to the server for processing.
• The script to be executed ( Listing ) simply "echoes" the name(s) and value(s) of all the form elements sent to it. In order to test this form, type something in the textbox and press <enter> since there is not a button. We will include this next. For example, if we type " smith@gmail.com ," the "name=value" pair sent to the server is " email=smith@gmail.com ."

formdemo1b.html shows our next step in this discussion, adding a button. Figure 3 shows the XHTML code and Figure 4 shows the view of the file from the Firefox web browser.

Please note the following concerning the XHTML code and related points:

• Line 17 -- "Wrapped" in the paragraph tags shows the format of the input tag that generates a button. The value attribute allows you to put whatever text you would like on the button.
• When you execute the script by pressing the submit button in the form, using formdemo1b.html , you will notice that the submit button is also listed as one of the form elements with the " name=value " pair being " submit=submit ".

formdemo1c.html is our next step in this discussion, adding radio buttons. Figure 5 shows the XHTML code and Figure 6 shows the view of the file from the Firefox web browser.

Please note the following concerning the XHTML code and related points:

• Lines 17 through 29 -- Contain the XHTML that generates the radio buttons
• Lines 19, 22, 25, 28 -- Contain the input tags that generate the radio buttons. Notice the following:
• Each has the same type specification ("radio"), since they are all radio buttons.
• The name attributes also have the same value, namely "rating." This is sensible since this relates to the same thing being measured. We will see that name attributes have to be different for checkboxes.
• The value attributes are different, of course. For example if the person completing the form clicks on the button for "Poor" the data pair of " name=value " that is transmitted from this form element are "rating=poor".
• Try pressing the button, using formdemo1c.html before choosing any kind of rating and then go back and choose one of the rating radio buttons. The important point to take away from this minor exercise is that if no radio button is chosen no data are transmitted for the radio button. This was not the case earlier with the textbox. Even if we leave it blank, the name of the textbox with a "null" value is transmitted to the server.

formdemo1d.html shows our next step in this discussion, adding checkboxes. Figure 7 shows the relevant XHTML code, following the code for the radio buttons, discussed above, and Figure 8 shows the view of the file from the Firefox web browser.

Please note the following concerning the XHTML code and related points:

• Lines 31 through 44 -- Contain the XHTML that generates the checkboxes.
• Lines 33, 38, and 43 -- Contain the input tags that generate the three checkboxes. Notice the following:
• Each has the same type specification ("checkbox") since they are all checkboxes.
• The name attributes are all different, compared to all the same with the radio buttons, discussed above. Since only one choice is expected from a set of radio button the same name is reasonable, whereas any, all or none are the possibilities for checkboxes, hence we use different names for each checkbox.
• The value attributes also have different values. Each value is given a mnemonic value, although they can be whatever you like, e.g., numbers. In our example, if the user selects "CSS" and "PHP," the data that are transmitted to the server are the following " name=value " pairs: " css=yes " and " php=yes ". Nothing is transmitted for " xhtml ." Hence no data are transmitted for unchecked checkboxes.
• Try pressing the button, using formdemo1d.html , before choosing any of the checkbox options. Next, resubmit with one or two checkboxes chosen. Recall that with the radio buttons, only one " name=value " pair is transmitted to the server if a radio button is chosen. With checkboxes only the " name=value " pairs of checkboxes that are checked will be transmitted to the server.

formdemo1f.html is our final step in the creation of our example evaluation form for this "Web Programming Quick Start" series. Figure 11 shows the XHTML code and Figure 12 shows the view of the file from the Firefox web browser.

Please note the following concerning the XHTML code and related points:

• Lines 55 through 58 -- Contain the XHTML code that generates the textarea box.
• Lines 56 and 57:
• The for and id attributes have the same label/form element accessibility "linkages" as noted earlier, i.e., a text reader will recognize that the label text corresponds to the textarea box.
• Line 57 -- The name attribute determines the name of the " name,=value " data pair that is transmitted to the server. In this case the value will be whatever is contained in the textarea box. The cols and rows determine the width in characters (cols) and the height (rows) of the textarea box.
• Try pressing the button, using formdemo1f.html , to demonstrate how the " name=value " pair is transmitted to the server. As with the text box, discussed earlier, the name of the textarea form element is transmitted to the server regardless of whether any data are placed in the textarea box or not.

### An Example of the Post Method

Figure 13 shows that the " name=value " pairs of the data elements are transmitted to the server via the the Address/URL line. Another way of viewing this is to see an example of the information that is sent to the server by a browser when the browser is requesting some "service" (e.g. a file) from the server.

Let's say that the our email address (the one we entered when we set up our browser) is "jsmith@abcuniv.edu" and that our browser is requesting a file named, spiel.html. Furthermore, let's say the path to the file we are requesting from the server is /home/public_html/spiel.html . When our browser requests this file from the server using the get method, the data (header) sent to the server would look something like what is shown in Figure 14 .

The server would then send the file to our browser or send an error message (remember the "404 File not found" message?) if the file were not there.

If we are asking the server to execute a program (e.g. execute a script on the server, using form data), using the get method, then the data for the program are also provided on the first line of the request for the script execution. Let's say that our script is named forminputs_get.php and that it resides in path noted above, /home/public_html/ . If our data were that contained in the responses in formdemo1f.html , then our request of the server would be similar to that shown in Figure 15

Notice that the file name of the script to be executed is followed by a " ? " and then the pairs of " name=value " are sent, separated by an " & ." It is then the job of the script, residing on the server to parse the string of data provided and process it appropriately. The script we have been using for all of these forms simply reads and echoes these " name=value ."

Whereas using the post method, the data, although not encrypted, are not visible in the browser. Figure 16 indicates how the data might be sent by the browser to the server, using the post method.

Notice that the data follow (after one blank line) the other parts of the request to the server from the browser. As before, it is then the job of the script to parse the data and process it according to the application.

If you wanted to provide a link that executed a script based some specific set of data (e.g. providing a link to dictionary.com that will return the definition of "pedantic"), you would use the get method. If you did not want the data stream to be visible in your browser, then you would use the post method.

As far as the XHTML is concerned, the only things to change are the values of method attribute and possibly the action attribute. formdemo1f_post.html uses the post method and Figure 17 shows the XHTML code and Figure 18 shows the view of the file from the Firefox web browser.

As with our earlier examples using the get method, the script to be executed ( Listing ) simply "echoes" the "name=value" pairs of all the form element data sent tothe server.

## Dreamweaver and Forms

To construct a form using Dreamweaver, you can begin the process (insert the form tag) using the Forms category of the Insert Panel as shown in Figure 19 or by way of Insert/Form>Form using the Menu bar, as shown in Figure 20. . Either process generates a red dotted line rectangle in which you can then begin to place each form element. The Properties Panel, shown in Figure 21 demonstrates how the name, id, method,  and action attributes for the form are set.

Each of the form elements can then be chosen from the Forms category of the Insert Panel as shown Figure 22 . The same capability is available in from the Menu Bar, using Insert/Form>..., as shown in Figure 20 .

Whether you use the Insert Panel or the Menu Bar to insert additional form elements, the Input Tag Accessibility Attributes dialog box shown in Figure 23 will usually appear to help generate the <label> tag for each form element. If the Input Tag Accessibility Attributes dialog box does not appear and you want to be prompted with Dreamweaver's accessibility support, this support can be turned on using the Menu Bar and Edit/Preferences... and picking the appropriate options under the Accessibility Category of the Preferences dialog box, as shown in Figure 24

## Conclusion

The following might also be helpful:

• Links to the other modules in this "Web Programming Quick Start" series are available
• Links to other screen recordings for these modules are also available (time permitting).

## Content actions

PDF | EPUB (?)

### What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

#### Definition of a lens

##### Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

##### What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

##### Who can create a lens?

Any individual member, a community, or a respected organization.

##### What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks