Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Inserting Form Fields

Just as with every other part of your web site, you should plan what you want to create before you create it.

So are you ready to start building a form? Just as with every other part of your web site, you should plan what you want to create before you hunker down to create it. Otherwise, you'll find yourself going back and adding new elements and modifying ones you've already put on your form. So sit down with your form in mind and figure out the best way to build itthat is, what form fields will you need for the various parts of your form?

In this section, you're gonna see it all: text fields, check boxes, radio buttons, lists, pull-down menus, file fields, Reset and Submit buttonseverything you need to build a form from the ground up. But first, you have to create the form area on your page. This is the area that will hold all your form fields.

Here's how to start a form:

On your web page in Dreamweaver, click to place the insertion point where you want to insert the form.

This could be in a layer, inside a table cell, or directly on your page.

Noteworthy

You don't have to start by creating a form area on your page. Instead, you can insert a form object, such as a text field or a check box, and Dreamweaver will prompt you to insert a form along with it.

Choose Insert > Form > Form.

If a warning appears saying that invisible elements must be turned on, click OK; then choose View > Visual Aids > Invsible Elements. This warning will not appear if invisible elements are already turned on.

A red frame appears on your page, indicating the form area. You'll insert all your form fields in this area.

[View full size image]

In the Property Inspector, enter a name for your form in the Form Name field.

If you wish, you can leave your form with the default name, or you can type your own. Form names are used when referencing a form in JavaScript or other scripting languages.

In the Property Insector's Action field, enter the path to your form's back-end application or script.

[View full size image]

The Action field determines what happens to the form data when the user clicks Submit. You may need to contact your ISP or system administrator for this information. If you don't yet know what to put in this field, you can leave it blank and fill it in once your form is complete and you've spoken with your ISP or system administrator.

Use the Method pull-down menu to specify how the form data will be sent to the web server.

The Method pull-down menu defaults to Post, which is the most frequently used option for submitting a form. Post allows an unlimited file size to be sent to your server. However, in your particular setup, you may need to use Get, which limits the amount of data that may be submitted.

Again, your system administrator or Internet service provider should be able to tell you which method is required for your particular configuration.

Noteworthy

If you want to use a table to control your form, click to place the insertion point inside your form's red frame and choose Insert > Table. In the Table dialog box that appears, enter the number of rows and columns that you need for your form, as well as the width of your table. If you planned your form as we discussed earlier, you should have a good idea of the size of table that you'll need to control your form. How many fields do you plan to use? Placing each field on its own row is usually easiest.

If necessary, use the Enctype pull-down menu to set the encryption type for submitted form data.

This setting determines what format submitted data is sent in, so the application or script on your web server will know how to handle it. For example, you'll need to use this setting if your form will allow users to upload files. Check with your system administrator or Internet service provider for details.

With your form set up, you're ready to begin inserting form fields. Some designers use tables to help line up the text and fields in their forms. You can use this approach, or you can control the positioning of your fields via CSS after you've inserted them on your page. Remember: Tables may be fast and easy upfront, but CSS makes content a heck of a lot easier to manage down the road. For more on using CSS to control your forms, see the sidebar "Controlling Form Objects with CSS" later in this chapter.

With the form area now set on your page, you're ready to begin inserting the fields that you want. We'll start with the easiest firsttext fieldsand then go from there.

Whenever you want a field for the user to type in, you insert a text field.

Inserting Text Fields

Often, you'll want a field where the user of your form can type contentthe user's name or e-mail address, for example, or comments or a message. Whenever you want a field for the user to type in, you insert a text field.

Text fields allow the user to enter alphanumeric content into your form, such as the person's name, comments, and zip code. Text fields come in several flavors, including single line and multiline, as seen here.

[View full size image]

Text fields come in three flavors: single line, multiline, and password. Single-line text fields are perfect for short bits of information, like a name or zip code. Multiline text fields give the user a larger space to type in, so they're well suited for comment fields, for example. Any content that's typed in a password field appears as a row of asterisks (Windows) or dots (Mac).

Noteworthy

Information entered in a password field isn't encryptedit simply appears as a row of asterisks (Windows) or dots (Mac) on the form. For data transmission to be secure, the web server must be configured with a security certificate, so that data can be transmitted via Secure Socket Layer (SSL). Certificates must be purchased from a third party (like VeriSign) and installed on the web server. When a page is secure, the URL will start with https:// and most browsers will display a lock icon (or something similar) at the lower right of the browser window.

