Structuring and Organizing HTML5 Forms

Aquent Gymnasium
Online

Free

Important information

  • Course
  • Online
  • When:
    Flexible
Description

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.

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.

Important information

Requirements: 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.

Venues

Where and when

Starts Location
Flexible
Online

What you'll learn on the course

HTML
Layout
HTML layout
HTML5
Coding
Mobile
Code
Project Files
Backwards Compatibility
Desktop

Course programme

  • 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.

Additional information

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.