HTML and CSS Reference
In-Depth Information
The following step adds a textarea to the form.
1
•
If necessary, click line 50.
insertion point
on line 52 with
no tabbing
•
Table 6-10 and then press the
e n t e r
key (Figure 6-18).
How do I know how big to make
the textarea box?
Again, you need to look at the
standards used in most Web devel-
opment. You also have to view the
textarea box in the browser to see how the size affects the Web page form. For instance, if we had made the number
of rows 4, rather than 3, the Web page visitor would not have seen the “Thank you for completing our survey.” message
on the bottom of the page. That is something that you want the visitor to see without scrolling. Of course, like other
tags, you can use CSS styles to size the textarea box.
Enter the HTML code shown in
textarea control added
for multiple-line input
textarea control displays 100
columns or characters
textarea control
displays three rows
Figure 6-18
Adding Submit and Reset Buttons
The form controls are useless unless the information entered in the form can be
submitted for processing. The next step in creating the form is to add two buttons at the
bottom of the Web page form. The first button, Submit, is for submitting the form. When
the visitor clicks this button, the data entered into the form is sent to the appropriate
location for processing. The second button, Reset, clears any data that was entered in the
form.
Submit and Reset
Buttons
A simplistic, default
button is created when
you use the type="submit"
attribute and value or the
type="reset" attribute
and value within the
<input /> tag. The
<button> tag can also be
used to create a submit
button. The <button>
tag gives you the option
of using an image for
the button, rather than
using the default button
style. The appearance of
the button text can be
changed with the <style>
tag. These tags give you
more flexibility when
creating submit or reset
buttons.
The HTML code below shows the <input /> tags used to create the Submit and
Reset buttons on a Web page form:
<p><input type=”submit” value=”Submit” />
<input type=”reset” value=”Reset” /></p>
The first line of HTML code creates a Submit button on the Web page form. A Submit
button is created by using the attribute type="submit" in an <input /> tag. The value attribute
is used to indicate the text that should appear on the button face — in this case, Submit.
When a user clicks the Submit button, all data currently entered in the form is sent
to the appropriate location for processing. The action taken when a form is submitted is
based on the method and action attributes specified in the <form> tag. In the <form> tag
at the start of this form, the HTML code set the form attributes to method="post" and
action="mailto:bluwav@isp.com". Thus, when a user clicks the Submit button, a data file
that contains all the input data automatically is sent as an e-mail attachment to the e-mail
address bluwav@isp.com. By default, the data file is named Postdata.att.
The code below shows a sample of the data file that is sent to the e-mail address,
when using the post method. In this sample, the user checked the radio button for Folk
music as a type that they like, iTunes as the place where they purchase most of their music,
and Pandora as their favorite Internet radio station:
musictype=Folk&purchases=iTunes&station=Pandora
The data entered in the form appears in the data file as name-value pairs — the
name of the control as specified in the name attribute, followed by the value entered or
selected in the control. In the above example, the user selected the Folk music option in
