Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Often our forms will have regions that users are required to fill in for submittal. In our form, the Email element is required for the user to request information, and to make sure the user is aware of this, we're going to add a Required notice that will properly for both visual and screen reader agents. Once again, the best place to do this is the code. So I'm going to actually just click in Email and switch over to Code View. That's a quick way of sort of jumping to a specific location, so you can see we're on line 42 here. Now just after Email and before the closing label tag, let's go ahead and add some text. Just type in, Email address is required. Now, this may seem kind of a silly place to put it. Let's save our file and switch back over to Design View and you'll see what I'm talking about.
So in our form, that really doesn't make any sense. It just says Email: Email address is required, and then the form element. Not many people are going to style the forms that way, but let's think about accessibility for a moment. When the screen reader accesses this content, it's first going to read the label and then it's going to read the text input. Then if we had a required method that comes after that, we're not giving those users the feedback until after they've already experienced the element, and that's the wrong way to go about that. So remember, visually, we can control things through Cascading Style Sheet, so even though the content comes prior to the text element, it doesn't have to display that way visually.
So let's go ahead and highlight our Email address is required and we're going to wrap this in a span tag and give it a class name and that's going to give us all the styling hook that's required for us to actually get this to work. So even though we're in Design View, our shortcut key, Command key or Ctrl key still works. So we don't have to be in Code View for that to work. So the Wrap tag dialog box comes up and I'm going to choose the span tag and we'll go ahead and assign it a class of feedback. So now it's wrapped in our span tag. Now browsers and user agents don't render span tags also; it's purely for CSS purposes. So save your file and let's switch over to our contact_secondary.css and let's make a little magic happen here with our form feedback.
Below the last style that we added, let's go ahead and get on the next line and again, I'm going to add a single line comment here and I'm going to type in, style feedback message. Notice again that lets us now that we're styling this. So type in label.feedback. Now, we could probably get away with just doing the feedback class styles, but I'm adding the label part of the descendant selector to give it just that one-degree higher specificity, just in case it's conflicting with anything else. So let's open that up and let's type in position and set a position of absolute.
So we're going to be moving this around using absolute positioning. Now in a rule earlier, we actually gave our paragraph tags relative positioning. If you're not familiar with doing a lot of CSS layout, the reason that you would put a positioning attribute of relative on a parent tag is so that absolute users get as a reference point and not the screen itself. So we'll go down to the next line and we'll type in a margin-left and we'll do a margin-left of 6em, and that's just going to push it a little bit to the left. We would go ahead and give it a position to the left as well of 220 pixels.
So that's going to move over to the left 220 pixels. We're going to give it a font-weight of bold, so it's a pretty important message so we want people to really pay attention to it, so we're going to make that bold. For color, we're going to go ahead and choose #760000. That's sort of a burgundy color. Below that, we'll do a padding attribute and we're going to give that a value of 0 for the top, 0 for the right, 5 pixels for the bottom and 20 pixels for the left.
Now, the reason we're going to give it a 20 pixel left padding is because we're about to apply a background graphic to this and the background graphic needs room to display without the text displaying on top of it. So let's go ahead and do a background and we'll pass in a URL and once again, all we have to do is type in u and then we can hit Enter to browse for that file. So I really love Dreamweaver's code hinting capabilities when you're writing your styles this way. We're going to go into the unit 04/ Start Files and we'll click on _images, and enter _images directory, I'm going to scroll down until I find the notice.gif.
So not the note.gif but notice.gif. And you can see the preview of the notice.gif, it's just a little word balloon so we'll go ahead and click Choose. Then I position it using no-repeat and I'll position it at left and top. On the very next line, let's go ahead and do a single line comment inside the rule, there is nothing wrong with doing that. So I'm going to type in /* and I'm just going to type in width for IE. Internet Explorer tends to like specific widths for any elements that are positioned the way we're doing this one.
So rather than have Internet Explorer pass along the wrong width to it and have it break, we'll just go ahead and pass an explicit width. So let's type in width and let's give it 200 pixels worth. It really doesn't matter for other browsers but we'll make it play nice with Internet Explorer as well. So now, let's go over to contact.htm and check out our change. Now, Email address is required is displaying visually to the right. I'll deselect all of that and it's got some nice visual styling to draw user interest. So let's test that in our browser to make sure that that's looking the way we expect it to look.
As I scroll down, I can see that it says Email address is required. Now again, visually, the user has no idea that comes right after the text email and it's really not important, but for screen readers and accessibility purposes, the position of that text is important. So both CSS and proper semantic code go together hand in hand. So our final styling challenge will be to target DOM-compliant browsers to give those users a much richer experience, while still allowing for a functional form in older non-standard-compliant browsers. So we'll tackle that in our next exercise.
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.