Tự học HTML và CSS trong 1 giờ - part 36 potx

This allows multiple values associated with the same name to be chosen: Check all symptoms that you are experiencing: Nausea Light-headedness Fever Headache When this form is submitt

You can group check boxes together and assign them the same control name This allows

multiple values associated with the same name to be chosen:

<p>Check all symptoms that you are experiencing:</p>

<label><input type=“checkbox” name=“symptoms” value=“nausea” /> Nausea</label>

<label><input type=“checkbox” name=“symptoms” value=“lightheadedness” />

Light-headedness</label>

<label><input type=“checkbox” name=“symptoms” value=“fever” /> Fever</label>

<label><input type=“checkbox” name=“symptoms” value=“headache” />

Headache</label>

When this form is submitted to a script for processing, each check box that’s checked

returns a value associated with the name of the check box If a check box isn’t checked,

neither the field name nor value will be returned to the server—it’s as if the field didn’t

exist at all

You may have noticed that when I applied labels to these check box elements, I put the

inputtags inside the labeltags There’s a specific reason for doing so When you

asso-ciate a label with a check box (or with a radio button, as you’ll see in the next section),

the browser enables you to check the box by clicking the label as well as by clicking the

button That can make things a bit easier on your user

In the examples thus far, I have tied labels to fields by putting the field name in the for

attribute of the label, but that doesn’t work for check boxes because multiple form fields

have the same name, and the browser would not figure out which check box the label

applies to Instead I put the inputtag inside the labeltag I could achieve the same

result by assigning a unique idto each check box and associating them with the labels

that way, but nesting the tags is easier

Creating Radio Buttons

Radio buttons, which generally appear in groups, are designed so that when one button in

the group is selected, the other buttons in the group are automatically unselected They

enable you to provide users with a list of options from which only one option can be

selected To create a radio button, set the typeattribute of an <input>tag to radio To

create a radio button group, set the nameattributes of all the fields in the group to the

same value, as shown in Figure 11.8 To create a radio button group with three options,

the following code is used:

Input▼

<p>Select a color:</p>

<label style=”display: block”><input type=“radio” name=“color” value=“red” />

Red</label>

<label style=”display: block”><input type=“radio” name=“color” value=“green” />

Green</label>

11

Output

FIGURE 11.8

A group of radio

buttons.

I’ve used the same <label>technique here that I did in the check box example Placing

the radio buttons inside the labels makes the labels clickable as well as the radio buttons

themselves I’ve changed the displayproperty for the labels to blockso that each radio

button appears on a different line Ordinarily I’d apply that style using a style sheet; I used

thestyleattributes to include the styles within the example

As with check boxes, if you want a radio button to be selected by default when the form is

displayed, use the checkedattribute One point of confusion is that even though browsers

prevent users from having more than one member of a radio button group selected at once,

they don’t prevent you from setting more than one member of a group as checked by

default You should avoid doing so yourself

Using Images as Submit Buttons

Usingimageas the typeofinputcontrol enables you to use an image as a Submit button:

Input▼

<input type=“image” src=“submit.gif” name=“submitformbtn” />

Figure 11.9 shows a custom button created with an image

Output

FIGURE 11.9

The image input

type.

When the user clicks an image field, the x and y coordinates of the point where the user

clicked are submitted to the server The data is submitted as name.x = x coordand

name.y = y coord, where nameis the name assigned to the control Using the preceding

code, the result might look like the following:

submitoformbtn.x=150&submitformbtn.y=200

You can omit the name if you choose If you do so, the coordinates returned would just

bex =andy = Form controls with the type imagesupport all the attributes of the <img>

tag You can also use the same CSS properties you would use with <img>tags to modify

the appearance and spacing of the button To refresh your memory on the attributes

sup-ported by the <img>tag, go back to Lesson 9, “Adding Images, Color, and Backgrounds.”

Creating Generic Buttons

In addition to creating Submit, Reset, and Image buttons, you also can create buttons that

generate events within the browser that can be tied to client-side scripts To create such a

button, set the typeattribute to button Figure 11.10 shows a button that calls a function

when it is pressed Use the following code to create a button:

Input▼

<input type=“button” name=“verify” value=“verify” onclick=“verifydata()” />

Output

FIGURE 11.10

A button element

