Description
Course info
Rating
(18)
Level
Beginner
Updated
May 31, 2018
Duration
1h 10m
Description

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.

About the author
About the author

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.

More from the author
Hands-on Responsive Web Design 4: Navigation
Intermediate
1h 36m
22 Jan 2018
More courses by Paul Cheney
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello. My name is Paul Cheney. I am concerned about the pain that web developers cause the public when they design bad web forms. It's frustrating to customers, negatively impacts your company credibility, and it can affect your bottom line. I cannot overstate the importance of really good web form design. In this course, Best Practices for Responsive Web Forms, we will review 24 topics in 7 different areas. As we examine each one, we will look at bad and corrected examples. As a result, you should be acutely aware of poorly designed forms when you see one, and more importantly, you should know what needs to happen to improve the user experience. Next, we will work together to build a simple form that follows these 24 best practices. Then we'll build a longer form with many different kinds of inputs. These additional inputs require different CSS to make them work properly. In both of these examples, we will use the new browser form validation and CSS to identify errors. Finally, we will build a form that relies on vanilla JavaScript for validation and feedback messages. We will compare both validation methods so that you can make an informed decision as to which one you should use. Please join me as we explore these best practices for building web forms. And together, we'll make the web a better place.

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.