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

Adding input text fields

From: Creating a First Web Site with Dreamweaver CS4

Video: Adding input text fields

The great thing about the web is that it isn't a one way medium. You can communicate with people and the basic form of this communication is a contact form, and that's exactly what I want to add to this Contact page. Let's do a little cleanup initially. I'll just delete that word Contact page at the top. I'll delete this area but note that I want to add an email and then a message text area as well as an Enter Button. I don't need any of that content there right now. I can delete that.

Adding input text fields

The great thing about the web is that it isn't a one way medium. You can communicate with people and the basic form of this communication is a contact form, and that's exactly what I want to add to this Contact page. Let's do a little cleanup initially. I'll just delete that word Contact page at the top. I'll delete this area but note that I want to add an email and then a message text area as well as an Enter Button. I don't need any of that content there right now. I can delete that.

I can even delete this line as well. So here is my sort of blank area where I want these text fields to go and I want to go up and make sure I have the Classic workspace selected because you will notice the third tab in is the Forms tab. And it's gives me this multitude of selections for form elements, everything from check boxes to radio buttons to sort of drop-down list items, all sort of things.

But if you scroll over here, you will see that there is a Spry Validation Text Field. So these sort of green tinted items with the star are Spry elements and they add additional functionality beyond say a typical text field in this case. Again, I'm going to be mindful where my cursor is and I'm going to select that Spry Validation Text Field. When I do that I'm given this Input Tag Accessibility Attributes.

So from here I can go ahead and give it a specific ID name, which is going to be important when I need to start sort of validating this form and sending the data out. But I'm just going to type an email in there. The Label is going to be your email, let's type that in, and I'm going to Wrap with the label tag. This gets to be important when I pass data out but all I'm doing right now is just setting up this form. So I'm going to wrap it with the label tag, email, and I'm going to make sure the text position is before the form item.

I might use it after the form item if it's a radio button or a check box. And then I can add access keys or tab indexes, if I want to sort of have a keystroke activate this box, I can do that, such as e or sort of give this a tab index number if I have a lot of text fields but I don't in this case. I'm going to select OK. It says, hey, you know what, you want to add a form tag? I do. And what a form tag is, is just a box where all this form information, all these text boxes will go.

Now all that information will exist inside of a form tag and when I hit the Submit button, everything within that form tag, all that information will be sent out. It's like defining this sort of a larger group. So the form tag is really just this red line, so that's what that is. Here is my Spry Text Field and I can select it and when I select it, I'm given the option of adjusting its properties. So down here in the Properties panel, I want to start the Type because if I expand that out you can see that I can make all sorts of different types of texts fields depending on my objective.

In this case, I don't need to add an IP Address or URL. I want to add an Email Address. That's the purpose of this field. And when I select that I'm given additional options. This is the additional sort of Spry functionality that's added. I can sort of adjust the preview states. The Invalid Format will actually say Invalid Format. Since, this is an email address, if they don't type in an email sort of formatted text, then it's going to give the user this message.

And say if it's a required field, A value is required. Valid, this is sort of the valid state. It's going to give that a green tint. But you might be wondering when this happens, Invalid Format, when is this message going to appear? It's going to appear not only after maybe they type something wrong, but it's going to Validate on Blur. So what that means is when they sort of deselect that text area, it's going to go ahead and check and see if it's a valid email address and give that message accordingly.

I can also add a hint in here so I can type in email and that would be the text that appears right in here, but really that's the purpose of the label. So it's not necessary. All right, looks pretty good. I'm going to go ahead and go to File and Save and it says that this requires some supporting files. So this is a lot of code that is written that I didn't have to write. This is great. This JavaScript file makes this form field work and this CSS, Cascading Style Sheet, gives it its style.

So I can always go in and modify if I want to use this Spry Validation Text Field CSS. All right, so that's saved. Now I'll go ahead and preview this in Firefox. There is my text field. I can select it and I can type in and I'll maybe just my name and then when I click off of it, it says, hey, you know what? That's not the correct format. Please fix it. So I can go back in here and type in my correct email address, like that. And again, this is on blur. When I can click off of it, it says, hey, you know what? You did it correctly.

It has that green tint, congratulations. So that's looking pretty good. I have my email text field and I'm just going to hit Return. And I want to insert another Spry element, next one over, the Spry Validation Textarea. So I'm going to give the user the ability to go ahead and write me comments about how great my site is. Hey, why not? So it's going to be a message. The label will be comment. How about comments? Wrap it with the label tag, make sure the Position is the label before, select OK.

And there it is, the Spry textarea. So let's look at its options. If I select this Spry textarea, Properties panel down here. The same sort of states. It's going to be built into this text area, which is good and I want to make sure it validates on Blur. Well, what am I validating for? I can validate to make sure they are going to shoot me an email but I want to make sure they comment. And it will validate it on Blur. And then I could even include say for instance the maximum number of characters.

If I don't want somebody writing me a novel or I want to make sure there is nothing malicious going on like somebody just pasted in a ton of information that's going to overload my inbox, I might want to just cap the maximum number of characters. But not only that, I can include a Counter which-- this is pretty darn cool. I can give a character count or I can give the characters remaining. So since, they are only given 400 characters it's going to count down. Definitely pretty handy and again if I wanted to add a hint in here I could.

But it already says comments. It's looking good so far. The last thing I might want to do with this form is add a submit button. So again, the Forms tab, select Button and I'll just give it an ID of submit. Select OK. And it says submit right there. Okay, the last thing I want to do is I want to wrap all of this information in the paragraph tag because notice how the paragraph tag has everything left justified.

Well, I'm going to do that by selecting all of that information, going to down to my Properties panel, HTML section, selecting Paragraph like that and then it moves everything over. In fact I can even format this a little more if I wanted to such as by doing a Return there. Going to stack everything. Much more cleaned up. Gives me room for the labels off to the side as well. Let's go ahead and save this. And again, it's asking me to save the Textarea.css, the Textarea.js file, and also remember that these files need to be uploaded in order for this form to work as well. Select OK.

And now let's preview it in Firefox. As I scroll down, here is my form and I can go ahead and type in my email address. It says it's correct. Comments, I love your site, something like that. But as I typed, you can see that it's starting to count down all the characters. I have 342 characters left. So if I want to go on and on about how cool the website is I can do that. But really it's just a matter of clicking Submit and everything within this form tag will be sent out.

But again, since the web is really a two-way medium I can communicate with people. Really the best way to do that is with forms and as you just saw they are really pretty easy to set up and you can add as much functionality or form elements that you want. And really the next step would be to make this button work and send that data out to an email address.

Show transcript

This video is part of

Image for Creating a First Web Site with Dreamweaver CS4
Creating a First Web Site with Dreamweaver CS4

32 video lessons · 51564 viewers

Paul Trani
Author

 

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 Creating a First Web Site with Dreamweaver CS4.

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.