Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding text fields

From: Dreamweaver CS3 Essential Training

Video: Adding text fields

All right I'm going to come in here and open up the file contactus.html, which is just an incomplete version of the completed form that we looked at in the previous movie. So, let's start taking a look at how we create some form fields. Right underneath, where it says "Tell us all about yourself", I'm going to click my cursor, and I'm going to switch over to the Form area of the insert bar. Here's where we find all of our different form tools. You can roll your mouse over these and see what each of these items is, and you'll rarely use all of these elements in your form. I'll at least be showing some of the most common form types that you'll probably be using. Most importantly, is the very first object here, which is a form object.

Adding text fields

All right I'm going to come in here and open up the file contactus.html, which is just an incomplete version of the completed form that we looked at in the previous movie. So, let's start taking a look at how we create some form fields. Right underneath, where it says "Tell us all about yourself", I'm going to click my cursor, and I'm going to switch over to the Form area of the insert bar. Here's where we find all of our different form tools. You can roll your mouse over these and see what each of these items is, and you'll rarely use all of these elements in your form. I'll at least be showing some of the most common form types that you'll probably be using. Most importantly, is the very first object here, which is a form object.

Before you start working with the form you need to add the form tag. All form elements have to be contained inside a form tag in order for them to work properly, with any sort of server. So, I'm going to go ahead and click that, and you can see it's added this red dashed rectangle here. Basically, all of my forms have to go into this form area. Notice when I click in here you can see that this is the form properties inspector, don't worry it will expand as you enter forms fields in here. Now, with my cursor clicked in here, I'm going to choose to Insert a Table. This is not something that's necessary, but I find that having a table makes your form look a lot more organized and well, my main goal is to show you for field work, I still want to show you the techniques to create a good looking form.

So, in the table dialog box here let's create a table with say "10" Rows, and "2" Columns. I know I definitely want 2 Columns but I'm not sure if 10 is going to be enough or too many Rows but, it's a good number to start out with and we can always get rid of Rows or add more Rows later. I'm just going to delete the table width and border thickness settings, we can always set that later, and we're going to make sure we have no header and click on OK. There's my currently very thin table which is collapsed because we have no content, but we're going to fix that right now. I'm going to click in the upper right hand cell here.

The first form object we're going to add is a text field, and you can see that's one of the first buttons over here. I'm going to go ahead and click, which opens the Input Tag Accessibility Attributes window here, and all I'm going to do here, is come in here and give this a label. This is where I'm going to be asking my visitor for his or her name. So, I'm going to type "Name:". We can choose the Style in which we want our label attached to the actual text field. I'm going to choose the Attach label tag using 'for' attribute, and I want that label to appear before the form item, those are the only changes I'm going to make right now. I'm going to click on OK, and you can see here's my form field, and there's my label.

What labels do is they allow you to attach a text description to a specific form field. So instead of typing the word name and then just adding the text field after that, this is actually a label. Now, this might not seem like a big deal at first, but labels allow certain browsers to determine which text description goes form field. Labels also make it possible for screen readers and other assistive devices to tell users that the text field in the upper right hand corner, is indeed intended to be the customer's name in this case. In some browsers clicking the label for text field places the users cursor in the matching text field, or clicking the label for a check box will actually select and deflect that checkbox.

Let me just hide {italic}Dreamweaver{plain} for a moment and I'll show you what I mean. If I look at that completed form field in my browser, contactus-done. Now, here in Apple's {italic}Safari {plain}clicking the labels does nothing. That's just the way this particular browser is set up. But, if I take this and I view this page in say {italic} Firefox,{plain} notice when I click the labels my cursor actually starts flashing in there, so I can start typing my information, and so on. So, that's the usefulness of labels. Notice if I click Add me to Teacloud newsletter that automatically checks and unchecks that box. That's why I suggest using labels and setting them up the way we did, so that they are associated with a field that you're creating.

