Use of forms and create email forms in DreamWeaver

Source: Internet
Author: User
Tags dreamweaver

First, let's take a look at the final interface of the email form you are going to make. Of course, this is just a simple example. It's just for the purpose of launching a discussion, we believe that you will be more beautiful or well-designed.

Next, create the email Form: Step 1: Insert the Form, use the "Insert" -- "Form" command or select the yellow in the "Forms" on the Objects object panel, A red dotted box is displayed, which is the periphery of the form. The elements of the form mentioned below must be in the red dotted box. For the convenience of element positioning in the form, insert a table. The table size can be controlled by yourself. The table in the figure contains 7 rows and 2 columns. Then merge the rows 1st, 5, 6, and 7 into cells.

Step 2: Enter the text in the table. The preparation is complete.

Step 3: insert a form element and insert a text box in the cell next to your name, run the "Insert" -- "Form Object" -- "Text Field" command or select an icon on the panel. Similarly, a text box is also inserted in the cell below "email address", "Home Page", and "Your suggestion. Select a text box.

The specific meaning of the parameter is as follows: "TextField": the name of the text box. For this example, the names can be "name", "email address", "home address", and "comment" respectively. "Char Width": the length of the text box displayed on the webpage; "Max Chars ": the maximum length of characters that can be entered. "Type": There are three types: "Single line", "Multi line", and "Password; "Init Val": the initial value in the text box.

When you select the "Multi line" Type in "Type", the attribute panel changes. Compared with the previous panel, "Char Width" is replaced by "Num Lines", indicating the number of Lines in the text. "Wrap" is the appearance parameter of multi-line text. You can try it with four options. Now the text box is ready. The "send" and "clear" buttons are now available.

Step 4: insert a table with one row × two columns with the Border = 0 in the cell of row 7 (table can easily control the position of elements ), then Insert the Button in the cell and use the "Insert" -- "Form Object" -- "Button" command or select the blue icon. Select the Button to see the changes in the attribute panel. The "Button Name" Button Name is displayed on the "Lable" Button, for example, the "send" and "clear": "Action" buttons in the example have three types: "Submit form", "Reset form", and "None. In this example, the first two buttons are used: submit (SEND) and reset (clear.

Step 5: click the red dotted box around the form. In the figure, "Form Name" indicates the Form Name: "Action" indicates the program that will process the Form after it is submitted. Enter your E-MAIL address here, in the format of mailto: your E-MAIL address: "Method" indicates the submission Method, there are "Post" and "Get", the default is Post. now, you have prepared a simple email form. Of course, only some elements of the form are used in this example. Other form elements also have check boxes, which are shown as; single sheet, displayed on the page. These two elements are also frequently used in forms. The relevant attributes can be seen on the attribute panel. You can select multiple check boxes in a group at the same time, and you can only select one element in a group, you can define multiple check boxes (or single check boxes) as a group by naming these check boxes (or single check boxes) with the same name.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.