Dreamweaver Form Tips

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.
  4. 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.
Result
Result

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
    Click on OK.
    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 submit button by clicking on Insert > Form Objects > Button.
  3. The final step is to apply the style to the button. Select the button 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 submit button in Internet Explorer.
  4. 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.
Final Result(Internet Explorer)
Final Result(Internet Explorer)

Close    To Top
  • Prev Article-Web Design:
  • Next Article-Web Design:
  • Now: Tutorial for Web and Software Design > Web Design > HTMLCSS > Web Design Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction