Dreamweaver - Forms questionnaire, register, login, etc.

Aim of Forms The aim of this presentation is to show you how to use forms on your web pages using HTML, JavaScript, CSS (Cascading Style Sheets) in Dreamweaver. Example uses of forms:Registering users Logging onto web pages Collecting survey data Allowing user to send a message to an address easily When user clicks send, theDisplayed on a web page immediately (e.g. blog) form data can be:Sent by to the web master (with form data attached) Written to small text file on the server (accessible by the web master) Written to a database, e.g. MySQL (Structured Query Language)

Example - Enquiry Form

Example – Form to post a statement on a website

Step 1 – create a tag The and tag enclose all the form boxes, buttons and drop down menyus. 1.In Dreamweaver, create a new page called form.html, or find a location to put the form in an existing page 2.Insert a tag by clicking Insert > Form > Form You can also look for the Insert window (Window > Insert)

Add fields, e.g. text field, check boxes, etc. Add a text input field to allow a user to enter a name.

Add 2 more text fields Add 2 more text fields to enter name of favourite film and favourite music

Work in Progress (WIP)

Insert a Submit button Insert a submit button by clicking Insert > Form > Button or using the Insert window

Form with button

Form Procssing Form Processing Edit the tag to include an action. Normally an action will call a server-side script to process the form data and send it to a file on the server, or to a database, or attach to an and send to the web master. Server-side scripts can be written in PHP. Alternatively, a third party source such as matic.com can be used to process the form. Response-o-matic offers a free service to process form data. However, you should ensure that confidential information is not processed by a third party for security. matic.com Add the location of the form processing script: “process.php” to the tag: action=“process.php” This will send the form data to a log file on the server so you can collect user data.

Create the form script process.php Create the form script using PHP (a web server scripting language) Please see code opposite. Copy and paste this into a blank document (in Dreamweaver or Notepad ++) Save as process.php (note the file extension PHP) <?php $file = "log.txt"; $handle = fopen($file, 'a'); $answer1 = $_POST["name"]; $answer2 = $_POST["film"]; $answer3 = $_POST["music"]; fwrite($handle, "Name: "); fwrite($handle, "$answer1 \n"); fwrite($handle, "Favourite film: "); fwrite($handle, "$answer2 \n"); fwrite($handle, "Favourite music: "); fwrite($handle, "$answer3 \n\n"); fclose($handle); echo "The information has been written to a log file."; ?> Click here to open the log file on the server

Upload form.html and process.php to server Upload your 2 pages form.html (for user input) and process.php to server Open form.html and test A third file log.txt will be created and ammended – a link to this file is provided in the process.php file The process.php file must be uploaded to the server in order to work