Pin Me

Linking Forms in Dreamweaver

written by: vishalseafarer•edited by: Amy Carson•updated: 10/27/2010

Forms are everywhere, be it a simple website or a huge and complex one. Learn how to link a form in Dreamweaver in this step by step tutorial with screenshots! You will be surprised to learn how easy it is to link a form in Dreamweaver.

  • slide 1 of 2

    The Importance of Forms

    Using a form in a web page is the most important way of getting data from users. Login pages, sign up pages, feedback forms, etc. all rely on forms to get data from the users. So how are forms used?

    Data is gotten from the users with the help of text boxes, checkboxes, radio buttons, options from lists, etc. It is then submitted to the server where it is processed and stored or is subjected to some appropriate action. Your favourite search engine uses a form to submit the search query that you enter. It sends the data to the server, processes the query and returns it back to you. Now that you know the importance of forms, let us proceed on creating a form using Adobe's Dreamweaver.

  • slide 2 of 2

    A Step by Step Guide to Creating a Form in Dreamweaver

    This tutorial assumes that you have installed Dreamweaver. This tutorial shows you how to link a form in Dreamweaver by creating a simple page and linking it to a form where the user data is entered and submitted.

    Step 1: Open Dreamweaver and create a new HTML page.

    Step 2: Enter the title between the <title> </title> tags.

    Step 3: Create a button and associate and onclick event that redirects the webpage to the login page.

    Note: A few extra lines of code is added to make the web page look better. It is the style sheet part of the web page and has nothing to do with the operation of the button.

    Full code for creating the index.html web page:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Untitled Document</title>

    <style type="text/css">

    #container { margin-left:100px; margin-top:100px;}

    </style>

    </head>

    <body>

    <h1>This is the main page</h1>

    <div id="container">

    <input name="redirect" type="button" value="Click Me!" onClick="window.location ='signup.html' ">

    </div>

    </body>

    </html>

    Step 4: In the above web page, the page is being directed to a page called signup.html, when the click me! button is clicked. In Dreamweaver, go to file --> New --> HTML.

    Step 5: Place the cursor inside the body tag and click on the form button on the toolbar. Once the form is created, create the text boxes and other input boxes and fields on which you need the information from the user.

    Step 6: Create a submit button. In the action attribute, include the path to your CGI script or PHP script or any of your server side script where you need the data to be processed.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Linking Forms in Dreamweaver</title>

    <style type="text/css">

    body {background-color:#26466D;}

    #content {margin-left:400px; margin-top:200px; background-color:#FFFFFF; width:400px; padding: 20px; }

    </style></head>

    <body>

    <div id="content">

    <h1> Create an Account</h1>

    <form action="" method="get" name="signup" id="signup">

    <table>

    <tr>

    <td> Desired Username</td>

    <td> <input name="name" type="text" size="15" maxlength="20"></td>

    </tr>

    <tr>

    <td> Password </td>

    <td> <input name="password" type="password" size="15" maxlength="15"> </td>

    </tr>

    <tr>

    <td> Enter Password Again</td>

    <td> <input name="repassword" type="password" size="15" maxlength="15"> </td>

    </tr>

    <tr>

    <td> <input name="submit" type="submit" value="Submit" action="" method="GET" >

    </td>

    <td> </td>

    </tr>

    </table>

    </form>

    </div>

    </body>

    </html>

    how to link a form in dreamweaver Thus in a few simple steps, a webpage is created and linked to a form using dreamweaver.