HTML and CSS Reference
In-Depth Information
Creating Submit and Reset Buttons
The two other kinds of form buttons are submit and reset buttons. A
submit button
submits a form to the server for processing when clicked. Clicking a
reset button
resets
the form, changing all field values to their original default values and deleting any values
that a user might have entered into the form. The syntax for creating these two buttons is
<input type=”submit” value=”
text
” />
<input type=”reset” value=”
text
” />
where once again the
value
attribute defines the text that appears on the button.
Creating Form Buttons
• To create a form button to run a command, use the element
<input type=”button” value=”
text
” onclick=”
program
” />
where
text
is the text that appears on the button and
program
is the program that is
run in response to the user clicking the button.
• To create a form button to submit the form and its fields and values to a script, use the
following element:
<input type=”submit” value=”
text
” />
• To create a form button to reset the form to its default values and appearance, use the
following element:
<input type=”reset” value=”
text
” />
Alice wants the survey form to include both a submit button and a reset button. The
submit button, which she wants labeled
Submit My Survey
, will send the form data
to the server for processing when clicked. The reset button, which she wants labeled
Cancel
, will erase the user's input and reset the fields to their default values.
To add the submit and reset buttons to the survey form:
◗
1.
Return to the
survey.htm
file in your text editor.
◗
2.
Scroll to the bottom of the file. Directly above the closing
</form>
tag, insert the
following code (see Figure 6-63):
<p>
<input type=”submit” value=”Submit My Survey” />
<input type=”reset” value=”Cancel” />
</p>
figure 6-63
creating submit and reset buttons
submit button type
reset button type