on a web page.

This example creates a button that runs a function called verifydatawhen it’s clicked

You provide the label that appears on the button with the valueattribute of Verify Data

Unlike Submit buttons, regular buttons don’t submit the form when they’re clicked I

explain the onclickattribute when you get to Lesson 14, “Introducing JavaScript.”

Hidden Form Fields

Hidden form fields are used when you want to embed data in a page that shouldn’t be

seen or modified by the user The name and value pair associated with a hidden form

field will be submitted along with the rest of the contents of the form when the form is

submitted To create such a field, set the field’s type to hiddenand be sure to include

both the nameandvalueattributes in your <input>tag Here’s an example:

<input type=“hidden” name=“id” value=“1402” />

Hidden form fields are generally used when data identifying the user needs to be

included in a form For example, suppose you’ve created a form that allows a user to edit

the name and address associated with her bank account Because the user can change her

name and address, the data she submits can’t be used to look up her account after she

submits the form, plus there might be multiple accounts associated with one name and

address You can include the account number as a hidden field on the form so that the

program on the server knows which account to update when the form is submitted

11

It’s important to understand that when it comes to hidden form

fields, hidden means “won’t clutter up the page” rather than

“won’t be discoverable by the user.” Anyone can use the View Source feature in the browser to look at the values in hidden form fields, and if you use the GET method, those values will appear in the URL when the form is submitted, too Don’t think of hidden fields as a security feature but rather as a convenient way to embed extra data in the form that you know the script that processes the form input will need to use.

The File Upload Control

The file control enables a user to upload a file when he submits the form As you can see

in the following code, the typefor the input element is set to file:

Input▼

<label>Please select a file for upload <input type=“file” name=“fileupload”

/></label>

Figure 11.11 shows a file upload control

CAUTION

If you want to use a file upload field on your form, you have to do a lot of

behind-the-scenes work to get everything working For one thing, the program specified in the

actionattribute of your form must accept the file being uploaded Second, you have to

use the postmethod for the form Third, you must set the enctypeattribute of the

<form>tag to multipart/form-data Ordinarily, the default behavior is fine, but you

must change the enctypein this particular case

Let’s look at a simple form that supports file uploads:

<form action=“/upload” enctype=“multipart/form-data” method=“post”>

<input type=“file” name=“new_file” />

<input type=“submit” />

</form>

After you’ve created a form for uploading a file, you need a program that can process the

file submission Creating such a program is beyond the scope of this book, but all

popu-lar web programming environments support file uploads

Using Other Form Controls

In addition to form controls you can create using the inputelement, there are three that

are elements in and of themselves

Using the button Element

A button you create using the buttonelement is similar to the buttons you create with

theinputelement, except that content included between the opening and closing button

tags appears on the button

You can create three different types of buttons: Submit, Reset, and Custom The

<button>tag is used to create buttons As with other form fields, you can use the name

Output

FIGURE 11.11

The file upload

control.

to indicate which value is sent to the server when the button is clicked Unlike buttons

created with the <input>tag, the button’s label is specified by the content within the

<button>tag, as shown in this code:

Input▼

<button type=“submit”><b><i>Submit button</i></b></button>

<button type=“custom”><img src=“recycle.gif”></button>

The button element is shown in a browser in Figure 11.12

11

Output

FIGURE 11.12

element provides

a more flexible

way to create form

buttons.

With the <button>tag, white space counts If you include whitespace between the

open-ing or closopen-ing <button>tags and the content inside the tag, it might make your button

look a bit odd The best bet is to just leave out that whitespace

Creating Large Text-Entry Fields with textarea

Thetextareaelement creates a large text entry field where people can enter as much

information as they like To create a textarea, use the <textarea>tag To set the size of

the field, use the rowsandcolsattributes These attributes specify the height and width

of the text area in characters A text area with colsset to 5androwsset to 40creates a

field that’s 5 lines of text high and 40 characters wide If you leave out the rowsand

colsattributes, the browser default will be used This can vary, so you should make sure

to include those attributes to maintain the form’s appearance across browsers The

clos-ingtextareatag is required and any text you place inside the textareatag is displayed

inside the field as the default value:

Input▼

<label for=”question4” style=”display: block”>Please comment on our customer

service.</label>

Figure 11.13 shows a textareaelement in action

