Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Probably the most commonly used form element is the text field. The text field allows users to input text for form submittal. There are three flavors of the text field: the Input text field, Password text field, and Textarea element. The Input text field is used for capturing a single line of text and is usually used for names, addresses, and anything else that the user must type themselves that fits on one line. The Password text field hides the text that is being typed by the user, but otherwise submits text just like any other Input text field.
The Textarea field allows users to submit as many lines of text as they require and is primarily used for commenting or contact forms where the user needs to submit a larger request. Although you can select the text elements in Dreamweaver and change them from one text field type to the other, Dreamweaver gives us individual icons to insert the text element of choice, so the process is greatly simplified. So here I have the join.htm file open, and I am going to take just a moment to show you where all those different types of text input fields are.
If you go up to your Insert panel, right after the form element is our first text field. Then we have what's known as a Hidden text field and the Textarea. The Hidden field, let me talk about that for just a moment. If you need to force a value for when the form was submitted. Let's say so you had some type of a session variable, for example, that you wanted to be established as the form was being submitted until your application know that hey, this person is now logged on. You would do that through a Hidden field. That way, that data would get submitted but the users don't have to actually explicitly choose it. Now you notice we don't have an icon for the Password text field, and that's because it's just so easy to toggle the property of your text field using the Properties Inspector once you placed it on the page. Okay.
Well, now that we have talked about text fields for a little bit, let's go ahead and place a couple on our form. I am going to go ahead and place my cursor inside the fieldset for personal information. If you hit Return, you'll create a paragraph and the way that we're going to structure our form is that each form element is going to be in a separate paragraph. Now, it might seem at first that that's adding unnecessary structure but the truth of it is those paragraphs are going to allow us to layout and space our form elements in a way that would be difficult to control otherwise. So now I am going to go up to my Input panel and I am going to insert a text field and from the Input Accessibility dialog box that comes up, I am going to add the following information.
For ID, I am going to type in first_name. Now again, I am just sort of saying well with the processing script, I probably would want this to say first_ name, but there's no hard and fast rule what that ID needs to be. It does need to follow the same naming conventions as any other ID, no spaces, no use of punctuation, don't start it with a number, and that sort of thing. Now, for the label, this is the text that a user is actually going to see out beside it. So here I am just going to type- in first name and then a colon. I am going to attach this label using the For attribute, just like we discussed in one of our previous movies.
I am going to make sure it's coming before the form item and I am going to give it a Tab Index of 10. I am going to click OK and then there's our first text field in our form. Now, you maybe wondering, okay, this is the first element in our form. Why are we giving it a Tab Index of 10? Why not 1? Well, you could do it that way. I usually use 10s and increments of 10s for each of my form elements. The reason I do that is let's say I finish a form and I am already done with it. The client comes back to me and says, hey, I need to add a couple of more form elements. Is that hard to do? Well, for the most part, no it isn't. I will just add another space, pop the form element in, and I am good to go.
But if my Tab Index is 123456789 and let's say I have 30 elements and I've just added element number 2, now I got to go back and re-number every single one of them. By giving myself increments of 10, I give myself plenty of information for having to add form elements at a later time. Let's go ahead and add a couple more form elements here. I am going to go to the end of the First Name and hit Return to create a brand new paragraph and once again, I am going to go up and insert another text field. This one, I am going to give an ID of last_name.
The label will be Last Name. Notice that I am using capital letters there, a colon, a space between them and the Tab Index for this one is going to be 20. Now Dreamweaver is going to remember our preferences. So, if we've been attaching the label tag for a For attribute, we shouldn't have to choose that again. It's also very smart and depending upon what type of form element you are inserting on the page, it's either going to have a default of Before or After the form item. Usually you won't have to spend a lot of time changing that item. Let me go ahead and click OK. Let's do one more. So, I am going to go up, hit Return to create a brand new paragraph, ad insert another text field on the page.
This one's ID is going to be email and the label for this one will also be Email, but this time with a capital E and a colon. I am going to leave everything else the way it is, but give it a Tab Index of 30. Now I am going to save the file and I want to turn your attention just for a moment to the Properties Inspector. Go ahead and take any of those Input text fields that you've just placed on the stage and click it to focus on it. Notice that in the Properties Inspector we do have some options as to what we can do with this text field. We could rename it if we didn't like the ID we gave it before or if that's changed.
We could give it a specified character width and a maximum number of characters. Now the character width would affect the visual width of this text field and it's very tempting to go ahead and do that now so they're all the same. However, in this case, we're going to be using CSS to do that, so we don't really need to enter that value here. Notice also that this is where we could make the text field a Password text field if we wanted to, and we could apply a class to the Input text field. That's a good thing because we're going to be doing that a little bit later on. Okay. So our form is well on its way, and it should have given you an idea of how easy it is to place text fields in your form.
From this point forward, all that remains is to consider the information we need from our user and which form elements meet the requirement for collecting or presenting that particular type of data. With that in mind, we're going to explore using the List/Menu item next.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.