---

Web Forms for Database Queries

---

The SPIRES High Energy Physics preprint database is an important and widely used resource for high energy physicists.  In the 1980s, however, this database was difficult and time consuming to use.  The World Wide Web (WWW) changed the situation completely for physicists and for society in general.   While working at the European Particle Physics Laboratory (CERN) in 1990, computer scientist Tim Berners-Lee invented the World Wide Web.  With Robert Cailliau, he developed the first point-and-click hypertext browser-editor and the first Web server.  Moreover, they defined the addressing mechanisms, URLs; the collection of rules for exchanging information, including text, graphics, and sound, on the WWW, Hypertext Transfer Protocol (http); and the programming language to create web pages, HTML.  In early 1992, Berners-Lee demonstrated the World Wide Web live at a High Energy Physics workshop in southern France.  The session ended with an impressive demonstration of web access with forms for the SPIRES database. Word spread quickly among the physics community of the new, clear, and easy-to-use method of obtaining information from a database.  In a very short time, the possibilities of the World Wide Web dazzled and intrigued many others, and revolutionary changes to our society began to occur.

---

Introduction

By using forms on the web, we have an interface to information in online databases. However, HTML forms are static and cannot change. When a form is completed and submitted, the request must be sent to the database in real-time. After any additional processing, the desired information is dynamically returned to a web page or downloaded to the user. 

Several methods exist for performing the actions from the request to the return of information. In these modules, we use the Common Gateway Interface (CGI) programs, which the web daemon calls, to transfer information between the client (user) and database.

Common Gateway Interface (CGI) is the specification or collection of rules for transmission of information between a server and an external application. This application is a CGI program, which can be in C++, Perl, or another programming language and can have embedded SQL commands for accessing a database. Figure 1 diagrams the information pathway between user and database containing web server, CGI, and CGI program. In this module, we discuss the creation of HTML forms to enter queries, and in the module "CGI Programs and Web Forms" and "CGI Programs and Databases" consider C++ programs as bridges between forms and database.

Figure 1. Path between user and database

Definition. Common Gateway Interface (CGI) is the specification or collection of rules for transmission of information between a server and an external application. A CGI Program is an application that transmits information to and/or from a server.

To introduce the use of forms and CGI to interface databases, we consider several examples. The web page "Atomic Weights and Isotopic Compositions of the Elements with Relative Atomic Masses," which is derived from one at http://physics.nist.gov/PhysRefData/Compositions/index.html, has a variety of form elements, including a text box, checkbox, radio buttons, submit button, and reset button.  Figure 2 presents an image of the page with form element names and arrows to those components in red.

Figure 2  Web page with form element names and arrows to those components in red

The HTML code for the form begins in the page body with the form tag, <form>, and two attributes, action and method. The value of the action attribute is the full or relative path name of the CGI program that receives the data from the form. With the user input from the form, the CGI program performs an SQL query of an atomic weights database, perhaps does some computations with the result, and communicates the information to the user in a web page or text file.  On many systems, this program must be in directory cgi-bin. The method attribute has value get or post. Upon submission using the get method, the resulting URL includes the CGI program name and the information from the form.  For example, if we type "Ge" in the Atomic Symbol or Number box, leave the default as HTML Table, and press submit, the following URL containing the path name of the CGI program and our input might appear at the top of the browser window:

http://physics.nist.gov/cgi-bin/Compositions/stand_alone.pl?ele=Ge&ascii=html

In this case, output consists of a web page with Atomic Weights and Isotopic Compositions for Ge, Germanium.  In the module "CGI Programs and Web Forms," we explain the meanings of the other elements in this URL.

 To investigate these tasks with the HTML code, the form tag for the "Atomic Weights" page refers to the CGI program stand_alone.pl at /cgi-bin/Compositions on the current computer and says to use access method get, as shown:

With the post method instead of the get method, the process takes two steps with the URL containing the CGI program name but not the form data, such as follows

    http://physics.nist.gov/cgi-bin/Compositions/stand_alone.pl

First, the browser contacts the server indicated in the action attribute and then sends the information in the form.