Output

FIGURE 11.13

create large

text-entry areas.

You can also change the size of a textarea with the height and width CSS properties You can alter the font in the text area using the CSS font properties, too.

Creating Menus with select and option

Theselectelement creates a menu that can be configured to enable users to select one

or more options from a pull-down menu or a scrollable menu that shows several options

at once The <select>tag defines how the menu will be displayed and the name of the

parameter associated with the field The <option>tag is used to add selections to the

menu The default appearance of select lists is to display a pull-down list that enables the

user to select one of the options Here’s an example of how one is created:

Input▼

<label for=”location”>Please pick a travel destination</label>

<select name=“location”>

<option>Indiana</option>

<option>Fuji</option>

<option>Timbuktu</option>

<option>Alaska</option>

</select>

As you can see in the code, the field name is assigned using the nameattribute of the

<select>tag The field created using that code appears in Figure 11.14

TIP

To create a scrollable list of items, just include the sizeattribute in the opening select

tag, like this:

Input▼

<select name=“location” size=“3”>

Figure 11.15 shows the same selectelement as Figure 11.14, except that the size

attribute is set to 3 Setting the size to 3indicates that the browser should display three

options simultaneously

11

Output

FIGURE 11.14

You can use

controls to create

pull-down menus.

Output

FIGURE 11.15

You also can

create scrollable

lists using the

To see the fourth item, the user would have to use the scrollbar built in to the select list

By default, the value inside the <option>tag specifies both what is displayed in the form

and what’s sent back to the server To send a value other than the display value to the

server, use the valueattribute The following code, for example, causes bw499to be

sub-mitted to the server as the value associated with the Coursesfield instead of Basket

Weaving 499:

<select name=“courses”>

<option value=“p101”>Programming 101</option>

<option value=“e312”>Ecomomics 312</option>

<option value=“pe221”>Physical Education 221</option>

▼

To select an option by default, include the selectedattribute in an optionelement, as

follows:

<select name=“courses”>

<option value=“p101”>Programming 101</option>

<option value=“e312”>Ecomomics 312</option>

<option value=“pe221” selected=“selected”>Physical Education 221</option>

<option value=“bw499”>Basket Weaving 499</option>

</select>

Thus far, you’ve created menus from which a user can select only one choice To enable

users to select more than one option, use the multipleattribute:

<select name=“courses” multiple=“multiple”>

A user can choose multiple options by Shift-clicking for Windows, or Ctrl-clicking or Command-clicking for Macintosh.

There are some usability issues associated with select lists When you think about it, select

lists that enable users to choose one option are basically the equivalent of radio button

groups, and select lists that allow multiple selections are the same as check box groups It’s

up to you to decide which tag to use in a given circumstance If you need to present the

user with a lot of options, select lists are generally the proper choice A select list with a

list of states is a lot more concise and usable than a group of 50 radio buttons By the same

token, if there are four options, radio buttons probably make more sense The same rules

basically hold with check box groups versus multiple select lists

The other usability issue with select lists is specific to multiple select lists The bottom line

is that they’re hard to use Most users don’t know how to select more than one item, and if

the list is long enough, as they move through the list they’ll have problems keeping track of

the items they already selected when they scroll through to select new ones Sometimes

there’s no way around using a multiple select list, but you should be careful about it

Task: Exercise 11.2: Using Several Types of Form Controls

Form controls often come in bunches Although there are plenty of forms out there that

consist of a text input field and a Submit button (like search forms), a lot of the time

forms consist of many fields For example, many websites require that you register to see

restricted content, download demo programs, or participate in an online community In this

NOTE

The purpose of this exercise is to show you how to create forms that incorporate a

num-ber of different types of form controls In this case, the form will include a text field, a

radio button group, a select list, a check box group, a file upload field, and a text area

The form, rendered in a browser, appears in Figure 11.16

11

FIGURE 11.16

A registration form

for a website.

Let’s look at the components used to build the form The styles for the form are included

in the page header Here’s the style sheet:

<style type=”text/css” media=”screen”>

form div {

margin-bottom: 1em;

}

div.submit input {

margin-left: 165px;

}

label.field {

display: block;

float: left;

margin-right: 15px;

width: 150px;

text-align: right;

}

label.required {

font-weight: bold;

}