Now, let me go ahead and name this text field, so it's something not as generic as the name we see down here, which is textfield. I'm going to call this "CustomerName", now a general rule, you should name your form fields with no special characters or any spaces, and try to keep the name simple and relevant to the text field. The names are going to become especially important when you're working with the person is setting up your server-site interaction to get information from your form. Go ahead and enter that. Notice if I come in here and click on that label, I'm going put my cursor in there, I'm going to click the label tag to select it.

Now, I'm going to hit the Command + T or Ctrl + T on Windows to bring up the Quick Tag Editor we were looking at in the previous chapter. Noticed that the label is for, there's the for attribute customer name. That's what we named that text field. So, basically this is the code that tells the browser that this label is associated with this field called Customer Name, it's very important. Now, what I want to do is highlight that label. Basically, I just want that label selected and I'm going to take that and drag that into the first cell here. This way my labels in my text fields will be all nice and lined up. But, this actually causes a problem in {italic}Dreamweaver,{plain} with that label selected, I'm going to hit Commander Ctrl + T again to bring a Quick Tag Editor, and notice that the four attribute has now become this generic label.

Now, because I want to be able to use my labels inside this table I'm going to have to change this attribute back to "CustomerName", and it's very important that a spell it exactly the same way as I spelled the text field's name, with a capital C and a capital N, all one word. That way I'm insured that label will work. So, again that's just an issue in {italic}Dreamweaver{plain} when you select the label and just move it to another cell, it somehow loses its association with that field and you have to go in and manually change that. But, I think it's worth it to an order to keep my form organized nicely inside a table.

Okay, let's add another text field. I'm going to come down to the second cell on the right side here, and will insert another text field. This label will be "EmailAddress:" I'm attaching the label using the for attribute, because as we just saw that allows me to associate that label with that text field, click on OK. There it is, and I'll go ahead and select the text field, and we'll just call this "EmailAddress". And again, I'm going to select that label and move it to the other field here, and again I'm going to press Commander Ctrl + T to open a Quick Tag Editor, and change the four attribute to match the field that I want to pair this with, there we go.

Let's add one other kind of text field, I'm going to click down on the next cell here on the right, and instead of the text field button here, I'm going to come over and click on the Textarea field, and we'll see what that is in just a moment, this will be for comments, so we'll type "Comments" as our label, click OK. And, you can see what this does is it gives me a large text area. So, this is useful when you're expecting your visitors to type a lot of information or a fair amount of information. Basally, more information than can be accommodated by a single text field line like these first two here.

I'll go ahead and select that field and we'll come down here and collect "Comments". And, again I'll select its label, drag it over, and once again we must come over here and hit our Command + T, and change this to "Comments". Okay, so there are our text fields. Let's start with the text field here. Notice when I select this, down in my properties I inspector I can see the type is a single line. The only difference between a text field and the text area is whether it's Single line or Multi line, notice choosing Multi line turns it into a text area, but I do want this to be Single line.

Now, if we do a password, it doesn't look like anything has changed, but that's used when you want somebody to enter a password and you don't want the actual text to display, so bullets will appear in place of the characters. I don't want that in this case. So, I'm going to keep Single line selected here. We also have some other options, like character width, which determines how long that text field is going to be. It's currently at its default setting, but let's say I wanted a character with the "50" characters, I can type that in and that makes it super long. Maybe, we'll try "25" characters like so. Now, that doesn't limit the amount of characters that somebody can put in the text fields. So, if they click in here and then fall asleep with there head of the keyboard, it will just keep typing every letter in there. If I want to limit the amount of characters I can come in here and type in a max character setting of say, maybe "50" characters and that way they can't type in more than that amount of characters.

We also have initial value in here. If we want something to appear in this text field before the user type there name here like, "Type your name here", I can do that, and you can see that text appears in there giving them another clue of what they should do in here just in case they don't understand what name: and a big blank area means. Now, the text area has a couple of different options. Again, it's the text area only because Multi line is selected, but instead of Max Characters we have Number Lines down here. Remember the text field, we have character with the max characters with the text area, we have character with a number of lines.

