At the core of web development is a thorough knowledge of designing great web forms. In this course, Best Practices for Responsive Web-forms, you'll learn how to design and build attractive web forms that follow industry best practices. First, you'll learn about 24 best practices for making web forms while looking at good and bad examples. Next, you'll explore building a simple login form that follows these best practices. Finally, you'll discover how to construct a longer form with many different kinds of form inputs and how to style them correctly. When you're finished with this course, you'll have a foundational knowledge of web form creation and a critical eye for spotting poorly designed forms. This knowledge will help you as you move forward to make the web a better place by designing easy to use forms that encourage form completion.
Paul Cheney is a professor of Web Design and Development at Utah Valley University, where he teaches Responsive Design. He also owns his own web design company, which allows him to keep current in the field and share the latest technology with his students.
Long Web Form Now that we're done with the short form, let's build a longer one with more input types. In this module, we will start by looking at the start file you should download so you can work along with me. Then, we'll build the HTML and CSS together. Finally, we will evaluate our form against our best practices to see how we do. Please get a copy of the start folder from the demos for this unit. Since we covered a lot of the HTML and CSS in the last module, we'll begin with a file that's about half way completed. This is what it currently looks like. We have four inputs of type=text, which is the most common. We also have type=tel for the telephone number. We have an input with the type of email for an address. All of these we covered in the previous module. New to this start file is type=url, which we'll use for a website. We also have type=date used three different times. There's also type=time. And finally, a type= to a number. When we use type=url, we get a keyboard on our mobile device that shows a forward slash and a. com key. Using type=date shows this date picker on my phone. Using type=time shows an hour, minute, and AM/PM selector. Finally, using type=number shows a pneumatic keyboard by default. Other than these changes, everything else is identical to what we've already covered.