|
Dreamweaver CS3 Form Tips Tutorial Customise the background colour of text boxes and input font and colour - First, create a stylish background colour and customize the font (size, type, and colour) that you want to put in the text box. Do this by clicking Window from the menu bar and choose CSS styles. This would allow you to configure the styles for the text box. Then, click the + button and name the style. After that, configure the size, colour, type and weight of the font. Choose the background colour for the text box under Background. When you are done, click OK.
- Next, select the Insert button from the menu bar. Under it, choose Form Objects. Then click on Text Field to insert a text box.
- Lastly, implement the style for the text box. Do this by selecting a text box. Then go to CSS Styles and select the style that you named earlier. The style is now implemented to text box. Try to view it in Internet Explorer or Firefox. As Dreamweaver will not enable you to do so.
Customize the background colour and font for drop down Lists · This is almost the same as customising your text boxes. Take the same steps as the ones listed above and create unique styles for your drop down list box. Validate Forms - First, click on Insert and under it, select Form. This is done to insert a form – text box, drop down list box.
- Again, click on Insert then under it, choose Form Objects. Under Form Objects would be Text Field. Click on it and insert 3 text boxes for 3 different categories – Name, Email address, Phone number. Name each of the text box after each category respectively. Do this through the Properties Inspector.
- Click on Insert again and choose Form Objects. Under it, select Button and insert a submit button.
- Then, click on Windows from the menu bar and choosing Behaviours. On the behaviours window, choose form tag and click on the + icon. Select Validate Form.
- When the pop-up window appears, select the text field to be validated and choose the required validation. Select Required for Name, Email for Email Address and Number for Phone number. Then click Ok.
- To check the validation, click on File from the menu bar then choose Preview in Browser.
Create a custom submit button Creating a submit button is almost the same as customising your text boxes and drop down list boxes. Take the same steps as the ones instructed for customising text boxes. Take note that similar to text boxes, this can only be viewed through Internet explorer or Firefox.
Original Authors: Roz
Edit Update Authors: M.A.Harris
Updated On: 27/04/2009
|