So, I want this to be sort of a less wide field, I might change this to say, maybe "30" character width, and maybe I'll reduce this to "4" lines of visibility. So, just to make it a little bit smaller they can still type in as much information as they want limiting the size of that text area on the page. Now, we also have wrap options down here. That determines how the text is going to wrap as they continue typing there information in to this box. We have Default, Off, which makes no wrapping occur, we definitely don't want to select that. We have Virtual, which basically allows them to keep typing and the text will wrap with in the box.

Or, we have Physical, which will only wrap the text when they hit the return key on there keyboard. I generally leave it to Default, which is virtual setting, which I think works just fine. Okay, so those are our text form fields. Before we end this movie, I just want to make couple of quick changes to my table here. I'm going to select this entire column here. And, this is the advantage of working with a the table, I can come in here, with this column selected, oops let me click that again, and I'm going to set the horizontal alignment to Right, which now lines up the colons of each one of these items very nicely.

I'm going to set the vertical alignment to Top. Just to make sure all the items in my table cells are set to the top. I preview this in my browser, you can see what that looks like. So, the form is coming along. So, that's how you work with text fields in {italic}Dreamweaver.{plain} In the next movie we'll talk about working with Check boxes and Radio buttons.

Show transcript

This video is part of

Image for Dreamweaver CS3 Essential Training
Dreamweaver CS3 Essential Training

129 video lessons · 86937 viewers

