Forms and Web User Interfaces

Contact Hour 4: To be discussed on Tuesday 5th February, 2013.

Lecturer: Dr Chris P. Jobling.

Forms are the most common way to communicate from a browser to a web server. They are also created using HTML tags.

These notes are based on Sections 2.9 and 2.11 of Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006.

This material is expanded in Chapter 3 of Nigel Chapman and Jenny Chapman, Web Design: A complete introduction, Wiley, 2006.

Some additional attributes that have been added in HTML5 have been added to this discussion this year.

• In this lecture we complete our revision of the most commonly used subset of the Hypertext Markup Language (HTML).
• We look at forms which are the most common way to communicate information from a user to a web server.
• Forms are the user-interface of web applications.
• As before, examples are on-line and code is reproduced in the handout.
• The new form elements added by HTML5 will be discussed in a later session.

Further reading. E.g.: A different treatment of HTML given in Chapter 3 of Chapman and Chapman, Web Design: a complete introduction, John wiley, 2006 and Part I (Chapters 2-3) of the textbook Chris Bates, Web Programming: Building Internet Applications, 3rd Edition, John Wiley, 2006. However, you should note that Bates tends to use the simpler form of HTML which is perfectly valid, but doesn't match the stricter conventions we are used to from our study of XHTML. You will find additional information about web forms and further examples in Chapter 14 of Elisabeth Freeman and Eric Freeman, Head First HTML with CSS & XHTML, O'Reilly Media,Inc., 2006. Information about the new attributes and new form elements are to be found in Chapter 9 A Form of Madness of Dive Into HTML5.

Before these examples will work you will need to install the EG-259 Virtual Machine. See the instructions at https://github.com/cpjobling/eg-259-vm.

• Go directly to the examples: http://localhost:4567/eg-259/examples/lecture3
• Browse the source code on GitHub: eg-259/examples/lecture3

User interfaces for Web Applications.

• Forms
• User Interface Components (Widgets)
• Useful Attributes Added by HTML5
• Two Examples

Consider converting these into multiple choice questions for the PeerWise exercise.

At the end of this lecture you should be able to answer these questions:

1. What are controls?
2. Which controls discussed in this session are created with the <input> tag?
3. What is the default size of a text control's text box?
4. What is the difference between the size and maxlength attributes of <input> for text controls?

At the end of this lecture you should be able to answer these questions:

1. What is the difference in behaviour between a group of check box buttons and a group of radio buttons?
2. Under what circumstances is a menu used instead of a radio button group?
3. What is the drawback of specifying the multiple attribute with a menu?
4. How are scroll bars specified for text-area controls?

At the end of this lecture you should be able to answer these questions:

1. What does the new HTML5 attribute placeholder do?
2. What is the new HTML5 attribute autofocus for?
3. What is the new HTML5 attribute required for?
4. Why is the choice of method=“get” as the default for the form element a bad thing?

• A form is the usual way information is gotten from a user to a web application
• HTML has tags to create a collection of objects that implement this information gathering
• The objects are called controls or widgets (e.g., radio buttons and checkboxes)
• When the submit button of a form is clicked, the form's values are collected by the browser and are sent to the server in an HTTP request.

• The <form> element is a container for a group of form widgets.
• All of the widgets must be defined in the content of a <form> tag
• There can be any number of independent forms on a single web page

• The only required attribute of <form> is action, which specifies the URI of the application that is to be called when the Submit button is clicked:

    action =
       "http://localhost:4567/cgi-bin/echo_params.cgi"

• If the form has no action attribute, the value of action is the empty string

• The method attribute of <form> specifies one of the two possible techniques of transferring the form data to the server, get and post¹⁾
• The actions of the get and post methods are discussed in great detail later in the module.
• The get method is the default

The fact that the get method is the default is not necessarily a good thing!

• HTML4/XHTML 1.0 has a relatively small set of user interface components
• Most are created with the <input> tag
• The type attribute of <input> specifies the kind of user input component or widget being created
• HTML5 adds more input types and features, but browser support for these is patchy.

We will consider the full set of HTML5 form elements in a later session.

• The main types of widget are:
  • Text
  • Checkboxes
  • Radio buttons
  • Menus and menu items
  • Text area
  • Submit and reset buttons

<input type=“text”>

