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-
<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