Here's how to insert a text field:

Click to place the insertion point where you want to insert the text field.

On Dreamweaver's Insert bar, open the Forms category.

If the Insert bar isn't visible, choose Window > Insert to display it.

In the Forms category of the Insert bar, click the Text Field button.

If you have Dreamweaver's accessibility controls turned on (they're on by default), Dreamweaver displays the Input Tag Accessibility Attributes dialog box. For more on creating forms with accessibility, see the sidebar "Creating Forms with Accessibility" later in this chapter.

Dreamweaver inserts a text field on your page.

[View full size image]

In the Property Inspector, give your text field a name in the TextField field.

Dreamweaver gives all inserted fields a default namein this case, TextField. You can leave these default names, but a more descriptive name is often better. For example, if you're providing a text field for the user's e-mail address, name the field E-mail. For more on naming fields, see the sidebar "Naming Form Fields" later in this chapter.

Set the width of your text field by entering a value in the Char Width field.

[View full size image]

You can leave the width set to its default value or enter a new value. Unlike with most other page elements in Dreamweaver, text field width is not measured in pixels, but in character widths. This means that setting the text field width is hit or miss. However, even though you can control text field width here, the visitor's web browser really determines the size. Therefore, as always, it's important to preview your work.

If you want to control the number of characters that the user can insert in the text field, enter a value in the Max Chars field.

You can use this setting to help ensure that the user correctly enters information such as a zip code or telephone number, or to limit the length of comments.

Noteworthy

When creating a multi-line text field, rather than inserting a text field and then setting it to Multi Line in the Property Inspector, you can click the Text Area button in the Forms category of the Insert bar, and Dreamweaver will insert a Multi Line text field for you.

Select a Type option to specify the type of text field you're creating.

Single Line: Use this setting if you want the user to enter only a single line of text. This option is useful for names and e-mail addresses, for instance.

Multi Line: When you choose Multi Line, the height of the text field (also called the text area) expands, giving the user additional room to type. You can use this option to provide an area where the user can enter comments or ask a question, for example.

Password: Select Password if you want the user to enter a password. Any characters that the user types appear in the text field as asterisks (Windows) or dots (Mac).

Remember that the Password setting does not encrypt data when it's submitted; the data appears as asterisks or dots, but only on the form page. When the form is submitted, the data can be read by whatever page is set in the action.

If you choose Multi Line as the field type, choose an option from the Wrap pull-down menu to determine how the text field handles wrapped text.

Default: Allows the visitor's web browser to determine how the text wraps within the text field.

Off: Shuts off text wrapping. The user can keep typing, and the text won't move to a new line until the user presses Enter (Windows) or Return (Mac).

Virtual: Wraps the text in the text field on the user's screen, but submits the entry to the web server as a single, unbroken line of text.

Physical: Wraps the text in the text field on the user's screen and retains all the line breaks when the form is submitted to the web server.

If you want text to appear by default in the text field, type the entry in the Init Val field.

Init Valshort for initial valueis useful when you want to show visitors a default value (if you expect them to enter a particular value) or an example of how text should be inserted in a field. For instance, you might enter the formatting of the date: dd/mm/yy.

[View full size image]

Naming Form Fields

As you're building your form, you may want take some care with the names of the fields that you insert, instead of leaving the names that Dreamweaver uses by default or choosing unspecific names like Textfield or Checkbox2. Names can be especially important when you're handling the data after the user submits it to the web server.

The web server receives the form entries as text-based data. The names of the fields appear, followed by an equal (=) sign, followed by the content that the user entered. For example, if your form contains a text field named E-mail and a user fills in your form with info@tentonbooks.com and clicks Submit, on the back-end that field will appear as E-mail=info@tentonbooks.com.

Therefore, when naming your fieldsfrom text fields, to check boxes, to pull-down menuschoose names that will help you read the content or enter the data in a database.

Creating Forms With Accessibility

You should build your forms so they are as user friendly as possible, including those with disabilities. To help you, Dreamweaver includes accessibility options for many types of page elements, including forms.

You don't have to use these features, but more and more web designers are creating pages for visitors on the web who have impaired vision, reading disabilities, or other special needs.

With accessibility turned on, Dreamweaver displays the Input Tag Accessibility Attributes dialog box whenever you insert a form object (the dialog box will not appear when jump menus and radio groups are inserted, however).

