illustration for Accessible Cross-Browser CSS Form Styling

Accessible Cross-Browser CSS Form Styling

1h 52m closed-captioning
18 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
people completed
Published 3 years ago
Updated 3 years ago

Forms are one of the most common features of a web application. They are also a common cause of headaches. The controls you use, the markup for the structural layout, and the styling all have to be considered.

What you build can look and behave differently depending on the browser being used, and how you build it can impact the accessibility of your application.

Stephanie Eckles has prepared several lessons that work through the creation of a complete form demo featuring the most common controls with a variety of attributes.

You'll create semantic fieldsets, add responsive styles without media queries, and prepare styles for accessible validation.

The demo is built with Sass and Eleventy. Don't worry if you don't have prior experience with these tools— Stephanie's code and explanations make it easy to follow along, and additional resources are available if you need them.

This course is new and up to date — if you are looking to build a form for your website, you should start here.

What you'll learn:

  • Structural layout of form elements
  • Group fields into a fieldset
  • Adjust behavior based on viewport size
  • Style radio and checkbox elements

Questions to Think About:

  • What do native controls offer? Am I using the best choice?
  • Is my form accessible?
  • How should I balance the tradeoffs between functionality and accessibility?

Course Content

1h 52m • 18 lessons

    You might also like these resources:

    illustration for CSS Selectors in Depth
    Garth Braithwaite・34m・Course

    Cascading style sheet (CSS) selectors are the glue that connects styling to HTML content. Understanding how they work enables a developer to write more semantic markup and keeps styling modular for better project maintenance.

    illustration for CSS Fundamentals
    Tyler Clark・33m・Course

    Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, we will slowly style a website according to a mocked image.

    illustration for Build Complex Layouts with CSS Grid Layout
    Rory Smith・30m・Course

    CSS Grid layout is a two-dimensional layout method that gives you control over items in rows as well as columns. In this course we will look at multiple ways to divide the page into major regions with control of the size, position, and layer.