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 Educator.com

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!

Checkboxes & Submit Button

  • We are going to add checkboxes to our form that allow the user to choose specific destinations they are interested in
  • Checkboxes are similar to radio buttons in the way you add them within Dreamweaver
  • They are created in the same way, but a radio button only allows the user to choose one option out of the available options
  • Add a legend of Travel Destination in a new fieldset tag
  • A checkbox allows the user to choose as many options as they like
    • Click on the checkbox group icon in the forms tab
    • You will see this is exactly the same interface as it is for radio button groups
    • Enter the following: United States, us, Australia, aus, Asia, asia, Europe, eur, South Pacific, spac
    • Click OK & look at the page, click the list values button if you need to modify anything
    • We will also place these in a row by clicking after the name United States & hitting the small delete key on a mac or the delete key on a PC
    • Do this to eliminate the line breaks & place these all in a row
  • The last piece we need to add is our Submit button
    • Hit enter after the checkbox row & click the button icon in the forms tab
    • Add Contact Us as the value, this becomes the text on the button
  • View the form in the browser & make corrections as needed
  • This form does not submit anything at this point, we need to create a script on the web server in order to add the back end functionality, but our form is complete for the contact page

Checkboxes & Submit Button

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
  • Adding a Field Set 0:36
  • Adding a Checkbox Group 1:33
    • Checkbox Group Attributes
    • Arrange Checkboxes
  • Adding a Submit Button 4:56
    • Submit Button Attributes
    • Submit Button Tag Properties
  • Preview in Browser 6:25
  • Summary 7:28

Transcription: Checkboxes & Submit Button

We are now going to add some additional form fields to our form in Dreamweaver.0000

We will take a look at a few more form fields that are very commonly used out on the Web.0006

We have our inquiry area right here, and so far, we ask them if they want to receive an e-news; and if not (or even if), they can also request some additional information from us.0013

The next step is: we want to figure out where it is they want to travel.0030

What I am going to do is add a new field set for that, listing travel information.0036

So, in order to select the field set, I'll go ahead and click the field-set tag; I'll hit the right arrow and hit Enter or Return, and you can see, my cursor is now under the line for the field set.0044

What we want to do is figure out where they want to travel to.0060

I'll name this Travel Destination in my field set; so I'll go up and add another field set here, and this legend is going to say Travel Destination.0065

We'll get some information about what their travel plans are; and now that I have that set up, I can go ahead and add some additional information in here.0082

Now, what I want to do is give them some information or some choices about destinations to travel to.0093

A radio button only allows a user one selection; we want to allow the user to travel to as many places as they possibly can using our company; so I don't want to limit them to one.0102

What I am going to do instead is use a check box; and a check box, by default, gives them as many options as they want; they could check all of the check boxes, if they want.0116

This would add a single check box--the single check mark up there; but what we want is the check box group; and this will look identical to the radio button group we worked with previously.0129

Let's say...we'll give this a name of Regions (in other words, regions of the world); so I will start here, and I'm going to say United States (us); now, the value can always be smaller, and doesn't need to be quite so nice.0144

Now, this is something that can happen to you in this interface; and what I have done is: I moved and hit Tab over to the value, added the value...but notice, United States does not have an s.0165

And I can't seem to get my cursor into that field in order to modify it.0180

What you do is: you select this label; and every keyboard has an End key--it says End on it: I am going to hit the End key, and it pops my cursor right in there, and I can add the s.0186

Otherwise, you will be struggling for a little while.0202

I'll continue here; this is going to be Australia (aus), and I can't tab beyond 2...so I want to add 2 more: I will click the + sign twice.0205

Now, when I did that, you could see that Dreamweaver isn't exactly showing me these options; but there is my third check box.0222

So here is United States; here is Australia; here is my check box; so I have the US and Australia; I'll have Europe (eu) (and notice, it popped everything right back in; so don't struggle with that one); and let's do South Pacific, and let's just call this pac.0231

And let me add one more for Asia: hit the + sign...it added it down here; so that will represent Asia.0259

I'll click OK; notice, it is line breaks that are being added; now, I can keep these in a tall line like this, or I can put my cursor at the end and hit that forward Delete key and put them all in a row.0273

There is my Travel Destination information--where they want to go.0291

Now, the other thing I want to add is a Submit button; so let's go ahead and hit Enter or Return.0297

Now, when I do that, I am still inside this field set; that may not be where I want to be.0305

What I want to do is click the field set, hit the right arrow...and I'm going to go up and add my button to the form.0312

I'll click on this button right here; when I do that, it asks for an ID, so I will say submit.0321

Now, I don't need a label for my button--next to the button, I don't need any text; so I'm going to ignore the Label piece and just click OK.0331

You will see, it is underneath the Travel Destination section; and it's up to you if you want to keep that space in there or not.0341

I think by the time this form comes on to the Web, we will probably have some more questions to go in here; so I am just going to leave that space for now.0350

But I will click the Submit button.0360

Now, when you create a button, the Value field of the button is the text that goes on the button.0363

So, what I am going to say instead of Submit (which is default)...I am going to say Contact Us.0372

When I click off of this, the text will change on the button, and there is the Submit button.0379

Let's put this into the browser and take a look at it.0385

I'll preview this in Chrome, and let's check it out: there is my form; you can see, a field set goes all the way across the page automatically.0391

We can start styling this with CSS, using the various tags for the various fields; but for now, you can see: a field set automatically goes all the way to the edge of whatever is containing it (meaning the page right now).0401

But there is our form: I can click Submit as many times as I want; it is going to do absolutely nothing right now.0419

Because we don't have that action piece right here, there is nowhere for this field to go, or this form and all of the fields within it; so nothing is going to happen in the browser.0428

It will have to be something that is added before this page goes live out on our website.0442

But we just built a Contact Us form for the Wanderlust Travel website.0448

And we have all of the most common form fields on our form: we have a text field; we have a radio button; we have a dropdown menu (or a select list); we have a check box; and we have also used a button for submitting the data.0456

It just so happens we haven't told it where to submit the data yet, using the action attribute.0477

That is building a basic Web form using Dreamweaver.0484