put
and delete
but these have been removed until more is known abut how these verbs should be implemented by browsers. See HTML5 Bug 10671.This is an old revision of the document!
~~SLIDESHOW~~
Contact Hour 4: To be discussed on Tuesday 7th February, 2012.
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.
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.
User interfaces for Web Applications.
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:
<input>
tag?size
and maxlength
attributes of <input>
for text controls?At the end of this lecture you should be able to answer these questions:
multiple
attribute with a menu?At the end of this lecture you should be able to answer these questions:
placeholder
do?autofocus
for?required
for?method=“get”
as the default for the form element a bad thing?<form>
element is a container for a group of form widgets.<form>
tag<form>
is action
, which specifies the URI of the application that is to be called when the Submit button is clicked:action = "http://www.swan.ac.uk/cgi-bin/survey.pl"
action
attribute, the value of action
is the empty stringmethod
attribute of <form>
specifies one of the two possible techniques of transferring the form data to the server, get
and post
1)get
and post
are discussed in great detail later in the module.get
method is the default and this is not necessarily a good thing!<input>
tag<input>
specifies the kind of user input component or widget being createdWe will consider the full set of HTML5 form elements in a later session.
<input type=“text”>
size
attributemaxlength
, which causes excess input to be ignored<form action=""> <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”>
value
attribute, which is the widget's value in the form data when the check-box is 'checked'checked
attribute must be present2)Grocery Checklist: checkbox.html
<html> <div style=“border: 2px solid blue; padding: 5px;”>
<p> Grocery Checklist </p> <form action = ""> <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 = ""> <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”>
<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 = "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> </body> </html>
<select name=“..”>
<select>
tagsmultiple
attribute3)name
attribute of <select>
is requiredsize
attribute of <select>
can be included to specify the number of menu items to be displayed (the default is 1)size
is set to > 1 or if multiple
is specified, the menu is displayed as a pop-up menu
<option>
<option>
tagvalue
attribute is the value returned when menu item is selected<option>
element is the value as presented to the user … it need not be the same as that used in the value
attribute.<option>
tag can include the selected attribute which specifies that the item is preselected<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 = ""> <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 = ""> <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 = ""> <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>
<textarea>
rows
and cols
attributes to specify the size of the text area<textarea>
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 = "handler"> <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 = "handler"> <p> <textarea name = "aspirations" rows = "3" cols = "40"> (Be brief and concise) </textarea> </p> </form> </body> </html>
<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>
<form>
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.
<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>
<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>
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>
<html> <div style=“border: 2px solid blue; padding: 5px;”>
<h2> Visitor's Feedback </h2> <hr /> <form action="/cgi-bin/echo_form.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_form.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?
<html> <div style=“border: 2px solid blue; padding: 5px;”>
<h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2> <form action= "/cgi-bin/echo_form.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_form.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>
<hr />
In the lecture, I shall use the Firebug extension for the Firefox web browser 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:
<label>
element.<fieldset>
element is another useful container element that used to visually group related form elements.<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.
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:
<input>
tag?<input>
for text controls?At the end of this lecture you should be able to answer these questions:
At the end of this lecture you should be able to answer these questions:
placeholder
do?autofocus
for?required
for?method=“get”
as the default for the form element a bad thing?checkout
and a reset button labeled cancel
to the form created in Exercise 1.<label for>
elements to the text fields added in Exercise and link them to suitable id
attributes in the associated widgets.placeholder
to the name text field and provide a suitable user hint.required
attribute to the name text field.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
put
and delete
but these have been removed until more is known abut how these verbs should be implemented by browsers. See HTML5 Bug 10671.checked=“checked”
.multiple=“multiple”
in XHTML