From the course: Building HTML5 Forms with Dreamweaver

Building a form in Dreamweaver - Dreamweaver Tutorial

From the course: Building HTML5 Forms with Dreamweaver

Start my 1-month free trial

Building a form in Dreamweaver

“

- [Instructor] Okay, let's roll up our sleeves now and start building a form in Dreamweaver. I just want to clue you in that I'm working with a Dreamweaver site and you're familiar with Dreamweaver sites, that's the folder on your desktop where you organize all your files. And if you want to take a look at the one I've set up, then filename, or the site name is linkedin-dreamweaver-forms. And I've set up a local folder with sub-folders for each chapter. Now that I verified the status of my site I'm going to click done. I can create a new file, and that's an HTML file. I'll let Dreamweaver help me out with a title for this HTML page. We're keeping it simple. It's an HTML5 document type of course, we don't have any CSS yet, and I'll click create to generate the file. Next I'll save the file. And I'm going to name it linkedin-dreamweaverform-o2.html. You can see, by the way, that I've configured my Dreamweaver interface with code on the left and live view on the right. You'll have your own setup and it will correspond to the environment that you like to work in. I've also made the code a little larger than normal so it's easier for you to read. Inside the head element, I'm going to define a little basic, minimal styling for the page and for the form. So, I created an open and closed style element, and, first of all, I'm going to define a style for the body tag. The font family just eliminates serif fonts, because I find that distracting even when I'm developing. The background color will be functional, it's not a design thing, it's just going to help me distinguish between the actual page and the form. And I'll show you what that means in a moment. I need to correct the syntax for my margin, that's better. And now it will center the page content on the page. Next, I'm going to create a little basic style for the form. So I just created a little padding inside the form and a little margin outside of it, so that I'm distinguishing it from the rest of the page content. And I created a separate background color, so that, as I start configuring my form, I can tell whether or not it's working. And later on I can replace beige and gray with the actual colors from my site's color scheme. So having this define a little basic style, we are done in the head element, and we can start generating the form using code hinting from Dreamweaver. Let's do that, I'll open the form element. And inside the form, I'll create a heading. Just something simple like sign up. And I've started my form. Now, every form needs an action, I mentioned that earlier. We'll get to that in the next video.

Contents