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!

Radio Buttons & Select Lists

  • Radio buttons only allow the user to choose 1 option from a group of buttons
  • Create a new fieldset tag with a legend of Inquiry to use for the radio buttons and select menu
  • You can use the radio group option from the form tab in order to create multiple buttons at the same time
    • Each button needs a label which the user sees and a value which we receive back as data from the user
  • Also add a menu below the radio button
  • A menu by default allows the user to choose a single option

Radio Buttons & Select Lists

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 more to the Field Set 0:26
    • Create another Field Set
  • Adding a Radio Button 2:25
    • Insert Radio Button Group
    • Radio Button Group Options
  • Set Initial State of Radio Button Group 6:52
  • Adding a Drop Down Menu 8:07
    • Insert Select (List/Menu)
    • Set Drop Down Menu Attributes
    • Edit List Values
  • Preview in Browser 10:46
  • Add Choose Prompt 11:11
  • Summary 12:07

Transcription: Radio Buttons & Select Lists

We are now going to take a look at adding additional form fields within our Contact Us form for our website.0000

Right now, so far, I have a form tag (which is the red dotted line surrounding this content); I have a field set with a legend for that field set that says Personal Information; and I have a Name and Email field.0008

What I want to do is keep building this form field.0026

So, within the form, we have the field set; and if I go ahead and click on that, it will highlight the content.0031

Now, sometimes, once you are in a field set, it's hard to get out of one; so I'm going to use a trick that we have used once before, and that is to select the big content you want to get your cursor in front of or place your cursor after.0040

And to do that, I selected field-set in the tag selector.0058

Now, I am going to hit the right arrow key and hit Enter or Return.0062

What that is going to do is move me out of the field set; and if you look in Dreamweaver here, you can see, this line goes all the way across the page; that is the bottom of the field set, and that field set kind of creates that box around form fields to help you organize your forms a little bit better for the user.0068

Now, I am going to create another field set; so I'll go up to the Forms tab and go right after the one that says ABC on it; I am going to click that field set.0090

What we are going to be doing here is asking the user some questions about what they are interested in.0103

And we can call this Inquiry--so, in other words, why is the user filling out the form?--they want to inquire about something.0111

We'll click OK and place my cursor after that text; and you can see, it looks like I have already hit Return here; so there is space for my cursor.0125

As long as that is the case, I can go ahead and start adding more information.0136

Now, we added two text fields up above; what I want to add next is a radio button.0141

Just like you can only listen to one radio station at a time, radio buttons were designed to allow the user to choose one out of whatever options are available.0149

I am going to ask them if they want to receive our newsletter.0161

I will do "Do you wish to receive our newsletter?"; now, this is going to be an e-newsletter, so that they know they won't be getting it through the regular mail; so I'll ask them that question.0168

And then, I am going to choose the radio button piece.0185

Now, my radio buttons, I want to put underneath this question; and I don't want spaces between them, so I am going to use Shift+Enter, which creates a line break.0189

Now, you really won't be able to see your cursor very well; right down in this bottom left corner, there is a tiny little blinking thing--that is where your cursor is.0202

But I am just going to start inserting anyway: I had Shift+Enter that puts it down there; I'll just keep moving forward.0213

Now, a radio button group is a piece of the radio button; but what the radio button group does is allow you to add a few of them at a time, which is what I want.0222

The radio button just adds one for you; so save yourself some time, because normally there is going to be more than one; save yourself some time by choosing radio group.0235

I'll go ahead and click that.0246

Now, the name I have here in this area has nothing to do with this text here; so I'm going to have this say "e-news," because this is just for my reference.0249

When we get the form data back from the user, it is going to say e-news as the form field.0263

Now, what I am going to do is click down in the Label area; and you can add two by using Tab; as soon as you get to the second option, you will have to hit the + sign to add more.0270

I only need two; I'm just going to ask them yes or no.0284

So, since it's the label, and the label is always what the user sees, I'll make it a capital; I'm going to hit Tab to get to the new field.0288

This one--I'll just say "yes" in lowercase; I'll tab once again and say "no"; and the value will say no.0297

I am just hitting the Tab key to move around these.0307