• Creates a horizontal box for text input
• Default size is 20 (characters); it can be changed with the size attribute
• If more characters are entered than will fit, the box is scrolled (shifted) left
• If you don't want to allow the user to type more characters than will fit, set maxlength, which causes excess input to be ignored

    <form action="/cgi-bin/echo_params.cgi">
      <p>
        <label for="textinput">Enter something:</label> 
        <input id="textinput" type="text" name="Name" size="25" />
      </p>
    </form>

<html> <div style=“border: 2px solid blue; padding: 5px;”>

  <form action="">
    <p>
      <label for="textinput">Enter something:</label> <input id="textinput" type="text" name="Name" size="25" />
    </p>
  </form>

</div> </html>

Note the label element is used to define a label. The value of the attribute for should be an id reference. The label is linked to the form element with the matching id.

It is quite common practice to give form elements an id because this can be used by JavaScript to identify the form element that fires an event, or as in this case, to relate the label to the corresponding form element. This is a useful accessibility feature. You might want to look at the remaining examples in this session to see if label is not more appropriate than the plain text used to label form widgets.

See the formal definition of label

<input type=“checkbox”>

• Check-boxes are used to collect multiple choice input
• Every check-box requires a value attribute, which is the widget's value in the form data when the check-box is 'checked'
• A check-box that is not 'checked' contributes no value to the form data
• By default, no check-box is initially 'checked'
• To initialize a check-box to 'checked', the checked attribute must be present²⁾

Grocery Checklist: checkbox.html

<html> <div style=“border: 2px solid blue; padding: 5px;”>

    <p>
      Grocery Checklist
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        <input type = "checkbox"  name = "groceries"
        value = "milk"  checked />
        Milk
        <input type = "checkbox"  name = "groceries"
        value = "bread" />
        Bread
        <input type = "checkbox"  name = "groceries"
        value= "eggs" />
        Eggs
      </p>
    </form>

</div> </html>

Code for the Example

<!DOCTYPE html>
<!-- checkbox.html
An example to illustrate a checkbox
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Checkboxes </title>
  </head>
  <body>
    <p>
      Grocery Checklist
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        <input type = "checkbox"  name = "groceries"
        value = "milk"  checked />
        Milk
        <input type = "checkbox"  name = "groceries"
        value = "bread" />
        Bread
        <input type = "checkbox"  name = "groceries"
        value= "eggs" />
        Eggs
      </p>
    </form>
  </body>
</html>

<input type=“radio”>

• Radio buttons are collections of check-boxes in which only one button can be 'checked' at a time
• Every button in a radio button group MUST have the same name
• If no button in a radio button group is 'pressed', the browser often 'presses' the first one

• Age category: radio.html

<html> <div style=“border: 2px solid blue; padding: 5px;”>

  <p>
    Age Category
  </p>
  <form action = "handler">
    <p>
      <input type = "radio"  name = "age"  value = "under20" checked />
      0-19
      <input type = "radio"  name = "age"  value = "20-35" />
      20-35
      <input type = "radio"  name = "age"  value = "36-50" />
      36-50
      <input type = "radio"  name = "age"  value = "over50" />
      Over 50
    </p>
  </form>

</div> </html>

<!DOCTYPE html>
<!-- radio.html
An example to illustrate radio buttons
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Radio </title>
  </head>
  <body>
    <p>
      Age Category
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        <input type = "radio"  name = "age"  value = "under20" checked />
        0-19
        <input type = "radio"  name = "age"  value = "20-35" />
        20-35
        <input type = "radio"  name = "age"  value = "36-50" />
        36-50
        <input type = "radio"  name = "age"  value = "over50" />
        Over 50
      </p>
    </form>
  </body>
</html>

<select name=“..”>

• Menus are created with <select> tags
• There are two kinds of menus, those that behave like check-boxes and those that behave like radio buttons (the default)
• Menus that behave like check-boxes are specified by including the multiple attribute³⁾
• The name attribute of <select> is required

• The size attribute of <select> can be included to specify the number of menu items to be displayed (the default is 1)
• If size is set to > 1 or if multiple is specified, the menu is displayed as a pop-up menu

<option>

• Each item of a menu is specified with an <option> tag
• value attribute is the value returned when menu item is selected
• Content of the <option> element is the value as presented to the user … it need not be the same as that used in the value attribute.
• An <option> tag can include the selected attribute which specifies that the item is preselected

• Another grocery menu: menu.html

