Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this chapter we will discuss creating standards compliant forms. We will explore properly structuring your forms; controlling layout with CSS and using Dreamweaver's form accessibility tools. Any discussion of the correct formatting of form should start with the fieldset tag. The fieldset element allows you to group semantically related form elements. Grouping these controls makes it easier for users to understand their purpose while assisting and styling the form for browsers and also greatly assist in speech navigation for screen readers. So simply put the fieldset element and the related legend tag to make your forms more accessible.
Now our companion to the fieldset tag is the legend tag. The legend element allows authors to assign a caption to the fieldset and this improves accessibility for our fieldsets and can add more styling options visually. In this exercise, we will have a brief overview of our forms and we will identify unique semantic areas where we can use the fieldset and legend tags to give our forms proper structure. So I am in the Chapter 4, Exercise Files. If you are following along with the Exercise Files, go ahead and copy those files to your desktop and then find them as a site. And you can see that I have the contact.htm file open. So you are going to want to open that one up; this is our starting point.
Now I am just going to go ahead and preview this our browser. So we already have a form on the page and as I scroll down, I can see that the form, well, there is not a lot to it. It's a fairly simple form, but it's going to allow us to do all the things that you are going to want to do in your more complex forms. We've got an area for somebody to insert their name; we've got a few checkboxes for information about the following art types, a place for Additional Comment and then a request for specific artist information. So as I am looking at this, the top of it where you are passing along your name and any additional personal information that we think the form needs to have asking for information about general art types and then the additional comments, this seems to all logical grouped together whereas at the bottom of the form where it's asking for a specific artist information that could be another area of content. So we've identified two areas in our form that can be identified with fieldset tags.
So I am going to close Firefox and go back into Dreamweaver and we will begin working on our form. Now since we are going to be wrapping tags on our existing form elements, I prefer to do that in Code View. Again the reason that I prefer to do that in Code View is I just don't want to partially select an element and then wrap something around it, because that can really mess up your Source Code. So I am going to scroll down until I find my form and we can find that on line number 33. I am going to start at the top paragraph where the Name input is and I am going to scroll all the way down until I find the paragraph for I would like information about the following artist. And I am going to stop before I highlight that.
So the last thing that I've highlighted is a line break that has the class clear applied to it. We are going to stay right here. I used the Quick Tag Editor. Remember Dreamweaver makes that really easy for us to bring out by doing our hot key of Ctrl+T or Command +T, and I am going to wrap this in a fieldset tag. So if you just type in fi code here, you are going to jump down to fieldset. And we are going to pass an id value into the fieldset as well. So our first id is going to be personalinfo all one word. So personalinfo and in addition to wrapping with a fieldset, you can also pass along an id attribute that's going to add further identification to that particular fieldset. So I will hit Enter and after you create a fieldset, it's a good idea to go ahead and establish a legend tag.
Now the legend element comes directly after a fieldset tag. So we are just going to hand-code this. So I go back up to about line 35 where a fieldset tag has been added and I am just going to enter a new line of code and I am going to do a legend tag. And the legend tag has text between the opening and closing tags that really serves as a label for the fieldset. But before we actually enter our visual label. We are going to go ahead and assign a class id to this legend as well. So I am going to give it a class and I am going call this one perlegend, again all one word. And these are actually classes that we will use later on when we are writing our cascading style sheets to control our forms. So we are just giving ourselves some stylistic looks here as well as passing along some information.
Now inside the legend tag, I am going to type in personal information. And I you may have noticed that I am doing it in all lowercase. That's just a stylistic choice at this point and then I am going to close the legend tag. Now we are not quite done yet. We still have one fieldset to go. So let's scroll down a little bit and we want to find the area down here that says I would like information about the following artist. So I am going to start right there, it's just below our first fieldset tag. So I will scroll down and we are going to go all the way down to the closing P tag. Now make sure you don't include the closing form tag, because obviously that would put our fieldset both inside and outside the form. Not a good idea.
Once again we will use the shortcut key. So Command+T or Ctrl+T and we will go ahead and wrap this one and the fieldset as well and the id for this one is going to be artistinfo. So all one word, artistinfo. We will go ahead and hit Enter; that will wrap the content in the tag and we will go ahead and include a legend tag for this one too. So go ahead in on a line below that, type in a legend tag. This one is going to have a class of artlegened assigned to it.
Artlegend and then inside the opening and closing legend tags, type in artist information. Again, I am going to use all lowercase, just stylistic choice and then don't forget to close your legend tag. So let's save our form, and I am just going to switch back over to the Design View and you will see what we have done here. Now you can see that personal information now appears above name and if I scroll down artist information appears above, I would like information about the following artist. Let's preview what that looks like in the browser. And as we scroll down we can see the default browser behavior when dealing with the fieldsets and legends.
So the default behavior is to actually wrap an outline around the fieldset area and to position the legend at the top left-hand corner. Now the faint gray line that you are seeing around it is a style that I have already written for the form. So that's not part of this behavior. If that line wasn't there, you would just see the lines around the fieldset. So visually the browser has already grouped these together. Screen readers or other types of accessibility devices would instinctively know that all of these elements are related to each other. So by adding proper structure to our forms, we can assure that our forms are accessible and Standards Compliant.
In our next exercise, we will examine Dreamweaver's form accessibility tools and the proper use of the Label tag.
Get unlimited access to all courses for just $25/month.Become a member