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!

Text Field Elements

  • Open contact-us.html which contains some text and a form
  • Type the words Request a Brochure & make it an h1
  • Move to the form tab in the insert bar
  • All form fields must go into this area
  • 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.

  • Intro 0:00
  • Adding a Field Set 0:26
    • Insert Field Set
  • Adding Name Text Field 1:35
    • Text Field Attributes
    • Text Field Tag Properties
  • Adding Email Text Field 4:58
    • Text Field Tag Properties
  • Preview in Browser 5:58
  • Summary 8:02

Transcription: Text Field Elements

We are now going to take a look at adding text fields to the form for our Contact Us page.0000

I have a form tag presently on the page; I have not filled in an action attribute for this form, because I don't yet know that.0008

Dreamweaver is going to assign it a method of post, and I added the form tag name.0020

What I am going to do now is, within this form area, start building my form.0027

One of the first things I want to add is something known as a field set, and it's a handy way to differentiate pieces of data within your form.0032

We are going to add a field set piece to this before we add any fields.0044

And to do that, I am going to go up to this icon up in the Forms tab of my Insert bar; and it's right after what looks like ABC, and it's this one here, called a field set.0051

I am going to go ahead and click on that, and it gives me the opportunity to add a legend, which I am going to do.0065

I am going to say Personal Information.0073

Hit Enter or Return, and it's somewhat hard to see what is going on here, but I am just going to put my cursor after that and hit Enter or Return.0077

Now, that will show up in the browser; but let's get a couple of text fields added.0089

A text field is the most common type of form field; what it is, is a single line box for the user to insert information.0095

Because it is so common, it immediately follows the form tag itself in the Forms tab.0105

The first one was creating the form, and then all the rest of these are the fields that can go inside that form.0112

I am going to click on Text Field.0121

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

I am going to be using that for all of my text fields.0210

I'll click OK, and there is our field; here is my label; and if you notice, down in the tag selector, you will see it definitely says label; if I click on the box, you will see it says text-field.0214

So, if I didn't like what I named it, this is where I could change it; this also becomes a part of the ID.0230

The character width--you can see, I tend to think this runs around 20 to 25 characters by default; but what you are going to want to do is set this.0238

I am going to set this, since it's a name, to 50 characters.0249

50 characters should be long enough for the user to be able to enter their name into that field.0255

Now, just because I set 50 here, it doesn't mean it is going to stop them at character 51; so I also want to make that the maximum characters.0261

Now, just in case 50 isn't enough, I can use a different value in the max characters field; so, I'm going to do that.0274

There is our Name field.0285

Let's add one more: I'm going to put my cursor at the end and hit Enter or Return; this time, I am going to click the text field one more time.0287

We also want to get their email information: so the ID will be email; the label will be Email, as well.0298

Now, it's up to you if you want to add email address; I tend to find most people drop the word "address" nowadays, because people understand what it means.0308

But I'm going to attach that using the for attribute, click OK; I'll select this box of content to get my text field information, down in the Properties area.0318

Now, an email address usually needs to be a little wider, so what I am going to do is set this to 60 and 60.0332

Now, I set character width to 50 on the name and 60 on email; and now, you can see what character width does: it specifies how big the box looks in the browser.0341

So, we have that piece set up; let's save the page, and we'll go look at it in the browser.0356

First of all, I'll look at it in Internet Explorer.0363

Now, you can see, there is this little line surrounding the content; and Personal Information has kind of divided up these two fields, so the user knows this is personal information.0367

Then I can move into what other kinds of information we want to capture on the form.0383

But this is the field set, and the legend piece allows you to add text over that line on the very top piece of it.0390

So, field set and legend are these two; the line and this text over the line.0402

Then we have our Name and Email fields; that is what it looks like in Internet Explorer 8.0408

I am going to go down now to Firefox; and let's take a look.0415

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

You can see, those look somewhat similar.0457

Now, you may have noticed that there are square corners in some browsers and curved corners in others; and that is not something you can adjust too much.0460

Browsers have their default view, although there are some properties of your form you can use CSS styles to style.0472

But we just added 2 text fields, a field set and legend surrounding those, within our form tag, using Dreamweaver.0482

And you can see, that wasn't too hard to do.0493

We'll style it once it is complete--I always wait until the end to do that.0496

But we have started our Contact Us form for our Contact Us page at Wanderlust Travel, adding a form tag that now contains a field set and legend, as well as 2 text fields within the form.0501