<html>

  <div style="border: 2px solid blue; padding:5px">
  <p>
    Grocery Menu - milk, bread, eggs, cheese
  </p>
  <form action = "">
    <p>
      With <code>size="1"</code> (the default)
      <select name = "groceries">
        <option value = "milk"> milk </option>
        <option value = "bread"> bread </option>
        <option value = "eggs"> eggs </option>
        <option value = "cheese"> cheese </option>
      </select>
    </p>
    </div>

</html>

<!DOCTYPE html>
<!-- menu.html
An example to illustrate menus
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Menu </title>
  </head>
  <body>
    <p>
      Grocery Menu - milk, bread, eggs, cheese
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        With <code>size="1"

(the default)

      <select name = "groceries">
        <option value = "milk"> milk </option>
        <option value = "bread"> bread </option>
        <option value = "eggs"> eggs </option>
        <option value = "cheese"> cheese </option>
      </select>
    </p>
  </form>
</body>

</html> </code>

After changing size to 2: menu2.html

<html>

  <div style="border:2px solid blue; padding: 5px;">
  <p>
    Grocery Menu - milk, bread, eggs, cheese
  </p>
  <form action = "/cgi-bin/echo_params.cgi">
    <p>
      With <code>size = "4"</code> (specified) and <code>multiple</code>. 
      Note use of <code>selected</code> because we always need bread!
      Ctrl-Click (Command-Click on Mac) to make multiple selections.
      <select name = "groceries" size="4" multiple>
        <option value="milk"> milk </option>
        <option value="bread" selected> bread </option>
        <option value="eggs"> eggs </option>
        <option value="cheese"> cheese </option>
      </select>
    </p>
    </div>

</html>

<!DOCTYPE html>
<!-- menu.html
An example to illustrate menus
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Menu </title>
  </head>
  <body>
    <p>
      Grocery Menu - milk, bread, eggs, cheese
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        With <code>size = "4"

(specified) and

multiple

.

      Note use of <code>selected</code> because we always need bread!
      Ctrl-Click (Command-Click on Mac) to make multiple selections.
      <select name = "groceries" size="4" multiple>
        <option value="milk"> milk </option>
        <option value="bread" selected> bread </option>
        <option value="eggs"> eggs </option>
        <option value="cheese"> cheese </option>
      </select>
    </p>
  </form>
</body>

</html> </code>

<textarea>

• Text area created with <textarea>
• Usually include the rows and cols attributes to specify the size of the text area
• Default text can be included as the content of <textarea>
• Scrolling is implicit if the area is overfilled

An example to illustrate a textarea: textarea.html

<html> <div style=“border: 2px solid blue; padding: 5px;”>

    <p>
      Please provide your employment aspirations
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        <textarea name = "aspirations"  rows = "3"  cols = "40">
          (Be brief and concise) 
        </textarea>
      </p>
    </form>

</div> </html>

<!DOCTYPE html>
<!-- textarea.html
An example to illustrate a textarea
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Textarea </title>
  </head>
  <body>
    <p>
      Please provide your employment aspirations
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        <textarea name = "aspirations"  rows = "3"  cols = "40">
          (Be brief and concise) 
        </textarea>
      </p>
    </form>
  </body>
</html>

• Both are created with <input>:

    <input type = "reset" value = "Reset Form">
    <input type = "submit" value = "Submit Form">

<html> <div style=“border: 2px solid blue; padding: 5px”> <form action=“”>

  <input type = "reset" value = "Reset Form">
  <input type = "submit" value = "Submit Form">

</form> </div> </html>

• Submit has two actions:
  1. Encode the data of the form
  2. Request that the server execute the server-resident program specified as the value of the action attribute of <form>
• A Submit button is required in every form
• Reset
  1. returns all the controls on the page to their initial state (that is as they were when the web page was first loaded).
  2. sends nothing to the server

• HTML5 introduces many new form features, but not all are supported on all browsers.
• However there are some attributes that work on modern browsers and degrade gracefully on older browsers.
• They can thus be used today and will give users of modern browsers a better user experience while users of older browsers will not have a worse experience.
• On older browsers there are methods of “back-porting” the same functionality with JavaScript.

For more on HTML5 forms see Chapter 9 A Form of Madness on Dive Into HTML5 which also includes information on the work-a-rounds for browsers that do not yet support the attributes discussed.

• The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field.
• Placeholder text is displayed inside the input field as long as the field is empty and not focused.
• As soon as you click on (or tab to) the input field, the placeholder text disappears.

