Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we start creating our own form, we'll take a look at the finished file to discuss the structure and functionality of our final form. Just as with any design, the success and failure of our form will rely largely on our attention to the small details. Designing for the web means focusing on interface design and usability. Nowhere is this more evident than with forms. A poorly designed form creates a negative user experience and may prevent users from further using or exploring your site. A good form design creates a seamless user experience and provides enough feedback to keep the user moving forward, which is exactly what we want them to do.
As with the other elements in your site, accessibility is important. Designing your forms with accessibility in mind is a very good practice. So here in our browser, I have our finished form open. I'm going to scroll down. We're just going to take a second to examine our form and what we're going to be building. Now, this is a form that's gong to allow people who are using the Explore California web site to join their community, the Explorers. So there is certain information that we need from these users before they can join the user community. You'll notice that the form is actually split up into three sections.
We have Personal Information, Login Information, and then a Tour Profile. It's going to help us sort of match people together and make sure that we are catering to their specific interests. Now, because of the fact that we have these three distinct areas, notice that visually we've separated them, and made it very easy for someone to progress from one area of the form to another. Our form has been designed with accessibility in mind as well, allowing users to tab through the form in the order they encounter the form elements, which is a very, very nice practice. We've also added a little bit of client side validation as well.
Notice for example that if I come down under the Password section and start entering a password, I get some immediate feedback from the form that says that needs to be at least six characters. So we have some client side form validation here that Dreamweaver makes surprisingly easy to incorporate into your forms. Also notice that we have some fairly non-standard form layout going on here. We've got three columns worth of checkboxes on which tours they want to follow. We have consistent widths for our labels and our text input fields.
So we'll kind of concentrate on styling our form in a way that gives us a nice, visually appealing layout. Okay, so now that we know the structure and theory behind our form design, we're going to begin building it. When planning your form design, you'll need to consider how the form should be structured to collect the data, what obstacles users might encounter along the way, and what visual styling and interactivity you can use to guide them and instruct them along each step of the form. You'll also need to know which form elements are used to collect certain types of data, so that you'll use the right ones given the situation.
Giving somebody a radio button group, which only allows one choice, for a question that should allow for multiple choices is a bad idea. By considering carefully all of the goals and the usability issues of your form before you begin working on it, you're going to create a functional, effortless form that enhances the usability of your site.
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.
Your file was successfully uploaded.