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 largely rely on the attention to the small details. Designing for the web means focusing on interface design and usability and 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.
As with other elements in your site, accessibility is important and designing your forms with accessibility in mind is always a good practice. So, I have our Information Request form that we're going to be building for the Roux Academy. I'll open in a browser and if I scroll down into the form, I notice a few things right off the bat. Number 1, the form is designed to match the style of our site, but it still retains enough of the common user interfaces that people are used to seeing with forms to let people know what it is and what it intends to collect. You'll notice that we have labels above all of our form elements and if we click into one of our form elements, we get some immediate feedback and that is the area that we're focused on.
We also have the ability to tab through the form which is awesome for accessibility sake, so as I begin to fill the form out, I can go from one field to the other. We have a drop-down menu to help us select items and we're also going to build a list that allows us to select multiple items. We'll experiment with checkboxes, radio buttons and giving our users the ability to Add Comments to us. Finally, we'll add a button to our form which when clicked will trigger Form Submittal. Now I want to take just a moment to look at this page in Dreamweaver and flip over to the Code View, so that you can see how the form is being structured.
If I scroll down, I can see at the very top of my form, I've a form tag and that form tag is going to surround the entire form itself. The form tag is going to have a name for the form a method of how the form data should be posted and an action that tell it where to send the data. From there, we're using fieldsets to separate the form into logical groupings. You may have noticed from the form itself that we had a Personal Information area and then we had an area that focused on the Areas of study that the prospective student might be interested in. Now as I scroll through this form, you can see that actually the form elements themselves are inside of an unordered list.
Lists are a really nice way to structure your form in terms of grouping form elements together and making sure that other user agents know that these elements are related to each other. So we're going to make a use of a list to add little bit of additional structure to our forms. You may also notice that all of the inputs which are the form elements themselves are typically tied into a label, so that the text that's above or below them is not a paragraph, it's actually found within a label tag, and the label relates to the input itself. Again, this is for other user agents that need to read the form and understand which text refers to which form element, that's especially helpful for screen readers, so that the form can be more accessible.
Now that we know the structure and the theory behind our form design, we're going to begin building it. Now when planning your own form design, you'll need to consider how the form should be structured to collect the data, what obstacles that users might encounter along the way, and what kind of visual styling and interactivity you can use to guide and instruct them as they fill out your form. You'll also need to know which form elements are used to collect certain types of data, so that you will use the right ones for any given situation. Giving somebody a radio button group, which only allows one choice for a question that should allow multiple choices for example, is a bad idea.
By considering carefully all of the goals and usability issues of your form beforehand, 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.