If I hit the Tab key again, it moves me down into this area.0310

If you want more than two options in a radio group, you would need to click the + sign and then select down in that area to start typing.0316

These up and down arrows allow you to move or modify your content; you can see, I'm moving this one up.0327

If you decide you don't want one of these labels and values, that is when you click the - .0334

I am going to put "yes" as the first option: it is not alphabetical, but we really want people to choose to have our e-news.0342

I am also going to use line breaks: what that does is allow me to change this; you can see, the icon is a vertical group of buttons--most of the time I find myself wanting it horizontal, and I'll show you how to do that.0352

If you do a table, it gets very complicated to change it; so I'm going to choose Line Breaks and click OK.0368

Now, you can see, our yes and no are vertical, one on top of the other; I'm going to put my cursor after yes and hit the Delete key for deleting forward (not backwards).0376

And you can see, if you just use a break tag in there and choose that option, it makes it really easy to set these horizontal.0390

We have our yes radio button; you can see, the name of the radio button is e-news; value is yes.0399

Here is my no--checked value of no.0408

Now, if I want, when this form opens, to have yes chosen already...because I'll show you: let's save this and put it in the browser, and you will be able to see what I mean...0412

When this opens, I don't have a selection in either box.0426

With a radio button, once you do make a selection, I can't unselect; I can just change what I have selected.0432

But what I want to do is, when the page opens, have this set to yes, so that by default it's yes (but the user has the ability to choose no).0442

And notice, here is our Inquiry field set.0453

So, in order to make yes already checked or chosen when the browser opens, I am going to set the initial state to "checked" right here, and that will take care of it for us.0458

I'll go ahead and put this in the browser; and when the browser opens, it should be checked, which it is.0472

That is how you create a radio button within a form.0482

Now, the other thing we want to do is: we want our form to have a dropdown menu.0487

There are a couple of types of dropdown menus; I am going to do just the single-line dropdown menu for this area.0494

And what we want to do is ask them what they want from us.0505

So, I am going to move up into this Forms area, and you will see there is one with an arrow, almost like a frog jumping; and that is known as a jump menu.0509

What I want is the one right before it; and this is called a select...or Dreamweaver calls it a list or menu, or it's often referred to as a select list or a dropdown menu.0521

I am going to click on that; the ID for this one will be, let's say, request.0537

I'll just name it Request for now.0546

And down in our label (this is the text the user is going to see), I will say, "What would you like to receive?"0551

There we go; attach label tag using for attribute; and I'll click OK.0567

Now, you can see, we have our little dropdown menu, but it doesn't have anything in it right now.0573

So, what I am going to do is click in that and click the List Values: this is how I can populate that menu.0579

You can see, it is very similar to the radio button piece (or at least radio button group); so my label is going to be Specials Brochure; the value will be specials.0588

The next one will be Plan a Trip; this will be plan; and the last one (notice, I'm just tabbing between these--this one lets you go to the third one) will be Consult with Us (consult).0606

Now, if I don't like the order of these...I want consult to move up to the top, so this is a little more alphabetical: I'll select it and hit the up arrow twice.0625

Plan a Trip will be next; so we are putting those in alphabetical order; I'll click OK, and there is our menu.0637

Let's take a look at this in the browser, along with our radio button.0646

We have our Inquiry; now, I could certainly change that name...but here is Consult with Us, Plan a Trip, Specials Brochure.0651

It is possible for the user to choose only one of these options, the way it is right now.0663

Now, I could add another option up at the top that says Choose one: so, let me show you how to do that.0671

I'll select this and click on List Values; I'm going to hit the + sign, and I'm going to say Choose an Option; let me just say that.0679

The value side--it doesn't really matter what I put; so I'm just going to say Choose; and I'm going to take this one and move it up to the very top, using the up arrow.0691

Click OK, and there is our form.0705

Now, this makes a little more sense (I think) to the user: Choose an Option--it kind of prompts them to click that drop arrow in order to see what the options are.0709

But I'll leave that totally up to you--how you want to do it.0723

That is adding a radio button group (which adds multiple radio buttons at the same time), and also a dropdown menu or a select list in a form, using Dreamweaver.0727