How to Create a Form on a Web Page With Dreamweaver

Video Transcript

"Hi everyone! My name is David Casuto from San Francisco Computer Tutors and in this tutorial we're going to show you how to create a form within Dreamweaver. Forms can be a little bit intimidating from the naked eye, but, believe it or not, Dreamweaver gives us some great tools on how to do it. So stay tuned and we'll show you how to do it in just a second. So I start off here it says "please tell us about yourself." So what I did was I just took the elements of just a generic survey and then I copied them and I'm going to paste them in there. Like first name, last name, address, city, state, and zip code. Now what I want to make sure is that I have my "insert panel" up here, and you're going to see we have our common layout and we also have something called "Forms". O.k? So what I want to make sure actually that I do is actually want to have my form set up beforehand, o.k.? So if I click here, o.k., right before where says "please tell us about yourself" and I click and I click there and I say, I see that there is a red box that comes up and that is basically a form and that's important because you're telling basically the code, that you're going to be creating after this, and you're telling like if you have Google Autofill and things like that, that this is a form so it actually knows it's a form. So when we look at the code you'll actually see that. So let me actually take this and then cut it out, and then go ahead and paste it back in, edit, and then paste, and now it's actually inside of the form. So, what we have to do is create our form fields and we do that by coming back up here to our "Forms" toolbar and you see that each of these has different elements. We have a text field, we have a hidden field, we have text area, check box, o.k., radio dial button, o.k., etcetera. So, o.k., so we're going to click on "text field" and it's going to ask me "What is the ID that you're going to want?" This ID is going to be important for when you're putting in your code like your ASP code, for when you're setting up all of your scripts for sending it to yourself. O.k., we're not going to get into that in this tutorial, this is just generally how to actually set it up using Dreamweaver's tools. O.k., I'm just going to call this "first name" and it's typically good practice just to keep it as one word, o.k., because that's how the code is going to like it. So I'm going to keep the label out of this because we already have the label in there, right, and then I'm just going to position "before form item" or "after form item" so I'm just going to keep this "after form item" and click "o.k." and then there it is. Now it appears. O.k., well I hope you enjoyed that exercise on how to create forms in Dreamweaver, probably not as hard as you thought it was. Dreamweaver gives us some great tools, and once again my name is David Casuto from San Fransisco Computer Tutors and you can look me up on YELP.Com anytime, under San Fransisco Computer Tutors and hope to give you a hand someday or answer any questions you might have. Thanks!"