A table allows us to place form elements beside each other. On the left of the table in "Atomic Weights," we first find a text box with the prompt, "Atomic Symbol or Number." The input tag, <input>, creates a text box or other component that enables the user to enter data. The attribute type indicates which of nine input types apply. For a single-line text box, the value of type is text, the default type. We also indicate the length of text in number of characters using the size attribute for the text box. The maxlength attribute gives the maximum number of characters the user can enter. Because the atomic symbol or number is no larger than three characters, the values of size and maxlength are both 3. So that we can later refer to the data the user enters, we give this and the other input fields names. In this example, the name attribute of the text field is ele. The complete tag for generating the Atomic Symbol or Number text box is as follows:

Below the text box in "Atomic Weights" is a checkbox for the user to indicate if he or she wishes to view information for "All Elements" instead of a specific one. In this case, the value of type is checkbox. Moreover, using the value attribute, we give the field a value of all.  Consequently, when the checkbox is checked, the value communicated for the field is all. The default value for a checked box is on.  With allels being the name of the field, we have the following tag:

In the table cell to the right of the one containing the text box and checkbox of  "Atomic Weights," a cell contains three radio buttons with the type attribute value of radio. Unlike checkboxes in which the user can click more than one of a group, the user can select at most one radio button in a group. Because these three items share the same name attribute value, in this case ascii, they form a group. However, each radio button has a different value. For example, if the "Linearized ASCII Output" button is checked, then the value of this cell, ascii2, is sent to the CGI program. The first radio button has an additional attribute, checked, which appears alone, to pre-check the item. Checkboxes can also have the checked attribute. The HTML code to generate the table cell containing the radio buttons follows:

After the data fields, "Atomic Weights" has two buttons, one for submitting the form and another for resetting or clearing the page to its original default state. The type of the submission button is submit, while the type of the reset button is reset. The value attributes of these fields equal what appears on the button, in this case "Get Data" and "Reset", respectively. The HTML source code to generate these buttons follows"

Four other input types are available: password, file, hidden, and image. We can use a field of type hidden to store data that does not display on the screen but will upload to the server.  For example, the "Online Scientific Databases - Search" page, has a text field for the user to enter search input.  (This page is derived from the page "NIST Standard Reference Data - Online Databases.")  After the text field, the HTML code, which follows, reveals four hidden files, m, in0, dom0, and parsed, with values 54, domain, www.nist.gov/srd, and true, respectively:

<form names="query" actions="http://www.firstgov.gov/fgsearch/index.jsp
">

<input type="text" name="mw0">
<input type="hidden" name="rn" value="54">
<input type="hidden" name="in0" value="domain">
<input type="hidden" name="dom0" value="www.nist.gov/srd">
<input type="hidden" name="parsed" value="true">

To have an image appear on a submission button, we use input type image. With this type, we must specify the location, such as p1search.gif in the directory images, of the image file in a src attribute. The attributes width, height, and border with integer values in quotation marks indicate the number of pixels for the corresponding characteristic of the image.  When the image button cannot be found, the alt attribute designates that the browser display "Search Our Site".  (See Figure 3.)  The align attribute gives the location of the image in the cell with possible values of bottom (default), top, middle, right, or left. For example, the following HTML code for the "Online Scientific Databases - Search" page creates an image search button that is 78 pixels wide and 32 pixels high with no border:

<input type=image src="images/p1search.gif" width="78" height="32" border="0"alt="Search Our Site">

Figure 3. Image button when found and not found so that its name appears

The password type allows the user to enter a password without input showing on the screen. Otherwise, a field of type password is the same as one of type text. The type file is also like type text, except the field is to store the name of a file that will upload to the server. Fields of type text, password, or file can also have name, value, size, and maxlength attributes.  Table 1 summarizes the nine input types, and Table 2 describes other attributes of input.

Table 1. Types associated with the input tag

Table 2. Attributes that can be used in input tag

The web page "NCBI CD-Search" illustrates two other form features, menu and text area. (This page is a simplified version of "Search the Conserved Domain Database with Reverse Position Specific BLAST" by the National Center for Biological Data (NCBD))

The following source code for "NCBI CD-Search" shows that the page uses a form, a CGI program, and the post method:

