Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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.