Forms and User Intraction with ASP
Forms, as the name suggests, forms. They are based on their paper counterparts. Generally the form as a whole has single purpose to identifying you by supplying name and address details and so on and the information the form asks for its relevant to this purpose.
Web forms are no different. When your browser presents you with a form, you fill it in using the mouse and keyboard. Forms are widely used today that it would be hard to find a website that doesn’t use at least one .Forms are even more difficult today following the massive growth of the use of dynamic website technologies over the past few years.
Creating a Form
- Create a basic page and save it as Form.htm.
- Select the Forms panel on the insert panel group as shown in Figure-6.1.
Figure-6.1
- Select the first form button. This inserts a new form into the page.
- Check out the red dotted line drawn in the Design view of the page, showing the area of the form. Click the form area, switch to code view, you will find a pair of <form> tags. Name the form customer_Form in the property inspector.
- Click inside the form area and select Insert --> Table. Table box appears as shown in Figure-6.2. Type the specifications as shown in Figure-6.2.
Figure-6.2
- Select the table and set the align field to center in the property inspector. It centers the table as shown in Figure-6.3.
Figure-6.3
- Place your mouse pointer slightly above the top row of the middle table to select the entire middle column. See Figure-6.4.
Figure-6.4
- Use the Merge selected cells using Spans buttons on the property inspector. Change the width to 10 pixels and that will result into middle column as one big cell.
- Enter the following text.
- Align the Text labels to the right of column with the help of property inspector and click the B (bold) button so that the text in these cells will be styled bold.
- Click inside the right cell of the top row and click the text Field button on the forms panel. This insert a text box form control onto the page as shown in Figure-6.6.
Figure-6.6
- Turn your attention to the property inspector, as shown in Figure-6.7. Enter the customer_name in Textfield and following specifications mentioned in the property dialog box.
Figure-6.7
- Click inside the cell and select the List/Menu control from the Forms panel as shown in Figure-6.8.
Figure-6.8
- Look at the property inspector for this element. Call this control customer_interest and set it as a menu rather than a list.
- Add some items in your list values. To populate your list, Click on the list value button in the property inspector and then use the plus button to add items as shown by Figure-6.9.
Figure-6.9
- When you finish with your listing of items, Click Ok. The property panel should look like Figure-6.10.
Figure-6.10
- You can use a pair of Radio buttons to limit the user to one selection only in case of Email or mail. Click inside the cell and click Radio button as shown in Figure6.11.
Figure-6.11
- Click after the button and type Mail. You will notice that Dreamweaver automatically inserts a space for you.
- Enter a space and click on Radio Button again. Type Email after the button.
- Now, it’s time to set properties to these two buttons, Each time when you pressed radio button, the previously pressed in button popped out. The browser ensures that only one of the group is selected at a time (See Figure-6.12).
Figure-6.12
- For the radio button labeled Email, Set the checked value to be E-mail.
- For other Radio button, set the checked value to be mail.
- Make the E-mail button the default. To do that, Select the corresponding radio button and set its Initial State to checked as shown in Figure-6.12.
- Click inside the right cell of the fourth row and then click on the Textarea icon in the form panel as shown in Figure-6.13.
Figure-6.13
- The Textarea control opens a text box and activates the scroll bars if the text overflows the box’s dimension (See Figure-6.14).
Figure-6.14
- Type the name customer_comments in TextField. Set Char width to 40 and Num Lines to 5. Select Multi line option, the text box changed its size and added scroll bars.
- Enter the E-mail address of customer in fifth line. Copy and paste the customer_name text box and rename it. Click customer_name and select Edit --> copy or press Ctrl+c, and then move to the Fifth line and Select Edit --> Paste.
- Rename customer_name2 to Customer_email as dreamweaver has created a duplicate text box with the name of Customer_name2.
- Now it’s time to create a Submit Button.
- Click in the left cell of the last row of the table and then Click the Button icon in the Form panel as shown in Figure-6.15.
Figure-6.15
- Take a look at property inspector as shown in Figure-6.16.
Figure-6.16
- Click anywhere on the form and you will see <form#cust_form> displayed in the tag inspector. Click it and look at the property inspector. The most important attribute is action. Set this to register.asp but remember you have not constructed register.asp.
You can also Specify the method to use to transmit the form data to the server. In the Property inspector, select one of the following options in the Method pop-up menu.
Default uses the browser’s default setting to send the form data to the server.
Typically the default is the GET method.
GET appends the value to the URL requesting the page.
POST embeds the form data in the HTTP request.
A second attribute is Method, which determines how the form data is sent to the server. Set this to GET as shown in Figure-6.17.
Figure-6.17
Save the page and preview it in your browser. Your browser will give an error message i.e "HTTP404 page not Found" as you have not constructed register.asp.
