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

HTML5 element support

From: Dreamweaver CS5.5 New Features

Video: HTML5 element support

One of the great things about HTML5 support in Dreamweaver CS5.5 is that the support really permeates the entire program. It's not limited to just the code environment and the code hinting that I was showing you in the previous movie. Anywhere that you can interact with an element, you're going to find that support for those HTML5 elements and attributes. So in this movie, I want to show you that HTML5 support while we're in say Design view instead of Code view. This is going to be particularly helpful for those of you that really like to work in Design view rather than hand coding.

HTML5 element support

One of the great things about HTML5 support in Dreamweaver CS5.5 is that the support really permeates the entire program. It's not limited to just the code environment and the code hinting that I was showing you in the previous movie. Anywhere that you can interact with an element, you're going to find that support for those HTML5 elements and attributes. So in this movie, I want to show you that HTML5 support while we're in say Design view instead of Code view. This is going to be particularly helpful for those of you that really like to work in Design view rather than hand coding.

So I have the contact.htm file open from the 02_03 folder, and one of the first things that I want to do is talk about what we're going to be updating. So this is the same page, actually, that you worked on in the previous exercise. There's just a little bit more there. So the structure is exactly the same. If I click inside these elements, you can see, there is our rapper, there is our secondaryContent, there is our mainContent, there is the mainHeader. So the same structure, there is just stuff inside of it now. So in Design view, but with Live view turned off, I am going to scroll down and find our form.

You may have to scroll over a little bit because Dreamweaver's Design view doesn't render this all that well. That's okay. We'll turn on Live view so that we can preview what this form is going to actually look like when we're done with it, but we just need to access the form elements right now. They don't need to be really pretty. We just need to be able to select them and work with them. So the first thing I am going to do is select our first text field in our forms So again, if you just scroll down, you may have to go over to the right-hand side, but just underneath the mainContent, you want to find this contact form. And I am going to select the first element on the page, which is the Name element. And you can see I have this Personal Information legend obscuring that, but it's okay. All you have to do is select that first form element. Okay.

So I am going to use the panel that doesn't get a whole lot of attention in Dreamweaver and that is the Tag Inspector panel. This is a really cool panel, because if you select an element on the page in Design view, you're going to see all of the properties set for that particular element, and then you're going to be able to set those properties as well, all without ever having to go in and manipulate the code yourself. So I can see maybe a little bit more of this. I am going to collapse the Files panel, and I can see that again I have some category views here. I can view a list view of all the properties or a categorized view, and just to make it a little bit easier to find things, I am going to stick with the categorized view. And again, I am just going to make sure I have this form element selected. Okay.

I am going to go down to the Uncategorized and open that up, and there are a lot of new HTML5 attributes that support forms, and one of those is placeholder. So if I look down here, I can see that placeholder is currently empty. What placeholder allows you to do is have placeholder content in the form that offers a hint to the users as to what type of content goes there. So I am going to click inside placeholder and I am just going to type in first and last name and hit Return. Now, of course we're not going to see anything rendered differently on our screen, but as soon as we preview that in Live mode, we should see that placeholder data.

Now, another thing I want to do is I want to make this required. HTML5 has a required attribute that's basically a Boolean value; it's either yes or no. So directly underneath that, I am going to find required, click in the value area, and I am just going to grab the pulldown menu and choose Yes. So while sometimes you have the option of typing in a value, other times you are going to have specific values that you can set by using that pulldown menu. Now, you'll notice that as soon as I do that, I see this little red line show up over here indicating that this form element is required.

I just wanted to point out that that's CSS that I've written. Form elements are automatically going to get that little red line on the right-hand side. I just wrote that CSS to let me know when that attribute has been applied and when it hasn't. I want to go down to the next element, which is Email. Now, in addition to using say placeholder or required attributes here, I want to actually change the type of input element that this is. So the first thing I am going to do is just set placeholder, just like we did before, and I am going to type in 'valid email address', and hit Enter. And once again, I am going to make that required by choosing Yes.

But I also want to come up to this General category, and for type, I am going to change that from text--once again grabbing the pulldown menu--to email. So this is a new HTML5 input type. And what email is going to allow us to do in supported devices, like mobile devices for example, when you click on this text field, you might see the keyboard change. For example, the @ symbol might come up because it knows this form element requires an email address. So we're just going to keep going. I am going to go down to the Phone one, and here I am going to change its type from text to tel, which is telephone.

Once again, I am going to go down to Uncategorized and I am going to change its placeholder to 'optional phone number'. Obviously, because it's optional, we're not going to make it required, so we're just going to leave that blank. And then finally for Address, I am going to grab that and change required to Yes. So these HTML5 attributes are available to us right in the Tag Inspector. We can also take advantage of them in other ways as well. For example, if I grabbed Zip Code and did Ctrl+T on the PC, and Command+T on the Mac, I get the Quick Tag Editor.

If I wanted to set a required value there, notice that my code hinting is available to me right here using the Quick Tag Editor. I'll just type in 'req'. There is required. I hit Enter. And I can either give this a value, or actually, one of the things that you can do is simply not pass a value. Just the presence of the required attribute assumes it's true, and now we notice that that's being listed as required as well. Now, I am going to go ahead and save this file, and I am going to switch over to Live view and scroll down to see the form.

And we can see not only our required form elements, but we can also see the placeholder data that we put in as well. So there you have it. Whether you're a fan of hand coding or a fan of using these Dreamweaver aids like the Tag Inspector or the Quick Tag Editor, Dreamweaver's HTML5 support is going to make it a lot easier, no matter where you're working in Dreamweaver, to create and structure your HTML5 content.

Show transcript

This video is part of

Image for Dreamweaver CS5.5 New Features
Dreamweaver CS5.5 New Features

18 video lessons · 12671 viewers

James Williamson
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 Dreamweaver CS5.5 New Features.

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.