HTML and CSS Reference
In-Depth Information
The code for this exercise can be found in folder 4.
Follow these steps to add a Submit button to your form:
1.
Open the
bookings.html
file.
2.
Create a new
<div>
element just before the end tag of the
<form>
element and give it the class
field
.
3.
Within this
<div>
element, create a new
<button>
element.
4.
Set the
type
attribute on this
<button>
to
submit
.
5.
Add the following text between the tags of the
<button>
element:
Request Booking
.
6.
Save the
bookings.html
file.
Here's how this portion of your code should look:
<div class=”field”>
<button type=”submit”>Request Booking</button>
</div>
You should now have a Submit button at the end of your form so visitors can request bookings. Figure 5-9 shows
how your updated bookings form should look in your browser.
With the
<button>
element, you can create a button that is similar to one created using
<input
type=”submit”>
. The difference is that you can place other HTML elements within a
<button>
element; for ex-
ample, you could have an
<img>
element within a button.
Reset Buttons
By setting the
type
attribute of a
<button>
element to
reset
, you can create a button that will reset all the
fields in a form. Here's an example of how you can create a Reset button for your forms.
<button
type=”reset”
>Reset Form</button>
Dumb Buttons
There is one other
type
that can be used on the
<button>
element—
button
. I like to refer to these buttons as
dumb buttons
because they do not actually perform any actions. In order to make these buttons “smart,” you need to
use JavaScript to tell the browser to execute some JavaScript code when the button is pressed. This JavaScript code
could then perform an action, such as starting or stopping the playback of a video. You will learn how to do this in
Chapter 11.
