In this lesson, you will learn how to add a form element to a page in Adobe Dreamweaver. Now, before we get started, we do need to set up a site for our lesson files folder. So we're gonna go to the site menu, to new site. We're gonna browse for a folder and I have saved the lesson files out to my desktop and in there is module four forms. So we're gonna select that folder. And we're gonna name this site, working with form, and we're gonna click on the save button over in the files panel is where we see all of the lesson files we will be using in order to create our form in the next few lessons. We're going to be working with the contact.HTML. So we're gonna open that by double clicking on it. We're also going to open up contact done, just to take a quick look at what we are going to build. So here is our form. So we're going to have text fields and radio buttons and check boxes and a text area in our form as well as a submit button down at the bottom. Now, in order for us to actually create the form though, we're gonna go back to our contact.HTML file. We're gonna click in this area over on the left and we're just gonna type in contact us. And with our cursor in that paragraph, we're gonna go down to our properties panel and we're gonna change that format of that paragraph to an H1, heading one, so we're gonna click on that dropdown menu in our properties panel and change that to a heading one. Now we're gonna click on the enter or return key to go down to the next line. And this is where we're going to add our form element. Another two places that we could go to add our form. The first is up under the insert menu, down to form, and you can see all of the different form elements in here. Another place that we can go is over to the insert panel over here on the right just in the same group with our files panel. Now, if you don't see your form elements, just click on the dropdown menu and choose form, and the first thing that we need to do in order to create this form is to add a form element. So we're gonna click once on that form. And when we look in our area, in our design view, we can see a red dashed border and that red border is going to be wrapped around all of the form elements that we are going to add to our form. Now, with that selected, we're gonna look down here at our properties. And the first thing we want to do is choose to name our form and give it an ID. So we're gonna name this contact because this is going to be asking people for information to build up our newsletter subscription base. Now just to the right of the ID is our action and our method. Now there are two different kinds of forms that you can create in Dreamweaver in HTML. The first is a post and the second is a git, with a post, you are sending information to someone who is gonna receive that information and you are not not going to see what information they receive. With a git, you are putting in information, expecting to get something in return. So if you think about your online banking, you put in a username and a password and you get all of your banking information. Now we're gonna choose post as the method for our form because we want people to just send us their information. Now in order for any form to work though, you do need an action. An action is a separate file written in either JavaScript or PHP that allows for the transfer of that information. Now we're not going to get into that action but in order to make a form really work, that is something that you are going to need. So this is where you would link to that script that would be in your site folder. Now down here, these are some of the new HTML5 features that Dreamweaver is supporting. And the first one is no validate. The second one is an auto complete. So we're gonna check that button. What that allows for is if someone starts to fill out our form, there are going to be certain fields that will auto complete if they have saved that information within their browser. So now that we have our form, all we have to do is start adding our content, and that's what we will do in the next lesson. So in this lesson, you learned about the different types of forms that Dreamweaver can have and how to add a form element to your page in Adobe Dreamweaver.
