Creating a Form - HTML5 - page 161

When rendered in a modern browser, this code creates a button similar to the one created with
the previous <input> example code. So what's the difference between the two approaches? With a
<button> tag, you can add other HTML elements as content, including images. For example:

<button type=”submit” name=”submitButton”>
<img src=”images/checkmark.png” width=”16” height=”16” />
Submit your form
</button>

As you can see in Figure 19-10, this code cleanly integrates a checkmark with the button text. More
changes can be applied via CSS.

FiGure 19-9 FiGure 19-10

The one downside of using the <button> tag is that it is not supported in older versions of Internet
Explorer, specifically IE 6 and below.

If your images don't align with the text in the <button> tag, adjust the graphics'
position with the CSS vertical-align property. Quite often, setting that prop-
erty to middle does the trick.

Try iT

In this Try It you learn how to add buttons to your form.

Lesson requirements

You will need the tpa_saturn.html file from the previous exercise, as well as a text editor and web
browser.

step-by-step
1.

Open your text editor.

2. From the Lesson_19 folder, open tpa_saturn.html saved in the previous exercise.