Accessible Cross-Browser CSS Form Styling
|
Learn how to build accessible and cross-browser forms for your web application. Stephanie Eckles guides you through creating semantic HTML and stylish CSS styles, ensuring your forms are user-friendly and visually appealing. Start building your form today!
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.
Course Content
Course Introduction: Accessible Cross-Browser Form Field CSS Styles
Initialize the Form Design System Setup with Sass and CSS Variables
Create Semantic, Accessible HTML for Text Form Inputs
Create the `form-group` Component Styles
Create Semantic, Accessible HTML for Form Selects
Create Semantic, Accessible HTML for Radio Buttons and Checkboxes
Create Reset Styles to Normalize Form Fields Cross-Browser
Use Sass Mixins to Style Inputs with Accessible Contrast and Keyboard Access
Create Custom Form Select and Multi-select CSS Styles
Create Custom Select CSS Styles for Focus and Disabled States
Create A Layout Structure with CSS Grid For Radio Buttons and Checkboxes
Create Custom Radio Button CSS Styles
Create Custom Checkbox CSS Styles with SVG
Create Custom Radio Button and Checkbox CSS Styles for Focus and Disabled States
Create Custom CSS Styles for Form Submit Buttons
Define Semantic Fieldset HTML and Create CSS Styles For Responsive Form Layout
Create and Style an Accessible Field Description
Create Accessible Styles for Invalid Form Fields
User Reviews
Be the first to review “Accessible Cross-Browser CSS Form Styling”
You must be logged in to post a review.
There are no reviews yet.