Form Validation
Obtaining valid information from a user is a major and critical aspect of any piece of software, especially over the web. Busy Web sites may be adversely affected if their processing resources are occupied by hundreds of incorrect form submissions. The best approach is to take advantage of good form design and what can be called client-side form validation. The browser uses a client scripting language such as JavaScript to check the form data against a set of rules before it sends the form to the server.
Let’s add some checks to the form.
- Select the Behaviors panel.
- In the tag selector, select the <form#customer_form> tag.
- Click on the plus and select Validate Form. The dialog box will appear as shown in Figure-6.18.
Figure-6.18
- Select text "customer_name" in form "customer_form" and click the Required box. You will see the expression (R) appear next to the field name. This mean enter something in this control before submission to the server.
- Save your work and test your form in the browser.
- Select your interest and type in a comment. Leave the Name and Email fields blank. Then click the submit button. You will find a dialog box with an message i.e The following error(s) occurred: Customer_name is required. This error means complete your missing fields.
Enhance your Form with CSS
With the introduction of CSS and gradual improvement in browser support, the problem of integrating forms controls into visual page design has largely been solved.
With the help of CSS you can transform your form from glaringly out-of-date to crisp and modern in a second.
Applying CSS to Forms
- Open Form.htm.
- You need to create CSS styles. Earlier in this tutorial we created as External style sheet called Home.css. Append your new styles to that style sheet.
- Using the tag selector, select the <body> tag for the page.
- Using the style drop-down list in the Property inspector and select Manage Styles.
- This brings up the Edit Style Sheet dialog box.
- Click Attach and then select style sheet. Click Done to exit the dialog box.
- Click the plus in the CSS panel and create a new class as shown in Figure-6.19.
Figure-6.19
- Under the Type Category, Specify the following:
- Font: verdana, Arial, Helvetica, Sans-serif
- Weight: bold
- Color: #333333
Under the Background category set:
- Background Color: #FFFF99
Under the Border category set:
- Style: Solid
- Width: 1Px
- Color: #000000
- Specify Same for All for all three.
- Click Ok.
- In design view, select the form tag and, using the class list in the property inspector, attach the style to the form.
Creating an ASP Page
- Choose File --> New to open the New Document dialog box. Under the General tab, Click Dynamic Page in the left Column. In the right column(under Dynamic Page) Click ASP VBscript. Click the create button as sown in Figure-6.20.
Figure-6.20
- Select File --> Save As and save the document as first.asp in local site folder.
- When you open the drop-down list in the Insert panel, you will see that there something new there. Dreamweaver makes the ASP panel available as shown in Figure-6.21.
Figure-6.21
- Switch to Code view as shown in Figure-6.22.
Figure-6.22
- Type the text between the title tags.
<title> ASP page </title>
- Click somewhere between the body tags and type the following text.
<body> ------------(it means beginning of the body tag)
current Date is Date and Current time is time.
</body>------------(it means closing of the body tag)
- Select the date and click on the output tag on the ASP panel as shown in Figure-6.23.
Figure-6.23
- After clicking this tag , you will find in the design code, dreamweaver has itself inserted code before the Date as shown in Figure-6.24.
Figure-6.24
- Do the same with the Time. You will find insertion of the same code now before the time as shown in Figure-6.25.
Figure-6.25
- Save your file and preview it in the browser.
