Đang tải... (xem toàn văn)
In Dreamweaver, form input types are called form objects. Form objects are the mechanisms that allow users to input data. You can add the following form objects to a form: Text fields, note, buttons, check boxes, radio group, pull-down menus and lists,...
FORM Form basic A form is form-processing program running on the Web server The operations of the form follow those steps: – First, someone fills out a form on your Web page, and then clicks the Submit button – Next, the Web browser transmits the form data over the Internet to a program on your Web server – The program collects the data and does something with it, Finally, the Web server returns a page to the Web visitor Form basic In the document window, click where you’d like to insert the form On the Insert panel, select the Forms category Click the Form icon Click the dotted red line to select the form, type a name for your form into the “Form ID” field Into the Action field, type a URL, or select a file by clicking the tiny folder icon Select method in the method pop-up menu Adding Form Elements In the document window, insert a form Of the Insert panel’s Forms category, click the appropriate button (form element) In the Input Tag Accessibility Attributes window, type an ID, Type a label, and then select label options Type an “Access key” and a Tab Index number, and then press OK In the Property inspector, set the form element’s properties Adding Form Elements Text Fields: – Char Width: The width of a text field is measured in characters (default 20 Char) – Type: have three different types of text fields • A single-line text field • Multiline fields (Text area) • Password Adding Form Elements – Max Chars/Num Lines: Max Chars lets you limit the number of characters the field accepts – Init Val: specify the Initial Value of the field – Disabled and Read-only: prevents visitors from clicking into the field, or even selecting any text that’s already there and any data in it isn’t submitted when the form is submitted Adding Form Elements Checkboxes and Checkbox Groups – Checked value: specify the information that’s submitted – Initial state: checkbox be filled when your Web page first appears Adding Form Elements Checkbox Groups: On the Insert panel, click the Checkbox Group button Adding Form Elements – In the Name field, type a name – In the Label column, click the top Checkbox label – Hit the Tab key to jump to the Value column for that checkbox, and then type a value for the first checkbox – Repeat for the second checkbox in the group Adding Form Elements Radio Buttons: radio buttons restrict your visitor to making only one choice from a group – In the Property inspector, you can set up the following options for a radio button: • Name • Checked value • Initial state Radio Group: provides a single dialog box for creating a group of radio buttons Validating Forms Spry Validation Basics: The Spry validation widgets let you validate input received via a text field, a text area, a pull-down menu, a checkbox, or a group of radio buttons The basic process for all form validation widgets is the same: – Insert the Spry widget (seven types): select the form element on the page, – On the Insert panel, clicking the appropriate Spry form button Validating Forms Assign a validation requirement: Use the Property inspector to assign the type of validation to the field Select when validation occurs: – A browser validates form fields when the visitor submits the form – Or when someone clicks the Submit button on the form, the JavaScript code in the Web page checks to make sure everything was filled out correctly Validating Forms – You dictate when a field is validated by turning on one or both of the Property inspector’s “Validate on” checkboxes – Dreamweaver lets you validate a form field when the field is “blurred,” “changed,” or both Validating Forms – Modify the error messages: • in Design view, select the text, and then type a new error message Validating Forms Formatting Spry Error Messages and Fields: – Open the CSS Styles panel click the Current button – Make sure the Cascade button is pressed – Select the Spry validation widget – From “Preview states” menu, select the preview state you wish to format – In the document window, click inside the error message or select the form field you wish to format Edit the style’s properties Validating Forms Spry Text Field includes Validation types: – None This option is the default setting: no validation – Integer Use this option to verify that a whole number was typed into the field – Email This option looks for a validly formatted email address – Date: To specify the format of the day – Time This option validates a time in one of several different formats Validating Forms – Custom validation: • Select a Spry text field widget, • From the Property inspector’s Type menu, choose Custom, and then into the Pattern field, type the pattern Validating Forms Spry Text Area: – Specify content is required; – Dictate the minimum and maximum number of characters Validating Forms Spry Checkbox: The Spry validation checkbox lets you make sure a particular checkbox has been selected – To add a single Spry checkbox, choose Insert ➝ Form ➝ Spry Validation Checkbox, – Or, on the Insert panel’s Forms category, click the Spry Validation Checkbox button – The Spry checkbox that appears on the page already has the “Required” option selected in the Property inspector Validating Forms To create a group of related Spry checkboxes: – Insert a Spry checkbox – Click the label text – Press the tag disappears from the Tag selector – Insert a regular (non-Spry) checkbox Validating Forms Spry Select: validates the selection of pull-down menus, and has two options to determine whether or not a selection in the menu is valid – Do not allow: To prevent a visitor from submitting the form without selecting options Validating Forms Spry Password: This helpful tool lets you enforce a set of rules for naming passwords so that visitors don’t create easily hacked credentials Validating Forms Spry Confirm: works only with text fields, and pops up an error message, if the value in the text field doesn’t match the value in another text field on the page To use this widget – First, you add a text field That field is the original “Type your email” or “Create a password” box – Next, from the Insert Panel’s Forms category, add the Spry Confirm widget, or choose Insert ➝ Form ➝ Spry Validation Confirm Validating Forms Spry Radio Group: To add a Spry Radio Group, use the Insert panel’s Forms category or Insert ➝ Form ➝ Spry Validation Radio Group – Use the Property inspector to set up the validation options – The other two options—Empty Value and Invalid Value—produce error messages when a particular radio button is selected Validating Forms – In either of these boxes, enter the value you assigned when you first created the radio button Selecting the radio button with the specified value produces one of two errors when the form is submitted – For the Empty Value, the error informs the visitor that he hasn’t made a selection – For the Invalid Value, the error announces that the choice he made was invalid .. .Form basic A form is form- processing program running on the Web server The operations of the form follow those steps: – First, someone fills out a form on your Web page, and then... returns a page to the Web visitor Form basic In the document window, click where you’d like to insert the form On the Insert panel, select the Forms category Click the Form icon Click the... button – Next, the Web browser transmits the form data over the Internet to a program on your Web server – The program collects the data and does something with it, Finally, the Web server returns