This chapter is from the book
This chapter is from the book
This chapter is from the book
#26 Inserting Form Fields
Form fields are used within a form to collect data. The main, most widely used field types are text boxes, drop-down menus, sets of radio (option) buttons, and check boxes.
Text fields are used to collect all kinds of information in a form. Email addresses, phone numbers, purchase prices, zip codes, names, and a wide variety of other data can be entered into text fields.
Text fields collect a single line of text. Text areas can collect multiple lines of text. Text areas are used to collect comments, descriptions (like descriptions of problems for online service forms), guestbook entries, and other text that requires more than one line.
To place a text field or a text area in a form, follow these steps:
- With your cursor inside an existing form, choose Insert > Form > Text Field or Insert > Form > Text Area.
- After you place the text field, you can define the field attributes in the Properties inspector (Figure 26a). In the TextField field, enter a name that will help you remember the content of the field. In the Char width field, enter the number of characters that will display on a single line in a browser as a visitor enters data.
Figure 26a Defining a one-line text field.
- In the Max chars field, you can enter the maximum number of characters that can be entered into the field.
- In the Init val field, enter text that will appear in the field in a browser before any user interaction. Sometimes (but not always) form designers will include text like "your email goes here" in a field. Visitors then replace that content with their own entry.
- In the Type options, choose Single line for a text field and Multiline for a text area. If you choose Multiline, the Num Lines field appears in the Properties inspector. Enter the number of lines that will display in the form (you cannot define a limit for the number of characters that are entered).
- Enable the Password option only if you wish to display content entered into the field as asterisks.
- You can use the Class pop-up menu to attach a CSS Class style to the field.
)
You can place any number of check boxes in a form. Check boxes provide two options for visitors: Checked or Unchecked. You can define a default state for a check box as either checked or unchecked.
To place a check box in a form, follow these steps:
- With your cursor inside an existing form, choose Insert > Form > Checkbox.
- After you place the check box, if you did not generate a label, you need to enter some text in the form (normally to the right of the check box) that identifies what is being selected when a visitor selects the check box.
- In the Properties inspector, enter a name for the check box in the Checkbox name field. In the Checked value field, enter a value to go with the check box name. For example, if the check box asks if a user wants to be contacted, the check box name might be "contact" and the checked value might be "yes."
- Select one of the Initial state options to define whether the default state of the check box is Checked or Unchecked (Figure 26b).
Figure 26b Defining a check box.
)
Radio buttons differ from check boxes in that they are always organized in groups. You never have a single radio button—if you are asking a question for which a user can supply no, one, or several answers, use check boxes. The purpose of radio buttons is to compel a user to choose one from a group of options.
To create a radio button group, follow these steps:
- With your cursor inside an existing form, choose Insert > Form > Radio Group. The Radio Group dialog appears (Figure 26c).
Figure 26c Defining a group of radio buttons.
- In the Name field, enter a name that indicates to you the nature of the group of options. For example, if you are inquiring as to a type of shipping (Overnight, Two-day, Ground, etc.), you might call your group "Shipping_options."
- In the Radio buttons area of the dialog, click the Label column. In the first row enter a label that will appear for visitors. Next to that label, in the Value column, enter the data that will be sent with the form. For example, a label might read "Two-day shipping" to make clear to users what they are selecting. But the value sent to your shipping department might be "TD-002"—an internal code that tells those in the department how to handle and bill shipping.
- In the second row, enter another label and value. Use the plus button to add more rows of labels and values and the minus button to delete a selected row. Use the Up and Down arrow buttons to move selected rows up or down in the list of radio buttons.
- In the "Lay out using" area, choose either the Line breaks radio button (for separated rows) or the Table radio button (for rows designed in a table).
- After you define the radio button options, click OK in the dialog to generate the radio button group.
)
After you generate a radio button group, you can edit (or delete) radio buttons individually. If you want to add a radio button, you can copy and paste an existing one from the group and, in the Properties inspector, change the Checked value (but not the Radio Button) content.
Menus and file fields are two different types of fields that can be placed in forms. Menus allow visitors to choose from a list of items. File fields allow users to upload files when they submit a form. In this how-to, you'll explore both types of fields. (Consider this two how-tos for the price of one—I had to sneak them both into the same one to keep the book at an even 100 how-tos!)
Menus (sometimes called pop-up menus) allow visitors to choose one option from a pop-up menu. The main difference between menus and list menus is that list menus allow users to select more than one choice from a list, whereas regular menus restrict users to choosing just one item. List menus are usually a confusing way to collect data and are rarely used.
To create a menu, follow these steps:
- With your cursor inside an existing form, choose Insert > Form > Select (List/Menu). You use this menu option to create either a menu or a list menu. Later, you will decide whether to make your menu a list menu or a regular menu.
- To create a list for the menu, click the List Values button in the Properties inspector. The List Values dialog appears. In the Item Label column, enter the text that will display in the menu (for example, Alaska). In the Value column, enter the value that will be collected and sent in the form (such as AK). Use the plus button to add new items to the list and the minus button to delete selected items. After you define the list, click OK (Figure 26d).
Figure 26d Defining list values.
- After you generate a menu (or list), use the Properties inspector to define additional features. If you click the List option button in the Type area of the Properties inspector, you can convert the menu into a list menu. If you choose the List option, you can click the Allow Multiple check box in the Options area of the Properties inspector to allow users to choose more than one option from the menu. List menus can also display more than one option at a time in the drop-down menu.
- You can add, delete, or edit actual menu (or list) items by clicking the List Values button in the Properties inspector. This will open the List Values dialog, where you can edit or change the order of menu (or list) options. You can change the initially selected option in the Properties inspector by clicking an option in the Initially selected area. You can assign a CSS style using the Class pop-up menu.
)
File field forms allow visitors to attach files from their own computers to the form and send them along with the form. You can allow visitors to attach files to the form submission by inserting a File field in a form. Choose Insert > Form > File Field. You can define character width in the Properties inspector. A Browse button appears next to the field that the user can use to navigate to and select a file to upload.
For form content to be sent to a server, there must be a Submit button in the form. Submit buttons are usually matched with a Reset button. The Reset button clears any data entered into the form and allows the user to start fresh.
To place a button in a form, choose Insert > Form > Button. Use the Properties inspector to define the button as a Submit or Reset button. In the Action area, choose the Submit form or Reset form radio button (Figure 26e).
)
Figure 26e Defining a Submit button.
You can define custom labels for either the Submit or Reset button by entering text in the Value field for either button. Don't get too fancy; visitors are used to seeing buttons that display something like Submit or Reset. But if you enter different text in the Value field, that text will display in browsers and can be previewed in the Document window.