Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

334 CHAPTER 7 Working with forms

border-width: medium;

border-color: hsl(255, 100%, 100%);

height: 12px;

text-align: left;

vertical-align: top;

font-family: Arial;

font-size: 12pt;

}

13. Add another style rule to the bottom of the default.css file for elements, but
    only for elements that are inside a
    element. Set the width to 100
    pixels. Set the border width to medium and the border color to hsl(255, 100%, 100%).
    Set the vertical alignment to top. Set the font family to Arial and the font size to 12
    point. Set the top and bottom margins to 10 pixels. Set the left and right margins to 50
    percent.
    Your style should look like the following.
    form button {
    width: 100px;
    border-width: medium;
    border-color: hsl(255, 100%, 100%);
    vertical-align: top;
    font-family: Arial;
    font-size: 12pt;
    margin-top: 10px;
    margin-right: 50%;
    margin-bottom: 10px;
    margin-left: 50%;
    }
    The last thing you must do is add a hyperlink on the main page that references the
    ContactUs.html file.


14. Open the default.html file.


15. In the


16. Press F5 to run to run the application. Click the Contact Us link to display the
    ContactUs.html page. Without entering any data, click the Submit button.
    Notice that the URL has changed, and the QueryString is displayed after the page
    name. Notice also that the name of each element is shown, but there is no data
    because you clicked the Submit button without entering any data. The URL looks like
    the following.
    http://localhost:55506/ContactUs.html?firstName=&lastName=&email=&message=&submit=