Add accessibility features to your forms to ensure that users with disabilities can use them. It all starts in the Input Tag Accessibility Attributes dialog box.

Here's how to set the Input Tag Accessibility Attributes dialog box:

In the Label field, enter the text that you want to appear on the page beside the field.

For example, if you're inserting a field where you want the user to type his or her name, your label might be First Name and Last Name. Unlike the text that everyone can see on your web page, this label can be read aloud by screen reader software, depending on the label tag you choose in the dialog box.

Select a Style setting to determine how your label tag should be handled in your page's background code.

Wrap with Label Tag: This option encloses the label and form element in a single container in your code, within the <label></label> tag pair. However, you can't position the label anywhere you want to with this tag, and it's not always fully compatible with screen readers.

Attach Label Tag Using 'For' Attribute: This option is useful if the label and form element are separated, perhaps by table cells that are being used to control the layout of the form. It's also the most compatible with screen readers. In the code, it inserts an attribute in the <label> tag to connect it to its associated form element. For example, your code would appear as <label for="textfield">First and Last Name</label><input type="text" name="textfield" id="textfield" />.

No Label Tag: Doesn't use a label tag at all. If you use this option, screen readers will not be able to read your label. Therefore, the code appears as First and Last Name<input type="text" name="textfield" />.

Select a Position setting to determine whether the label appears before the form item or after it.

If you want, in the Access Key field, enter a single character to act as a keyboard shortcut for the form object.

The access key is useful for giving disabled users a way to jump from one part of a form to another. When viewing the form, the user will need to press a modifier key, such as Ctrl or Alt (Windows) or Command or Option (Mac), as well as the shortcut key to be taken directly to the field. The modifier key needed is determined by the user's platform and browser.

If you want, insert a numeric value in the Tab Index field to set the field's tab order.

If you set values in the Tab Index field for the fields in your form, the user will be able to press the Tab key to cycle through your form fields in the order that you establish. For this feature to work correctly, you need to set incremental values for all the fields in your form.

Inserting Check Boxes

Use check boxes when you want site visitors to select multiple items in a list.

Use check boxes when you want site visitors to select multiple items in a list. For example, you might ask your visitors to select their preferred types of music from a list of popular music styles. Visitors could then check any music styles that they enjoy, leaving the styles they don't enjoy (speed demon death metal, of course) unchecked. In a list of check boxes, the user can check or leave unchecked as many items as they like. To let visitors know their options, you may want to preface the list with the message, "Check any that apply."

Check boxes allow the user to make multiple selections in a group of choices. Whenever you include a group of check boxes, it's a good idea to include an instruction that says "Check any that apply."

If you want to set up your list of items so that the user can select only one item, insert a group of radio buttons instead of check boxes. You'll see how to work with radio buttons in the next section

Noteworthy

People often confuse check boxes and radio buttons. From a group of check boxes, you can select as many items as you want, and from a group of radio buttons, you can select only one.

Here's how to insert check boxes:

Click to place the insertion point where you want the check box to appear.

In the Forms category of the Insert bar, click the Checkbox button.

Dreamweaver inserts a check box where you placed the cursor.

[View full size image]

In the Property Inspector's Checkbox field, give your check box a name.

Dreamweaver inserts a default name, but you'll most likely want to change it.

In the Checked Value field, type the field entry that will be submitted to the web server.

As you saw in the sidebar "Naming Form Fields," when a text field is submitted to a web server, the content that the user enters in the field is displayed after the field's name and an equal sign. But with check boxes, the user doesn't make an entry. Therefore, the text that's set in the Checked Value field is the entry that's submitted to the server.

For example, you might name your check box Favorite_Music and set the check box's value to Ambient. On the back-end, the form data would appear as Favorite_Music=Ambient.

[View full size image]

Select an Initial State setting to specify whether the check box is initially checked or unchecked for the user.

To add more check boxes to your form, repeat steps 1 through 5.

Inserting Radio Buttons

While the visitor can select multiple check boxes, only one radio button within a group can be selected at a time.

Radio buttons may seem similar to check boxes initially; however, while the visitor can select multiple check boxes, only one radio button within a group can be selected at a time. For example, you might ask site visitors what time zone they live in: Pacific, Mountain, Central, Eastern, or Atlantic. You can then set up a group of radio buttons so your visitors can make only one choice.

