[ Pobierz całość w formacie PDF ]
.Use the password field when you want to protect the user s input from prying eyes (as yourPIN number is hidden when you enter it at an ATM, for instance).The information entered ina password field is not encrypted or scrambled in any way, and when sent to the Web applica-tion, it is received as regular text.Only single-line text fields can be set as password fields.You cannot make a multilinetag act as a password field without employing JavaScript or some other pro-gramming language.Cross- Making sure that your user fills out the form properly is called validating the input.ReferenceDreamweaver includes a standard form validation behavior, covered in Chapter 23.144931-6 ch11.F 7/18/02 6:59 AM Page 417Chapter 11 &' Interactive Forms417Multiline text areasWhen you want to give your users a generous amount of room to write, you can expand notjust the width of the text area, but also its height.Dreamweaver gives you the followingoptions for creating a multiline text area:&' Insert a single-line text field on the page and convert the field to have multiple linesusing the Text Field Property inspector.To use this method, insert a single-line textfield on the page as previously described; and in the Text Field Property inspector,choose the Multiline option.&' Directly insert the Textareaform element using the Insert bar or Insert menu.To dothis, position your cursor where you want to insert the text area, and choose Insert ª'Form Objects ª' Textarea or click the Textarea button in the Forms category of theInsert bar.The initially created text area is approximately 18 characters wide and 3 lines high, with hori-zontal and vertical scroll bars.Figure 11-3 shows a typical multiline text field embedded in aform.You control the width of a multiline text area by entering a value in the Char Width text box ofthe Text Field Property inspector, just as you do for single-line text fields.The height of thetext area is set equal to the value in the Num Lines text box.As with the default single-linetext field, the user can enter any amount of text desired.Unlike the single-line text field,which can restrict the number of characters that can be input through the Max Chars textbox, you cannot restrict the number of characters the user enters into a multiline text area.Neat FormsText field width is measured in a monospaced character width.Because regular fonts are notmonospaced, however, lining up text fields and other form objects can be problematic at best.The two general workarounds are preformatted text and tables.Switching the labels on the form to preformatted text enables you to insert any amount ofwhitespace to properly space (or kern) your text and other input fields.Previously, Web design-ers were stuck with the default preformatted text format  the rather plain-looking Couriermonospaced font.Now, however, newer browsers (3.0 and later) can read the face attribute.Therefore, you can combine a regular font with the preformatted text option and get the best ofboth worlds.For example, the following code was used to create the first line of the preformat-ted form in the figure that follows:First Name:Last Name:Going the preformatted text route requires you to insert a lot of spaces.Therefore, when you areworking on a larger, complex form, using tables is probably a better way to go.Besides the speedof layout, the other advantage that tables offer is the capability to right-align text labels next toyour text fields.The top form in the following sidebar figure uses preformatted text to get differ-ently sized form fields to line up properly, while the bottom form in the figure uses a table.Continued144931-6 ch11.F 7/18/02 6:59 AM Page 418Part II &' Web Design and Layout418ContinuedCombining differently sized text fields on a single row  for example, when you re asking for acity, state, and zip code combination  can make the task of lining up your form even more diffi-cult.Most often, you ll spend a fair amount of time in a trial-and-error effort to make the textfields match.Be sure to check your results in the various browsers as you build your form.When you place a multiline text field on a form, you can specify how text entered into thatfield should wrap.You indicate this using the Wrap field in the Property inspector.You mayselect one of the following options:&' Default: With this option, the scrolling characteristics of the multiline text field aredetermined by the browser.Browsers and browser versions vary in their default han-dling of wrapping.&' Off: With this option, text entered into a multiline text field does not wrap when itreaches the right edge of the text area; rather, it keeps scrolling until the user pressesEnter (Return).144931-6 ch11.F 7/18/02 6:59 AM Page 419Chapter 11 &' Interactive Forms419&' Virtual: This option wraps text on the screen when it reaches the right edge of the textarea, but not when the response is submitted to the server; the text is sent as one longstring without hard carriage returns.&' Physical: This option wraps text on the screen and converts the soft returns on thescreen to hard returns when the data is submitted to the server.CautionThe wrap attribute is not supported consistently between browsers or even between differ-ent versions of the same browser.For example, Netscape 6.0 ignores any value of the wrapattribute, and simply never wraps text, while Netscape Navigator 4.61 does respect the wrap-ping options.Another option when creating multiline text fields is to preload the text area with any defaulttext you like.Enter this text in the Init Val text box of the Text Field Property inspector.WhenDreamweaver writes the HTML code, this text is not entered as a value, as for the single-linetext field, but rather goes in between the.tag pair.Figure 11-3: The Multiline option of the Text Field Property inspector opens up a textarea for more user information.144931-6 ch11.F 7/18/02 6:59 AM Page 420Part II &' Web Design and Layout420Grouping Form ControlsIn desktop applications, you may be used to seeing related controls grouped together, with a thinborder around them.You can achieve a similar effect in your HTML forms by enclosing therelated form elements within the.tag pair, as shown in the fol-lowing code:AddressStreetCityStateZipIn this example, the tags group the text fields, and the tag creates a labeldescribing the group of controls.In the most recent browsers, the legend appears as a labelabove the control group, as shown in the following figure.144931-6 ch11.F 7/18/02 6:59 AM Page 421Chapter 11 &' Interactive Forms421In Dreamweaver s Code view, you can add the and tags by selecting a setof existing controls that you d like to group, and then choosing the Fieldset button in the Formscategory of the Insert bar.If you are in Design view when you select the Fieldset button,Dreamweaver will automatically switch to the split view and make Code view active.However, itis best to apply the tag in Code view, so you can be sure you have correctly selectedall the HTML tags to be grouped [ Pobierz caÅ‚ość w formacie PDF ]