Adding Text Fields


The simplest type of form field you can have is a simple, single-line text field. Your average form will have several of them, allowing people to enter anything from their name to their phone number to their shoe size .

To add text fields:

1.
Choose where in your form you want your text field to appear (by clicking in the document), and click the text field button on the Insert Bar. The new text field will appear on your page ( Figure 10.4 ).

Figure 10.4. The first text entry field added to the form.


2.
If the text field hasn't been automatically selected, select it, and you'll see the options you can change for your new field in the Property Inspector ( Figure 10.5 ). From there, you can change the fields:

  • TextField: This field contains the name of the field, which can be used by JavaScript behaviors and by CGI scripts on the server.

  • Char width: This is the width of the text input area on your page. The larger this number, the wider the space it needs. And as it's the number of characters allowed, the larger the font you've set (usually with CSS), the wider the space will be.

  • Max Chars: This is the maximum number of characters that someone visiting your site can enter into this field. For instance, you might want to limit a phone number to ten characters, or a credit card to 16.

  • Type: This has three values: Single line , Multi line , and Password . Multi line will be covered in the next section, "Adding a Text Area." The only difference between Single line and Password is what the user sees when they enter something into this field: if the type is Password, no matter what your visitor types, it will appear as black dots. The correct value will be sent back to the server, though.

  • Init val: The initial value of the field. This text is displayed when the page is loaded.

Figure 10.5. Set a text field's properties via the Property Inspector.


Tip

  • There's another type of field that's similar to a text field called a hidden field . It's used when there's information that a CGI needs to get from a form, but which a user doesn't enterso the field itself contains a value, but isn't seen in the document. Adding a hidden field is virtually identical to adding a text field: just click on the hidden field button in the Insert Bar (obviously, where it's put on the Web page doesn't matter) and then set the value and unique field name in the Property Inspector.


Labeling Your Fields

When you click on a button in the Insert Bar to add a form field to your page, the Input Tag Accessibility Attributes dialog may appear ( Figure 10.6 ). This dialog allows you to set certain attributes that can enhance accessibility. These fields are:

  • Label: Figure 10.6 shows a label of "First Name:" being entered. Figure 10.4 shows the result: that text is displayed just to the left of the new text field.

  • Style: There are three style options: Wrap with label tag , Attach label using 'for' attribute , and No label tag . If you choose Wrap with label tag , Dreamweaver will (as you might guess) surround your new <input> tag with a <label> tag:

     <label>First Name: <input type="text" name="textfield" /></label> 

    If you choose Attach label using 'for' attribute , Dreamweaver will write the <label> tag based on what you enter for position (covered below):

    [View full width]
     
    [View full width]
    <label for="textfield">First Name: </label><input type="text" name="textfield" id="textfield />
    Figure 10.6. To enable your site to be accessible, set the label attributes here. The default position for a text field label is before the form item.

    Unfortunately, Dreamweaver doesn't offer full WYSIWYG support for this optionyou can then change the name and id attributes of your new text field (by changing the TextField), but the label 's for attribute, which should change to match, doesn't. There isn't any way to change it short of going into the markup and changing it by hand.

    If you choose No label tag , the text you enter will appear, but it'll be just that: text.

    The <label> tag helps make your site more accessible in two ways: it tells voice browsers that this is the text associated with this field, and it allows users with certain browsers (such as Firefox) to click on the text label as an alternative to only clicking inside a check box. This gives your visitor a larger space in which to click. Accessibility is important, and using the <label> tag helps make your site more accessiblebut if you want to use it with Dreamweaver's Design mode, stick with the Wrap with label tag option.

  • Position: The label for a form field can be either before or after the field. For text fields, you'll usually see the label before the field. For check boxes, you'll usually see the label afterwards. The default value of the position changes depending on the type of field ( Figure 10.7 ).

    Figure 10.7. For a check box, the label's default position is after the form item.

  • Access key: Some browsers allow users to enter keyboard shortcuts to select form fields. If you want this option, enter the keyboard shortcut for the field here. For instance, if I entered g in Figure 10.7, the user with Internet Explorer for Windows could click that check box by pressing Alt-G.

  • Tab Index: If you want users to be able to tab from form field to form field in a particular order, you'll want to assign each field a tab index. This is the numbered order in which the user can tab through your form's fields. It's especially useful to set this when your form fields are inside table cells , as the default can be quite different from what you actually want to occur. The numbers need to be between 0 and 32767, and they don't have to be in sequence: you can make your fields be (for instance) 100, 200, and so on, leaving room for future changes to your form.

If you don't use labels, access keys, or tab indices, and are annoyed at seeing this dialog come up every time you add another form field, you can get rid of it by clicking on the link at the bottom. This opens Dreamweaver's preferences, and turning off "Show attributes when inserting Form objects" will make the dialog go away for good. If you later decide you want it back, go back into Preferences, choose the Accessibility category, and you can turn it back on again.

You can also add a label afterwards by clicking the label button on the Insert Bar, but it doesn't do what you expect. Instead of bringing up the Input Tag Accessibility Attributes dialog, Dreamweaver instead adds a <label> tag around whatever you have selected and throws you into Split mode. If you are markup-phobic, stick with adding labels along with their associated fields.





Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net