HTML Forms Overview

Is current?: 
Yes

Now, we can examine HTML survey pages in depth.  In each of these pages, the user responds to questions and then clicks on a submit button to save the responses. Types of survey items include dropdown, radiobutton, checkbox, textfield, textarea, and radiogrid.  Each type of  survey item comes in two variations.  In one variation, the data are not checked prior to user submission. In the second varitation, Javascript code checks the data upon user submission and alerts the user if required.  For each type of survey page, we’ll first learn about the basic template before examining the more complex template that checks the submitted data.

All survey templates contain the HTML form element.  The content of the page, which includes the survey questions and response options, are placed within the form element.  The following bold-faced lines of HTML code are present in every file and should not be modified. If these lines are not present, data will not be saved.

<code>

<body> <form method="post" action="/implicit/Study" name="form1"> <input type="hidden" name="mode" value="insQuesData" /> <!--The Survey content goes here and is laid out using tables --> <!--The centered submit button for this form is as below--> <p class="textcenter"><script type="text/javascript">writeButton("Continue");</script></p> </form> </body>

</code>

When users respond to various questions, their responses are saved within the representation of the form element in the DOM for that page.  Suppose there was a question in the form that had the name yearofgraduation and had response options 2011, 2012, or 2013.   Assume that the user selected the second option.  This response would then be stored in the DOM in the variable called document.form1.yearofgraduation and the value can be accessed as document.form1.yearofgraduation.value which is the string of characters 2012. This example illustrates the hierarchical structure of the DOM.  The document refers to the page, form1 refers to the name of the form within the document, and yearofgraduation refers to the name of the question within form1.  When naming questionnaire items, please follow the Project Implicit guidelines.

The layout of the questions on the HTML pages depends on the type of survey item.  However, all displays use nested tables.  At the outermost level is a centered table that uses about 80% of the available width of the browser.  This provides a left and right margin for the page content. Each page usually has a heading, and this is followed by the questions.  Each question is enclosed within its own table.  Typically, there are 2 levels of nested tables in these templates.  Various css styles that were defined in the head section of the page are applied to the items and responses.

Recall that we mentioned that each type of survey page also had a variation in which some type of validation is performed.  In most cases, we just check whether the user has responded to all items in that page and give one reminder (these files all end with word nag) if the responses are incomplete.  We also provide an example of a text field that checks whether a typed value is a number and whether an email address provided conforms to the expected structure.

Now you are ready to explore the specifics of each type of HTML survey page.