After a header, the phrase "Search Database:" and a drop-down menu appear in the browser. The select tag, <select>, starts the code for a menu. As with the other form tags, the select tag has a name attribute. Each menu item begins with the option tag, <option>. After the option tag, we have the text that is to appear on the menu for that item. A value attribute is included in the option tag, giving the value to be sent to the server if that item is selected. If the value attribute is missing, the text after the option tag becomes the value of the option. A default option, whose description appears in the menu window, has the additional attribute of selected. There is no closing option tag, but the code for entire menu ends with </select>. The source page for the Search Database menu is as follows:

For all menu options to appear without the user having to click-and-hold, as in this alternate version of the "NCBI CD-Search" page, we include a size attribute with the number of menu items in the select tag, such as follows:

The optional multiple attribute in the select tag indicates that the user can choose more than one option.

The web page "NCBI CD-Search" has another drop-down menu as well as select (Select Query) and reset type buttons. Beneath these is a text area, which is larger than the one-line text box and allows for vertical scrolling. A protein sequence entered into this text area is sent to the server for querying the database. The text area tag, <textarea>, has attributes for the number of rows, rows, and the number of columns columns in the rectangular display with values that are integers, not strings. The HTML code to generate this text area is as follows:

Table 3 summarizes the HTML tags to develop forms with their associated attributes. Table 4 presents the meanings of attributes for form, select, option, or textarea tags.

1. a. Checkboxes for "NCBI-gi" and "Graphical Overview" with values NCBI_GI and OVERVIEW, respectively

    b. The prompt "Alignment view," which is a link to /BLAST/options.html#alignmentviews

    c. A menu with choices "Pairwise", "Master-slave with identities", and "Master-slave without identities" having     values 0, 1, and 2, respectively

    d. The prompt "Send reply to the Email address: " followed by an area 30 characters long for entering an email address

    e. A search button

    f. A reset button

    g. The beginning and ending tags for the form with CGI program /blast/blast.cgi and input method get

2 a. A radio button to enter a value for condition: EXCELLENT, VERYGOOD, GOOD, POOR, VERYPOOR. The values of the choices are integers 0 through 4, respectively.

    b. Repeat Part a with the default condition being EXCELLENT.

    c. Repeat Part a using a menu.

    d. Repeat Part b using a menu.

    e. Repeat Part a using a text box.

    f. Which method(s) from Parts a-d is(are) preferable and why.

    g. Why or why not is a checkbox a good option for entering the data.

3. a. A radio button to enter a value for placebo: true or false

    b. A text field of 9 characters for SSN

    c. Repeat Part b so that user input does not display

    d. A comment block of 3 rows by 30 columns

    e. A submit button

    f. A reset button

    g. Submit button with the image in file submit.jpg

    h. Field with the data, Dr. J. B. White, which the user does not see

    i. The beginning and ending tags for the form with CGI program /cgi-bin/ read_data.cgi and input method put

1. PatientAddr of Figure 1 from the module "Introduction to Databases."  Provide a menu for state with options of GA, SC, FL, and Other.

2. The relation CurrentBioStudy in Quick Review Question 3 from the module "Introduction to Databases." Have a menu of choices for subject and radio buttons for RhFactor and BloodType. Have the database password accessible.

3. The relation LabSection in Quick Review Question 2 from the module "Accessing Databases with SQL." Have a menu for semester, a menu for section with choices A through F, and radio buttons for DragExpWeek with choices 1 through 13.

4. The star database with data as described in Project 5 of "Introduction to Databases." Use as many form features as possible and meaningful.

5. The spectra database from Project 1 of "Accessing Databases with SQL.  Have at least three different input types.

6. The enviro database from Project 2 of "Accessing Databases with SQL."  Have at least three different input types.

7. PatientAddr of Figure 1 from the module "Introduction to Databases."

8. The relation CurrentBioStudy in Quick Review Question 2 from the module "Introduction to Databases." Have a menu of choices for ordering by subject, RhFactor, or BloodType.

9. The relation LabSection in Quick Review Question 2 from the module "Accessing Databases with SQL." Have the information password accessible. Allow the user to choose HTML or text format for the information.

10. The star database with data described in Project 5 of "Introduction to Databases." Use as many form features as possible and meaningful.

11. The spectra database from Project 1 of "Accessing Databases with SQL.  

12. The enviro database from Project 2 of "Accessing Databases with SQL."  

Copyright © 2002, Dr. Angela B. Shiflet
All rights reserved