Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

CHAPTER 12: Working with Forms > Adding Labels to a Form

Adding Labels to a Form

You have a form that collects data from the user, but it isn't very easy to use. You can see how the input element added in the previous section is displayed by the browser in Figure 12-4.

Image

Figure 12-4. The example form

The obvious problem is a complete lack of guidance for the user, who would have to read the source HTML to figure out what each of the text boxes is for. You can address this problem by using the label element, which lets you provide some context for each element in a form. Table 12-7 summarizes the label element.

Image

Image

Listing 12-9 shows how you can give the user some context.

Listing 12-9. Using the label Element

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <p><label for="fave">Fruit: <input id="fave" name="fave"/></label></p>
            <p><label for="name">Name: <input id="name" name="name"/></label></p>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint