Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Dreamweaver Tutorials > Forms  

 

Featured Fireworks & Dreamweaver Template

Learning Template 11
Learning & Education
$79.95

Macromedia DreamweaverDreamweaver Forms

Written by
Rachna
Tips on customizing input boxes, list menus, submit buttons. Also learn how to validate forms using Dreamweaver behaviors.

In this tutorial you learn how to:

Customized Form Objects
Name *
Email *
Phone
Rating
Comments
  Using Dreamweaver behaviors this form validates required fields, email addresses and numbers.

Try the form on the right to see how the validation works. The form objects have been customized with a background color and font.

Tip: The tip to customizing form objects is using CSS styles!

Note: Customizing form objects using CSS styles works only in Internet Explorer and not in Netscape.

Customize the background color, input font and color for text boxes

  1. The first step is to create a style with the background color and font that you'd like for the text box. Open the Style window by clicking on Window > CSS Styles. Create a new style by clicking on the '+' icon found at the bottom. Give a name to the style like 'textboxstyle' and click on OK. In the 'Type' category select the font type, size, color and weight. In the 'Background' category select the background color that you'd like for the text box. Click on OK when you've finished.
  2. The next step is to insert a text box by clicking on Insert > Form Objects > Text Field.
  3. The final step is to apply the style to the text box. Select the text box and from the CSS Styles window select the style 'textboxstyle'. Once the style is applied to the text box click on File >Preview in Browser to preview the text box in Internet Explorer.
    Please Note: You will not be able to view the style in the text box in Dreamweaver. You can only preview it in Internet Explorer.

Customize the background color and font for drop down Lists

This is the same as discussed above. Create a style just like we did for the text box and apply the style to the drop down list box.

Validate Forms

  1. The first step is to insert a form by clicking on Insert > Form
  2. The next step is to insert 3 text boxes for name, email and phone. Choose Insert > Form Objects > Text Field to insert 3 text boxes. Name the first text box 'Name', the second 'Email' and the third 'Phone' in the Properties inspector.
  3. Insert a submit button by clicking on Insert > Form Objects > Button
  4. Open the behaviors window by choosing Window > Behaviors. Select the form tag and click on the '+' icon in the behaviors window. Choose Validate Form
  5. In the pop-up window that appears choose the text field you want to validate and select the required validation.
    • Select Required for Name
    • Select Email for Email Address
    • Select Number for Phone
  6. Click on OK.
  7. Check the validation clicking on File > Preview in Browser

Create a custom submit button

  1. The first step is to create a style with the background color and font that you'd like for the submit button. Open the Style window by clicking on Window > CSS Styles. Create a new style by clicking on the '+' icon found at the bottom. Give a name to the style like 'buttonstyle' and click on OK. In the 'Type' category select the font type, size, color and weight. In the 'Background' category select the background color that you'd like for the text box. Click on OK when you've finished.
  2. The next step is to insert a text box by clicking on Insert > Form Objects > Text Field.
  3. The final step is to apply the style to the text box. Select the text box and from the CSS Styles window select the style 'buttonstyle'. Once the style is applied to the text box click on File >Preview in Browser to preview the text box in Internet Explorer.
    Please Note: You will not be able to view the style in the text box in Dreamweaver. You can only preview it in Internet Explorer.

Learn more cool tricks with Dreamweaver Behaviors!

 


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Website Design? Choose from over 58000 templates!

create a free html5 website

Learn How to Create a Simple HTML5 Website

Learn how to create a simple Html5 website

Bootstrap 3 Responsive Website Tutorial

Bootstrap 3 Responsive Website Tutorial

Video Tutorial - Create a simple responsive website using Dreamweaver

responsive_website

Best Website Templates of 2015

best website templates

Featured Template
Template # 58993
Type: Bootstrap
Price: $75