About This Course

Coding a form correctly on your websites is extremely important because forms typically fulfill a call to action- we ask the users to sign up for a newsletter, email with questions, purchase a product, register for services, and so much more. Forms that are coded incorrectly or that use outdated standards often result in a loss of usability, which in turn can lead to fewer sales, contacts, or any of the other actions we ask our users to perform.

In this course you will begin with a form that’s not written in HTML5 or according to standards, and you'll rework it to bring it up to HTML5 standards, including some layout tips for making the form work on mobile devices.

Course Outline

• Chapter 1: Lesson Intro

  In this chapter you will learn what to expect from the course and some of the reasons it’s important to build your forms right.

• Chapter 2: Setting Up the Project Files

  In this chapter you will walk through the process of using the lesson files on CodePen. Additionally you will review the HTML structure of the page you will be working with throughout the course.

• Chapter 3: Coding for Standards

  In this chapter you will begin to replace some of the existing tags of a form in order to make it more standards compliant. Specifically you will be working with label tags and the fieldset tag which have the additional benefit of improving the accessibility of your form.

• Chapter 4: New Input Types

  In this chapter you’ll take a tour of some of the new input types available for web forms including email, tel, number, and range. You’ll learn about the use of placeholder text and autofocus and see how all these features work on mobile as well as desktop.

• Chapter 5: Working with the Datalist

  In this chapter you will dive into the datalist element which will create an “autocomplete” feature for users interacting with your form.

• Chapter 6: Form Layout

  In this chapter you will work with CSS media queries in order to design a form that is optimized for smaller devices such as mobile phones as well as for the more “traditional” desktop layouts.

• Chapter 7: Backwards Compatibility

  In this chapter you will learn how to find the level of browser support for the various HTML5 form elements you have added to your page. Additionally you will learn strategies for ensuring that your forms will still work on older browsers.

Prerequisites

• For best results you should have coded an HTML form before and be familiar with some of the basic constructs, such as input boxes, textareas, radio buttons, checkboxes, dropdown lists, validation of forms, and submitting forms to the server.

Software Requirements

• Mac or Windows desktop or laptop
• This lesson uses CodePen for the lesson files. A (free) CodePen account is recommended although not required.