The Best-Practice Guide to xHTML and CSS phần 7 ppt

Secondly, as explained later in the “Presenting Forms” section, a standard submit

button is pretty much instantly recognized by most users and messing with that

familiarity makes the form more difficult to use.

Not only will the form be submitted when an image input element is selected, the

pixel-coordinates where the user clicked on the image will also be sent. So, two val￾ues will be sent, such as:

image1.x=498

and

image1.y=128

and if the value attribute is used, a third value will be sent:

image1=valueofattribute

So image buttons can also serve as a server-side image map, whereby those coor￾dinates can be processed and different actions can be taken depending on where

the user clicked on the image. If the image was a map of the world, for example, a

processing script could send users to a different page depending on which country

they clicked.

Sounds nifty. Once again, it’s not. Server-side image maps are rarely used, not only

because of their specific nature and the complexity of the server-side programming

required to fully exploit them, but because of their inaccessible nature: Not only do

they rely on purely visual cues (such as country boundaries on a map), but they also

rely on the user being able to click.

file

The file type allows users to select a file from their own computers, in order to

upload that file. When the form is submitted, the selected file will be sent with the

rest of the form data.

It should be remembered that when type=”file” input elements are used, an

additional enctype attribute must be added to the opening form tag with the value

“multipart/form-data”, so that when it is sent the server knows that it is getting

more than textual data. The method attribute must also be set to post.

Form Fields and Buttons: input, textarea, and select  | 181

182 |  chapter 9: Forms

<form action=”wherever.php” method=”post” enctype=”multipart/

form-data”>

<div>

<input type=”file” name=”uploadfile” id=”uploadfile” />

</div>

</form>

www.htmldog.com/examples/inputfile.html

button

button input elements do absolutely nothing. Well, when it comes directly to form

data, anyway. They are used to invoke client-side scripts (namely JavaScript—see

Chapter 7, “Scripts & Objects”) when the button is pressed. So whereas they play

no part in submitted form data, they can be used to make other things in the form

change, such as performing calculations and dynamically altering the value of a text

box, for example.

textarea

A welcome break after the mad multitude of input element options, the textarea

element is straightforward, having just one simple state. It works something like a

big text-type input element, but is used for bigger chunks of textual data, usually

with multiple lines, such as an address or a comment on a feedback form.

www.htmldog.com/examples/textarea.html

Unlike the input element, textarea has an opening and closing tag. Any text in

between the opening and closing tag makes up the initial value of the element.

<textarea name=”whatever” rows=”10” cols=”20”>Type something here

</textarea>

In the above example, the text box will appear with “Type something here” inside

the box.

Like using the value attribute in a type=”text” input element, having initial text

appear in this way can be useful in supplying extra information or instructions about

the kind of thing the user should type in the text area, and it can help with acces￾sibility (see the “Accessible Forms” section later in this chapter). The disadvantage

of doing this is that it requires more work on the users’ part—selecting the text and

deleting it before entering their own. For that reason, textarea is often used in the

following way, with no content at all:

<textarea name=”whatever” rows=”10” cols=”20”></textarea>

There is a peculiar XHTML anomaly that spoils the structure and presentation sepa￾ration party. Inside the opening textarea tag, the attributes rows and cols, which

determine the size of the text area, are not only valid but required. This will initially

alter the width and height of the text area but you shouldn’t be concerned by this

since you can easily control the width and height with CSS.

select

select form fields present the user with a list (which is usually displayed as a drop￾down menu), from which one or more options can be selected.

Key to their operation, another element is needed—the option element, which

defines each option in the list.

<select name=”book”>

<option>The Trial</option>

<option>The Outsider</option>

<option>Things Fall Apart</option>

<option>Animal Farm</option>

</select>

www.htmldog.com/examples/select1.html

In cases such as the example above, when the user submits the form data, the

value sent for the select element is the content of the selected option element (for

example, if the third option was selected above, then “Things Fall Apart” would be

sent as the value for “book”). You can supply different values for each option ele￾ment by using the value attribute inside the opening option tag. When the value

attribute is present, its value will be sent instead of the option element’s content.

Form Fields and Buttons: input, textarea, and select  | 183