<form>
  <input name="q" placeholder="enter query" />
  <input type="submit" value="Search" />
</form>

<html> <div style=“border: 2px solid blue; padding: 5px;”> <form>

<input name="q" placeholder="enter query" />
<input type="submit" value="Search" />

</form> </div> </html>

• As an aid to accessibility and to make browsers more consistent, HTML5 introduces an autofocus attribute on all web form controls.
• The autofocus attribute does exactly what it says on the tin: as soon as the page loads, it moves the input focus to a particular input field.
• But because it’s just markup instead of script, the behavior will be consistent across all web sites.
• Also, browser vendors (or extension authors) can offer users a way to disable the autofocusing behavior.

<form>
  <input name="q" autofocus />
  <input type="submit" value="Search" />
</form>

<html> <div style=“border: 2px solid blue; padding: 5px;”> <form>

<input name="q" autofocus />
<input type="submit" value="Search" />

</form> </div> </html>

• In HTML5 forms you can specify that certain fields are required.
• Required fields must have a value before you can submit the form.

The markup for required fields is as simple as can be:

<form>
  <input id="q" required />
  <input type="submit" value="Search" />
</form>

As rendered: try submitting the form…. <html> <div style=“border: 2px solid blue; padding: 5px;”> <form>

<input id="q" required />
<input type="submit" value="Search" />

</form> </div> </html>

• A visitor feedback form
• A sales order form

• A visitor feedback form: feedback.html from Bates with required fields, autofocus and placeholder text.

<html> <div style=“border: 2px solid blue; padding: 5px;”>

  <h2> Visitor's Feedback </h2>
  <hr />
  <form action="/cgi-bin/echo_params.cgi" method="post">
    <p>
      <label for="yourName">Your Name:</label>
      <input type="text" id="yourName"
      name = "name"
      maxlength="32"
      size="16" 
      placeholder="enter your name" required autofocus />
    </p>
    <p>
      <label for="yourEmailAddress">Your E-Mail Address:</label>
      <input type="text" id="yourEmailAddress"
      name = "email"
      maxlength="32"
      size="16" 
      placeholder="you@example.com" required />
    </p>
    <p>
      <label for="selectYourLocation">Select Your Location:</label>
      <select name="country" id="selectYourLocation"
      size="1">
        <option value="United States"> United States </option>
        <option value="United Kingdom" selected> United Kingdom </option>
        <option value="Mexico"> Mexico </option>
        <option value="Brazil"> Brazil </option>
      </select>
    </p>
    <p>
      <label for="comments">Comments:</label>
      <br />
      <textarea name="comments" id="comments"
         rows="5"
         cols="35" placeholder="Please Enter Your Comments on this Site."></textarea>
    </p>
    <p>
      <input type="submit"
      name="feedback"
      value="Submit Details" />
    </p>
  </form>
  <hr />

</div> </html>

<!DOCTYPE html>
<!-- feedback.html
A simple feedback form.
-->
<html lang="en">
  <head>
    <meta char="utf-8">
    <title> Bill Smiggins Inc. </title>
  </head>
  <body>
    <h2> Visitor's Feedback </h2>
    <hr />
    <form action="/cgi-bin/echo_params.cgi" method="post">
      <p>
        <label for="yourName">Your Name:</label>
        <input type="text" id="yourName"
        name = "name"
        maxlength="32"
        size="16" required autofocus />
      </p>
      <p>
        <label for="yourEmailAddress">Your E-Mail Address:</label>
        <input type="text" id="yourEmailAddress"
        name = "email"
        maxlength="32"
        size="16" required />
      </p>
      <p>
        <label for="selectYourLocation">Select Your Location:</label>
        <select name="country" id="selectYourLocation"
        size="1">
          <option value="United States"
          selected="selected"> United States </option>
          <option value="United Kingdom"> United Kingdom </option>
          <option value="Mexico"> Mexico </option>
          <option value="Brazil"> Brazil </option>
        </select>
      </p>
      <p>
        <label for="comments">Comments:</label>
        <br />
        <textarea name="comments" id="comments"
           rows="5"
           cols="35" placeholder="Please Enter Your Comments on this Site."></textarea>
      </p>
      <p>
        <input type="submit"
        name="feedback"
        value="Submit Details" />
      </p>
    </form>
    <hr />
  </body>
</html>

If you want to include a long list such as all countries or US states, these are widely available for download. But you need to take care with how the information will be presented. For example, you might want to put the countries that you expect most of your customers to come from earlier in the list. If you have an international audience, where will you get such a list in your viewer's language?

