Adobe Dreamweaver CS6 Text Field Elements

In this lecture, our instructor, Candyce Mairs, discusses text field elements. She demonstrates how to add a field set, add a text field, modify text field attributes, and set text field tag properties.

Text Field Elements

Click on the fieldset icon in the forms tab of the Insert Bar & enter Personal Information into the legend

We will look at what this fieldset & legend does once we move this page into the browser

Click on the text field icon

Enter name as the id & Name as the label

The standard text field is about 25 characters wide by default

We will make this field 55 wide & set max characters to 60

Do that same thing to add an Email field

Save the page & preview it in the browser

Go back & adjust the field lengths as you like

Text Field Elements

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.

Dreamweaver is going to give me some dialog boxes that you will soon get very familiar with; but this is going to be the Name field.0125

I am just going to say name in lowercase as the ID; the label is what the user is going to see.0135

So, the name ID here is for CSS, so we can reference this specific tag on the page; but the label, the user will see; so I will say Name with a capital N for them.0143

Now, I'm going to attach the label tag using the for attribute; that is the recommended way to work with text fields, and it's because the label is this.0160

And, if it is a screen reader trying to fill out the form, or a user using a screen reader, trying to give the screen reader instructions to fill out the form, we will end up with a box of content, and we will end up with some text.0173

What the for attribute does is match up the text with which box it is on the page.0189

If a user can't visually see the page, it gets very difficult for them to know "Here is some text; what box does it match up with?"--and the box is what they need to enter their information.0198

You will find each browser does tend to make these look a little different; so you can see this field set square is a little bit darker--it sets off the fields a little bit easier, and the Personal Information is kind of sitting in the middle of that line.0420

That is Firefox; we'll take a look at Safari here--and in Safari, you can see, it looks very similar to Firefox.0438

And the last one we have is Google Chrome--let's see what it looks like in Google Chrome.0451

Educator.com recommends the Adobe Dreamweaver CS6 Digital Classroom to go with our Dreamweaver course. In this book-and-DVD package, expert instructors provide a complete course in basic Dreamweaver that you can access at your own speed. Step-by-step instructions in the book are supported by lesson files and video tutorials on the DVD, presenting the newest version of Dreamweaver in 16 self-paced lessons. You'll learn to use style sheets, dynamic HTML, multimedia, databases, and much more to design, develop, and maintain your website.