You restrict the user to only one selection by using the same name for each radio button in the group. Then when the user selects a radio button in the group, any previously selected radio button is automatically deselected. Although you can insert radio buttons individually, to make sure that each radio button in a group uses the same name you can use Dreamweaver's Radio Group command.

Noteworthy

If you want to insert radio buttons individually, use the Radio Button command on Dreamweaver's Insertbar. This approach is useful if you've added a radio group, but you've forgotten an item or two. After inserting the radio button, you can select it and set the options that appear in the Property Inspector.

Radio buttons may look similar to check boxes; however, the user can select only a single button within a group of choices.

Here's how to insert a set of radio buttons:

Click to place the insertion point where you want the radio button to appear.

In the Forms category of the Insert bar, click the Radio Group button.

In the Radio Group dialog box that appears, enter a name for your radio group in the Name field.

In the Radio Buttons box, click the first Radio entry in the Label column; then give your first radio button a name.

[View full size image]

Click Tab to move to the Value column; then enter a value for the first radio button.

As with check boxes, a radio button's value is returned to the server when the user selects the button.

Click Tab again to move to the second radio button and repeat steps 1 through 5.

If you need additional radio buttons for your radio button group, click the + (plus) button at the top of the Radio Buttons box.

To remove any unwanted radio buttons, select them in the Radio Buttons box and click the (minus) button.

[View full size image]

Select a Lay Out Using setting at the bottom of the dialog box to determine how your radio group is controlled on your page.

You can set up your radio group so that your entries are separated by forced line breaks (<br> tags) within a single paragraph, or organized into a table. If you use a table, each radio button is placed in its own row.

Click OK when you're done.

Imminent Doom

If you select a radio button in a group and change its name in the Property Inspector, it will no longer be associated with the group, meaning that the set of radio buttons will not work as expected.

Dreamweaver inserts the group of radio buttons onto your page. If you want to make further changes to your radio buttons, just select them and use the settings in the Property Inspector.

Inserting Lists and Pull-Down Menus

A list appears as a scrollable set of options, and the user can select more than one option. A pull-down menu is also a set of items, but the user can't make multiple selections.

Lists and pull-down menus work exactly the same way. The only difference is their appearance on the screen and the amount of space they take up. A list appears as a scrollable set of options on your form, and the user can select more than one option before clicking Submit. A pull-down menu is also a set of items; the user can open the menu and choose an option, but unlike with lists, the user can't make multiple selections from a pull-down menu.

Pull-down menus can offer the user many choices, but when they're closed, they take up very little space on the page.

A nice thing about lists and menus is that they let you control the choices that the user can make. For example, you can ask the user to select a state from a menu of the 50 states in the USA, and so ensure that when the form is submitted to your web server, the state appears in the format that you want (abbreviated, for example).

Here's how to insert a list or menu:

Click to place the insertion point where you want the list or menu to appear.

In the Forms category of the Insert bar, click the List/Menu button.

Dreamweaver inserts a blank pull-down menu on your page.

[View full size image]

Clicking the List/Menu button will insert this handy "starter" menu on your page.

In the Property Inspector, enter a name for your list or menu in the List/Menu field.

Select a Type setting to specify whether your form object will be a list or a pull-down menu.

Menu: Creates a pull-down menu.

List: Creates a selection list.

Noteworthy

If you allow multiple selections in your list, users can Shift+click or they can Ctrl+click (Windows) or Command+click (Mac) to make selections. You may want to include a text message in your form letting users know they can do this.

If you choose List, the Height and Selections options become available. In the Height field, enter the number of rows that you want your list to display on the page. A scrollbar will appear to display any rows that are not visible. Use the Selections option to specify whether the user can make multiple selections in the list.

Click the List Values button in the Property Inspector to add items to your list or pull-down menu.

In the List Values dialog box that appears, click the Item Label column and type the first entry for your list or pull-down menu.

Press the Tab key to move to the Value field; then type the value for your entry.

Just as with check boxes and radio buttons, the value is the data that will be submitted with the form. For example, your list item may read United States (what the user sees), but the value returned to the server may be USA.

Press Tab again to continue with the next entry. Continue adding list items and values.

When you're done, click OK.

10.

In the Property Inspector, choose one of your list or menu items from the Initially Selected box to specify which of your items appears selected by default.

Creating a Hyperlink Jump Menu

As you've surfed the web, you may have seen sites that use pull-down menus as navigational aides. For example, after you open a pull-down menu and choose an option you might be whisked away to a new page in the site (or to an entirely different site). This setup is achieved through jump menus.

