Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Creating an HTML Form

  • We are going to redo our contact-us.html page
  • Create a new page called contact-us.html & save it over the present page
  • Add the text Contact Us at Wanderlust Travel and make it an h1
  • We are going to take a look at HTML forms, and familiarize you with some form basics
  • When you create a web form you are not creating an active form that will do something after you create it
  • A form has 2 pieces to it, the front end which is the form on the web page
  • It also has a backend piece that uses coding that is sitting on the web server in some language other than HTML such as PHP, ColdFusion, ASP, JSP or .NET
  • We will be building the front end piece which is the form itself that you are looking at so it will match the rest of our web pages
  • In order to create a form you need a form tag which contains important information for submitting the form
  • Click the first icon in the Forms tab of the Insert bar and notice the red dotted line that appears
  • The dotted red lines in Dreamweaver signify that there is a form tag
  • We must place all of our form elements within this tag in order to be sure that the data works correctly
  • Action is the script that does something with the user’s data
  • Method is how the data is sent
  • Dreamweaver sets our method to post for us, since almost all web forms use this type of action, it is more secure and not visible to anyone when it is sent

Creating an HTML Form

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Creating a Contact Us Form 0:52
    • Adding Content
    • Insert Form
    • Insert Text Field with Form Tag
    • Form Tag Properties
  • Summary 8:29

Transcription: Creating an HTML Form

Welcome back to

What we are going to take a look at now is creating an HTML form.0003

I tend to find that creating HTML forms is an interesting process, because everybody has usually filled out some type of form on the Web, but they don't really understand what all is involved in getting a form working.0008

I am going to build my form gradually; but we are going to start by creating the form itself and take a look at the properties of a form and the information you need to know as the designer of that form, in order to make it work on your website with your design.0024

Usually, that is the designer's job; there is always a back-end piece to this that a developer has to create.0045

Let's get started creating our Contact Us form.0052

I am going to create a new page, and that new page is going to be named Contact--because, if you look, we have an About Us, but we don't have a Contact Us.0056

That is what we are going to do now.0070

I will open this up, and let's save this as contact-us.0072

We are going to say, "Contact us at Wanderlust travel"; there we go.0081

We will say, "Please fill out the form below to contact us so we can assist you"; there we go.0091

And my Contact Us is going to become a Header 1 with a Ctrl+1; and I'll go ahead and select that text and copy it, and I'm going to use it as my title, as well--no reason to have to type it twice.0108

Save the page, and we are all set to start adding our form.0124

Now, the form pieces are known as form elements; so each individual piece within a form is known as a form field.0129

Within our form fields, there is a variety of them you can add; so the first step is to go the Forms tab within Dreamweaver.0140

I'm in the Forms tab on the Insert bar located above my document window.0150

In case that isn't open on your system, you can always get to it; it is the very first thing underneath the Window menu.0156

The Properties area down below is the second; and we will need to have both of those open when we start working on our forms.0164

I am going to put my cursor where I want to place a form.0173

One of the important pieces of working with a form is to insert the form element itself.0178

So, if I click this first icon in the form field, you can see you get this red dotted line in Dreamweaver.0187

And what that tells you is: if you look down here at the properties and also in the tag selector, Dreamweaver has added the form tag itself.0195

Everything must go inside that red dotted line in order to have your form work correctly.0206

Now, the little red dotted line will not show in the browser; that is just Dreamweaver letting you know where your form is located.0214

Now, that is one way to add a form.0223

I am going to Ctrl or Command, Z out of that; I want to show you something else that Dreamweaver can assist you with.0226

I am going to click on the second icon for a text field; if you click on that--and I go to add it; I'm not going to add anything here--and I just click OK, look what Dreamweaver does.0234

In case you forget to add that first icon yourself, what Dreamweaver will do is prompt you and say, "You are trying to put one of these form fields onto the page without the form tag itself"; so it wouldn't work.0249

Dreamweaver can assist you with adding the form tag.0268

I am going to click "yes"; so you can see, Dreamweaver added that red dotted line.0273

Now, I am going to get out of that by Ctrl or Command, Z, and go back to just the form itself.0279

I want to talk about this piece down here within the Properties area.0287

First of all, our form needs to have a name; so I'm going to give this a name of Contact Us.0292

But my name--notice, it says Form ID here: ID's cannot have spaces, so I'm going to use headless CamelCasing, where the first letter is lowercase and all subsequent words are uppercase.0300

There is my Contact Us form.0317

Now, the action piece and the method piece here are the two parts of a form tag, and these are very important.0320

By default, Dreamweaver assigns a method of post: this has to do with how the data is sent back to the Web server once the user clicks that Submit button.0330

So, the method is how the data is sent; the action is where it is sent to.0343

You always need to specify these two items for your tag.0351

I am referencing the red dotted line form tag itself; I haven't even placed anything inside this form yet, but the action piece is "where is the data going to go once the user clicks the Submit button?"0358

Now, that is something that is usually handled by server-side code; in other words, there is information sitting on the server; so the user fills it out in the browser, clicks the Submit button; that information gets sent to the Web server, but it has to be sent to a certain location on the Web server.0376

And then, that location on the Web server is going to do something with it; and two of the most common things to do with it are to send off an email with that information or place that information into a database.0396

There are some other options, but those are the two most common that are going to occur.0410

This is where the data goes, and in that location, there should be something to process that form data from the user.0415

This action script is not always a Web designer's job to deal with; so action is where the data is sent.0427

There are two methods available to you: default is exactly the same as get--the default method is get.0438

Basically, what get does is sends the data in the URL area; and that is not a secure method for sending form data, especially if you have private data such as a credit card or that type of data within the form information that the user is filling out.0447

So, most of the time, your form data will be going by a post; what that does is hide the data when it is sent so nobody can see it.0468

That is why Dreamweaver drops in the method of post for you on your form; usually you don't have to worry about that one--just make sure you give your form a name or an ID.0479

And at some point, this will need to be filled out; it will need to be created, first of all; and then the action will need to be placed in here as to where the information is located that is going to process the form data.0492

But what we just did was: we created an HTML form.0509

Now, there is nothing in this form--not yet, anyway; so I'll do a file save, and if I put this in the browser, you won't even know it exists.0514

What we are going to do is take a look at adding form fields to this form that right now is invisible to the user.0525

But those are the basics of inserting a form onto your web page, and also the basic information that you want to be sure to add to that form tag before you even get concerned about adding the form fields within the form tag.0534

That is how you can add a form to Dreamweaver; it just doesn't happen to contain form fields yet--we will be adding those coming up.0552