• A form for taking sales orders for popcorn: popcorn.html from Sebasta.

<html> <div style=“border: 2px solid blue; padding: 5px;”>

  <h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2>
  <form action=
  "/cgi-bin/echo_params.cgi"
  method="post">
    <!-- A borderless table of text widgets for name and address -->
    <table>
      <tr>
        <td><label for="buyersName">Buyer's Name:</label></td>
        <td>
        <input type="text" id="buyersName" name="name" size="30" 
               placeholder="enter your name" required autofocus />
        </td>
      </tr>
      <tr>
        <td><label for="streetAddress">Street Address:</label></td>
        <td>
        <input type="text" id="streetAddress" name="street" size="30" 
               placeholder="enter your street adderess" required />
        </td>
      </tr>
      <tr>
        <td><label for="cityStateZip">City, State, Zip:</label></td>
        <td>
        <input type="text" id="cityStateZip" name="city" size="30" 
               placeholder="enter your City/State/Zip code" required />
        </td>
      </tr>
    </table><!-- A bordered table for item orders -->
    <table border="border">
      <!-- First, the column headings -->
      <tr>
        <th> Product Name </th>
        <th> Price </th>
        <th> Quantity </th>
      </tr><!-- Now, the table data entries -->
      <tr>
        <th><label for="unpopped">Unpopped Popcorn (1 lb.)</label></th>
        <td> $3.00 </td>
        <td>
        <input type="text" id="unpopped" name="unpop" size="2" />
        </td>
      </tr>
      <tr>
        <th><label for="caramel">Caramel Popcorn (2 lb. canister)</label></th>
        <td> $3.50 </td>
        <td>
        <input type="text" id="caramel" name="caramel" size="2" />
        </td>
      </tr>
      <tr>
        <th><label for="caramelNut">Caramel Nut Popcorn (2 lb. canister)</label></th>
        <td> $4.50 </td>
        <td>
        <input type="text" id="caramelNut" name="caramelnut" size="2" />
        </td>
      </tr>
      <tr>
        <th><label for="toffeyNut">Toffey Nut Popcorn (2 lb. canister)</label></th>
        <td> $5.00 </td>
        <td>
        <input type="text" id="toffeyNut" name="toffeynut" size="2" />
        </td>
      </tr>
    </table><!-- The radio buttons for the payment method -->
    <h3> Payment Method: </h3>
    <p>
      <input type="radio" name="payment" value="visa" checked />
      Visa
      <input type="radio" name="payment"
      value="mc" />
      Master Card
      <input type="radio" name=
      "payment" value="discover" />
      Discover
      <input type=
      "radio" name="payment" value="cheque" />
      Cheque
      <br />
    </p><!-- The submit and reset buttons -->
    <p>
      <input type="submit" value="Submit Order" />
      <input type=
      "reset" value="Clear Order Form" />
    </p>
  </form>

</div> </html>

<!DOCTYPE html>
<!-- popcorn.html
This describes popcorn sales form page
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Popcorn Sales Form </title>
  </head>
  <body>
    <h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2>
    <form action="/cgi-bin/echo_params.cgi" method="post">
      <!-- A borderless table of text widgets for name and address -->
      <table>
        <tr>
          <td><label for="buyersName">Buyer's Name:</label></td>
          <td>
          <input type="text" id="buyersName" name="name" size="30" 
                 placeholder="enter your name" required autofocus />
          </td>
        </tr>
        <tr>
          <td><label for="streetAddress">Street Address:</label></td>
          <td>
          <input type="text" id="streetAddress" name="street" size="30" 
                 placeholder="enter your street adderess" required />
          </td>
        </tr>
        <tr>
          <td><label for="cityStateZip">City, State, Zip:</label></td>
          <td>
          <input type="text" id="cityStateZip" name="city" size="30" 
                 placeholder="enter your City/State/Zip code" required />
          </td>
        </tr>
      </table><!-- A bordered table for item orders -->
      <table border="border">
        <!-- First, the column headings -->
        <tr>
          <th> Product Name </th>
          <th> Price </th>
          <th> Quantity </th>
        </tr><!-- Now, the table data entries -->
        <tr>
          <th><label for="unpopped">Unpopped Popcorn (1 lb.)</label></th>
          <td> $3.00 </td>
          <td>
          <input type="text" id="unpopped" name="unpop" size="2" />
          </td>
        </tr>
        <tr>
          <th><label for="caramel">Caramel Popcorn (2 lb. canister)</label></th>
          <td> $3.50 </td>
          <td>
          <input type="text" id="caramel" name="caramel" size="2" />
          </td>
        </tr>
        <tr>
          <th><label for="caramelNut">Caramel Nut Popcorn (2 lb. canister)</label></th>
          <td> $4.50 </td>
          <td>
          <input type="text" id="caramelNut" name="caramelnut" size="2" />
          </td>
        </tr>
        <tr>
          <th><label for="toffeyNut">Toffey Nut Popcorn (2 lb. canister)</label></th>
          <td> $5.00 </td>
          <td>
          <input type="text" id="toffeyNut" name="toffeynut" size="2" />
          </td>
        </tr>
      </table><!-- The radio buttons for the payment method -->
      <h3> Payment Method: </h3>
      <p>
        <input type="radio" name="payment" value="visa" checked />
        Visa
        <input type="radio" name="payment"
        value="mc" />
        Master Card
        <input type="radio" name=
        "payment" value="discover" />
        Discover
        <input type=
        "radio" name="payment" value="cheque" />
        Cheque
        <br />
      </p><!-- The submit and reset buttons -->
      <p>
        <input type="submit" value="Submit Order" />
        <input type=
        "reset" value="Clear Order Form" />
      </p>
    </form>
  </body>
