HTML and CSS Reference
In-Depth Information
The text on the buttons is the default text. The submit button comes with the text Submit
Query, and the reset button comes with the text Reset. This can't be changed. However, the
button
type doesn't have any text on it because none was specified and the button doesn't
come with any predetermined behavior. To specify text for this button, add the
value
attri-
bute:
<input type="button" value="Cancel"/>
This produces a button as shown in Figure 3-13.
FIGURE 3-13
The button type with text specified
That's what you get with the input type of
button
. However, in some cases, more flexibility
in the button's content is desired. This is where the
button
element comes in handy.
Using the
button
element
The
button
element provides a button on the user interface, just as the name implies.
However, from a graphical perspective, this element behaves very differently.
The
button
element also supports a
type
attribute, like as the ones seen previously:
submit
,
reset
, and
button
. This example steps away from the survey and demonstrates these buttons
on a stand-alone page. The following HTML is added to a page, and the subsequent output is
shown in Figure 3-14:
<button type="button"/>
<button type="reset"/>
<button type="submit"/>
FIGURE 3-14
All three types of
button
elements
This output displays three buttons, as expected. However, it doesn't provide any text on
the buttons. The
button
element provides only the desired click behavior, such as submitting,
resetting, or providing a custom behavior like with
type=”button”
. Everything else must be
specified in the HTML, including the label or text that goes on the button. In this way, you
have much more control over what's put on the button. Instead of Submit Query as with the
<input>
element, the text can be set as Submit Survey or Save Data. The following HTML
shows the text on the buttons, and Figure 3-15 shows the output:
<button type="button">Go Home</button>
<button type="reset" >Reset</button>
<button type="submit">Submit Survey</button>
Search WWH ::
Custom Search