Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)
Every form must include a button that submits the form data to the server. You can put any label you like on this button with the value attribute: <input type="submit" value="Place My Order Now!" /> A gray button will be sized to fit the label you put in the value attribute. When the user clicks it, all data items on the form are sent to the email address or program script specified in the form action attribute. You can also include a button that clears all entries on the form so that users can start over if they change their minds or make mistakes. Use the following: <input type="reset" value="Clear This Form and Start Over" /> If the standard Submit and Reset buttons look a little bland to you, you'll be glad to know that there is an easy way to substitute your own graphics for these buttons. Type the following to use an image of your choice for a Submit button: <input type="image" src="/books/4/158/1/html/2/button.gif" alt="Order Now!" />
The image named button.gif will appear on the page, and the form will be submitted whenever someone clicks the button.gif image. You can also include any attributes normally used with the <img /> tag, such as alt and style. (Hour 8, "Putting Graphics on a Web Page," introduces the <img /> tag.)
Listing 18.2 and Figure 18.3 show a very simple form that uses a customized Submit button. (You saw how to make graphics similar to the signup.gif button in Hour 7, "Creating Your Own Web Page Graphics.") Listing 18.2. This Page Uses an <input /> Tag as a Custom Graphical Submit Button
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>FREE!</title> </head> <body> <h1>Free Electronic Junk Mail!</h1> <form method="post" action="mailto:you@youremail.com" enctype="text/plain"> <p> To start receiving junk e-mail from us daily*, enter your e-mail address below and click on the <em>SignUP!</em> button. </p> <p> <input type="text" name="anotherone" size="25" /> <input type="image" src="/books/4/158/1/html/2/signup.gif" alt="Sign Up Now!" /> </p> <p> By clicking the above button, you also agree to the terms of our Marketing Agreement, which is available upon request at our offices in Bangkok, Thailand. A fee may be charged for removal from our list if you elect at a later date not to receive additional sales literature. </p> </form> </body> </html>
|
Категории