</html>

In the lecture, I shall use the Chrome Developer tools to examine the HTTP request and response from the example form. Try it yourself see homework problems.

There are some other basic form elements that we don't have time to discuss here, but are nonetheless useful:

• We have already mentioned the <label> element.
• The <fieldset> element is another useful container element that used to visually group related form elements.
• The <button> element is useful way to create a button that can be attached to a JavaScript event handler when you don't want to submit anything to the server or when you want to be able to have richer content than the submit button will allow.

For more information about these see: Form Elements on the SitePoint reference site.

User interfaces for Web Applications.

• Forms
• User Interface Components (Widgets)
• Useful Attributes Added by HTML5
• Two Examples

Don't forget to consider converting these into multiple choice questions for the PeerWise exercise.

At the end of this lecture you should be able to answer these questions:

1. What are controls?
2. Which controls discussed in this session are created with the <input> tag?
3. What is the default size of a text control's text box?
4. What is the difference between the size and maxlength attributes of <input> for text controls?

At the end of this lecture you should be able to answer these questions:

1. What is the difference in behaviour between a group of check box buttons and a group of radio buttons?
2. Under what circumstances is a menu used instead of a radio button group?
3. What is the drawback of specifying the multiple attribute with a menu?
4. How are scroll bars specified for text-area controls?

At the end of this lecture you should be able to answer these questions:

1. What does the new HTML5 attribute placeholder do?
2. What is the new HTML5 attribute autofocus for?
3. What is the new HTML5 attribute required for?
4. Why is the choice of method=“get” as the default for the form element a bad thing?

1. Create, test and validate an XHTML document that has a form with the following controls:
   1. A text box to collect the user's name
   2. Four check boxes, one each for the following items:
      1. Four 100-Watt light bulbs for £1.39
      2. Eight 100-Watt light bulbs for £2.49
      3. Four 100-Watt, long-life light bulbs for £2.29
      4. Eight 100-Watt, long-life light bulbs for £4.29
   3. A collection of three radio buttons that are labeled as follows:
      1. Visa
      2. Mastercard
      3. Switch

1. Add a submit button labeled checkout and a reset button labeled cancel to the form created in Exercise 1.
2. Add a menu to the form created in Exercise 1 to select a delivery method. E.g. choice of next day delivery, 1st class post, free post, courier, etc. Make 1st class post the default delivery method.
3. Add a text area to the form created in Exercise 1 to collect user feedback.
4. Add <label for> elements to the text fields added in Exercise and link them to suitable id attributes in the associated widgets.

1. Add a HTML5 attribute placeholder to the name text field and provide a suitable user hint.
2. Add the HTML5 required attribute to the name text field.
3. Add the HTML5 autofocus attribute to put the initial form focus on the name text field.

All the exercises in this lecture were taken from Chapter 2 of Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006. They are gathered together here in a homework sheet for your convenience.

Web Applications

• Web Applications
• The LAMP platform
• Some Example Web Applications

Previous Lecture | home | Next Lecture