Form Mastery - HTML5 Mastery: Semantics, Standards, and Styling - page 152

for creating buttons. For instance, compare the two lines of code in the following HTML
snippet, which produces the buttons in Figure 4-17 :
__________
3 A regex is a very compact syntax for matching text that fits a particular pattern.
4 Ideally, a regex should be built with flexibility in mind in certain respects but strict where it
needs to be. This simple example is not wholly ideal, because it requires dashes between the num-
bers. Better would be a regex that handled any combination of dashes or no dashes as long as the
appropriate sequence of digits was there.

<p><input type="submit"/></p>
<p><button

type="submit"><img src="star.png" alt=""

/><strong><em>Submit!</em></strong></button></p>

Figure 4-17. Two submit buttons, one created with the input element (top) and the other created
with the button element (bottom)

Since the button element is not a self-closing element, it allows HTML to be en-
closed within the text that creates its label, which provides the possibility of greater styl-
ing of the label.
If the type attribute is set to type="reset" , a reset button is created. A reset but-
ton input resets all form controls within the same form to their initial values. Including
a reset button used to be a common practice, but it's since become unfashionable be-
cause of the high risk of users accidentally resetting their form instead of submitting it.
Without any undo function, reset buttons are of little use and should be used with cau-
tion, if at all.

Note Come on, we've all done it: reached the end of a form, tabbed to what we
thought was the submit button, pressed Enter, and watched in despair as all our form
data promptly vanished. If you're ever thinking of including a reset button on a form,
just try to remember how many times in the past you have filled in a form, reached the
end, and thought, “Actually, I think I'll just delete all of that and not bother.” Exactly.