Jump menus are a handy navigational option to consider. A menu can contain as many items as you want, each of which links to its own destination.

Here's how to insert a jump menu:

Click to place the insertion point where you want the jump menu to appear.

In the Forms category of the Insert bar, click the Jump Menu button.

In the Insert Jump Menu dialog box that appears, in the Text field, enter a name for the first item in the menu.

In the When Selected Go to URL field, type the destination for your menu item.

[View full size image]

You can either type the URL of a web site or use the Browse button to navigate to a page within your current site.

Do any of the following:

To add entries for your jump menu, click the Add Item button (+) at the top of the Menu Items list.

To remove menu items, click the Remove Item button (-).

To reorder your menu items, use the Move Item Up in List and Move Item Down in List buttons.

If you're working in a frameset, use the Open URLs In pull-down menu to specify where the URLs will open. (This setting only works within a frameset.)

In the Menu Name field, enter a name for your jump menu; then select an Options setting.

Insert Go Button After Menu: Adds a Go button to the right of the jump menu.

Select First Item After URL Change: Sets the jump menu back to the first item after the user has used it to jump to a destination. This option is useful only if a frameset is being used.

When you're done, click OK.

The jump menu is inserted on your page. To edit a jump menu after it's been inserted on your page, open the Behaviors panel (choose Window > Behaviors) and double-click the Jump Menu action. The Jump Menu dialog box opens, where you can make your changes.

Inserting File Fields

File fields are a neat addition to forms. They allow the user to upload a file to the web server when submitting a form. You can use file fields in a guest book, for example, where you want the user to upload a photo.

File fields allow the user to upload a file to the web server when submitting a form.

When you insert a file field, Dreamweaver adds a browse button, which the user can use to navigate to and select the file to upload. This file can be a text file, a spreadsheet, a graphic, or any other type of file on the user's computer.

File fields allow users to upload files when they submit forms. Dreamweaver makes inserting file fields easy; however, for a file field to work correctly, the application or script that processes the form on the back end must be able to handle file uploads.

If you want to include a file field in your form, the application or script running on the web server that will collect all the form data must be able to accept file uploads. Also, your form's method must be set to POST, which you saw how to do in "Inserting Form Fields" earlier in this chapter. If you're uncertain about these settings, contact your system administrator or Internet service provider.

Here's how to insert a file field:

Click to place the insertion point where you want the file field to appear.

In the Forms category of the Insert bar, click the File Field button.

Dreamweaver inserts the file field in your form.

In the Property Inspector, enter a name for your file field in the File Field Name field.

If you want, use the Char Width and Max Chars options to set the width of your file field and the maximum number of characters it can hold.

Typically, forms include two buttons: a Submit button and a Reset button.

Inserting Reset and Submit Buttons

You'll want a way for the user to submit your form to you. For this, you'll need to insert some buttons. Typically, forms include two buttons: a Submit button and a Reset button.

Noteworthy

Form buttons don't have to only submit and reset forms. In fact, you can set them to do any number of things. After you've inserted a button, you can select it and set a behavior for it using Dreamweaver's Behavior panel. You can make a button open a URL, display a pop-up message, and more. Or you can delve into the world of JavaScript and make buttons do all kinds of wonderful things, like calculate sales tax, for example.

The Submit button triggers the link that you learned how to set in the Property Inspector's Action field in "Inserting Form Fields" earlier in this chapter. The link starts the application on your web server, which then receives the form data. The Reset button clears away all the entries that have been made in the form and resets all the fields to their default settings.

Here's how to insert a button in your form:

Click to place the insertion point where you want the button to appear. Usually, buttons appear at the bottom of a form.

In the Forms category of the Insert bar, click Button.

A button is inserted in your form, with the default label "Submit." You'll see how to change this shortly.

In the Property Inspector, enter a name for your button in the Button Name field.

If you want to change the text that appears on the button, enter the new text in the Value field.

For example, if you want your button to say Reset, or Go, or Giddy Up Cowboy, enter the text in the Value field.

Use the Action setting to specify the appropriate action for your button.

Your button can either submit or reset a form. However, you can also use it to trigger a Dreamweaver behavior. To trigger a behavior with your button, make sure it's selected on your page, and use the Behaviors panel, just as when you set a behavior on text or a graphic.

Repeat steps 1 through 5 to add any other buttons into your form.

Ten Ton Dreamweaver [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی