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>
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.
Search WWH ::

Custom Search