Creating a Web Form - HTML, CSS, and Dynamic HTML - page 474

Apply your
knowledge of
Web forms and
CSS to create
a comments
form for a sports
blogging page.

Case Problem 1

Data files needed for this case Problem: blog.css, commtxt.css, formsubmit.js, go.png,
modernizr-1.5.js, sblogo.jpg, sblogtxt.htm, stop.png

Sblogger Sports enthusiast Steve Lavent is working on a Web site called Sblogger that
will contain articles and commentary on the world of sports. He's asked for your help in
designing the page on which users can submit their own comments on the articles that
Steve posts to his blog. Your job will be to create a prototype for the commentary form,
and to include HTML code and CSS styles to help validate user input. A preview of the
Web form you'll create is shown in Figure 6-78.

figure 6-78 sblogger comments form

Complete the following:

1. In your text editor, open the sblogtxt.htm and commtxt.css files from the
tutorial.06\case1 folder included with your Data Files. Enter your name and the date
in the comment section of the file. Save the files as sblogger.htm and comments.css ,
respectively.
2. Go to the sblogger.htm file in your text editor and review the contents and structure
of the document. Link the file to the comments.css style sheet.
3. Scroll down to the h2 heading title Post Your Comments , and directly below this
heading insert a form element with the action www.sblogger/cgi-bin/subcomments
using the post method.
4. Within the form element, create a field set with the name and id commentFS .
5. Create a label element with the text username . Within the label element, insert
an input box for the username field. Make the field required and add the title supply
your username .