Structuring and Organizing HTML5 Forms will teach you some of the latest standards and thinking around coding HTML forms using the new HTML5 tags and attributes. You'll learn how to make these forms mobile- and desktop-compatible as well.
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.
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
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
datalistelement 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.
- 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.
- Mac or Windows desktop or laptop
- This lesson uses CodePen for the lesson files. A (free) CodePen account is recommended although not required.