Garrick Chow
Author

 
Expand all | Collapse all
  1. 1m 12s
    1. Welcome
      1m 12s
  2. 21m 0s
    1. HTML vs. XHTML
      3m 4s
    2. What is CSS?
      3m 48s
    3. What is XML?
      2m 11s
    4. What is DHTML?
      1m 9s
    5. What is JavaScript?
      1m 23s
    6. File naming conventions
      3m 22s
    7. What is an index page?
      6m 3s
  3. 46m 18s
    1. Setting up your workspace
      2m 39s
    2. The Welcome screen
      4m 11s
    3. Windows and Mac differences
      3m 18s
    4. The Insert bar
      4m 38s
    5. The Property Inspector
      1m 50s
    6. The Document toolbar
      6m 6s
    7. The Document window
      9m 11s
    8. Panels and panel groups
      6m 58s
    9. Saving workspace layouts
      2m 22s
    10. Defining a default browser
      5m 5s
  4. 24m 59s
    1. Defining a site
      9m 5s
    2. File and folder management
      3m 11s
    3. Understanding path structure
      3m 17s
    4. Adding content to a site
      6m 6s
    5. Creating a site map
      3m 20s
  5. 38m 39s
    1. Creating a new blank site
      6m 0s
    2. Creating and saving a new document
      7m 54s
    3. About DOCTYPE
      3m 59s
    4. Inserting images
      9m 26s
    5. Inserting text
      3m 35s
    6. Aligning text and images
      4m 9s
    7. Inserting meta tags
      3m 36s
  6. 45m 58s
    1. Link basics
      6m 4s
    2. Linking with Point to File
      5m 18s
    3. External links
      4m 15s
    4. Creating email links
      5m 49s
    5. Named anchors
      7m 37s
    6. Linking to a file
      7m 35s
    7. Image maps
      9m 20s
  7. 1h 8m
    1. About CSS
      4m 52s
    2. Anatomy of a style sheet
      4m 10s
    3. CSS and page properties
      10m 11s
    4. Moving an internal style sheet to an external style sheet
      6m 46s
    5. The CSS Styles panel
      3m 48s
    6. CSS selectors
      2m 37s
    7. Type selectors
      12m 13s
    8. ID selectors
      10m 21s
    9. Class selectors
      5m 42s
    10. Creating rollovers with pseudo-class selectors
      7m 22s
  8. 42m 54s
    1. CSS vs. the Font tag
      2m 42s
    2. Formatting text with the Property Inspector
      8m 41s
    3. What measurement should I use?
      3m 15s
    4. Managing white space with margins, padding, and line height
      8m 34s
    5. Using font lists
      5m 45s
    6. Aligning text
      2m 47s
    7. Creating lists
      5m 8s
    8. Creating Flash text
      6m 2s
  9. 43m 19s
    1. About tables
      1m 28s
    2. Tables in Code view
      2m 36s
    3. Creating and adding content to tables
      7m 40s
    4. Changing table borders with XHTML
      5m 46s
    5. Coloring tables with XHTML and CSS
      6m 41s
    6. Aligning table content
      6m 39s
    7. Sorting tables
      3m 6s
    8. Setting table widths
      4m 48s
    9. Creating rounded-corner tables
      4m 35s
  10. 28m 22s
    1. Dreamweaver's layout tools
      3m 8s
    2. Tracing images
      4m 58s
    3. Adding AP div tags
      7m 29s
    4. Working with Layout Tables
      6m 55s
    5. Adjusting table widths and nesting tables
      5m 52s
  11. 16m 19s
    1. What is a device?
      3m 14s
    2. Attaching a printer-friendly style sheet
      3m 5s
    3. Styling for print
      7m 41s
    4. Adobe Device Central
      2m 19s
  12. 29m 54s
    1. Rollover rules
      3m 31s
    2. Creating simple rollovers
      5m 36s
    3. Creating disjointed rollovers
      7m 12s
    4. Creating navigation bars with multiple states
      9m 21s
    5. Creating Flash buttons
      4m 14s
  13. 26m 32s
    1. Viewing the code
      6m 9s
    2. Editing in Code view
      3m 0s
    3. The Code toolbar
      5m 11s
    4. Working with Code Collapse
      4m 27s
    5. The Quick Tag Editor
      2m 20s
    6. Working with snippets
      5m 25s
  14. 32m 45s
    1. About forms
      3m 23s
    2. Adding text fields
      9m 52s
    3. Adding checkboxes and radio buttons
      5m 37s
    4. Adding lists and menus
      6m 5s
    5. Submitting form results
      3m 23s
    6. Styling form elements with CSS
      4m 25s
  15. 23m 17s
    1. Opening a new browser window
      9m 38s
    2. Creating a popup message
      2m 50s
    3. Validating text fields
      2m 42s
    4. Getting more behaviors
      7m 2s
    5. Removing extensions
      1m 5s
  16. 14m 58s
    1. External image editor preferences
      3m 18s
    2. Built-in image editing tools
      3m 11s
    3. Roundtrip editing from Dreamweaver to Fireworks or Photoshop
      4m 39s
    4. Copying and pasting
      3m 50s
  17. 34m 16s
    1. Templates in action
      5m 12s
    2. Creating a new template
      6m 36s
    3. Applying templates
      3m 36s
    4. Modifying a template
      1m 40s
    5. Adding repeating regions
      3m 28s
    6. Working with repeating regions
      3m 13s
    7. Adding optional regions
      3m 34s
    8. Creating a library item
      3m 48s
    9. Modifying a library item
      3m 9s
  18. 13m 2s
    1. Using the History panel
      4m 24s
    2. Saving History steps as commands
      3m 25s
    3. Using Find and Replace
      5m 13s
  19. 14m 44s
    1. W3C accessibility guidelines
      4m 6s
    2. Accessibility preferences
      1m 29s
    3. Inserting accessible images
      3m 2s
    4. Inserting accessible tables
      2m 53s
    5. Inserting accessible form objects
      3m 14s
  20. 26m 17s
    1. About media objects
      2m 6s
    2. Linking to audio and video files
      5m 56s
    3. Embedding audio and video files
      7m 7s
    4. Setting parameters
      4m 27s
    5. Inserting Flash content
      2m 37s
    6. Inserting Flash video
      4m 4s
  21. 28m 47s
    1. Getting site reports
      3m 35s
    2. Checking links sitewide
      3m 30s
    3. Signing up with Tripod
      6m 36s
    4. Entering remote info
      4m 13s
    5. Publishing your site
      5m 41s
    6. Updating and publishing pages
      5m 12s
  22. 44s
    1. Goodbye
      44s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.