Thinking on ways to solve PICKLISTS

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=d2O-8n-UnrI


Category:
Tutorial
Duration: 19:32
9,738 views
0

In today's GUI Challenge, @AdamArgyleInk shows how to leverage checkbox and radio groups for highly functional and beautiful picking experiences. Learn about implicit vs explicit label and input relationships, fieldset and legends, focus management, and more.

Chapters:
0:00 - Introduction
0:40 - Why picklists
2:57 - Fieldset
4:45 - Implicit vs Explicit input relationships
6:08 - Name attribute
6:50 - Keyboard interactions
8:53 - Taglist markup
11:10 - FormData().getAll()
12:35 - Debugging corner
15:23 - Accessibility Tree Tool
18:42 - Outro

Resources:
Source → https://goo.gle/46hcYhS
Demo → https://goo.gle/40GSldL

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

#GUIchallenges #ChromeForDevelopers



Other Videos By Chrome for Developers


2023-11-17Noise Lab: Bucket size
2023-11-17Noise Lab: Default setup, simple mode
2023-11-17Noise Lab: UI quick tour
2023-11-17Noise Lab: Noise metrics
2023-11-17Noise Lab: Introduction
2023-11-17Noise Lab: Noise overview
2023-11-17Noise Lab: Summary reports
2023-11-17Noise Lab: Attribution Reporting API overview
2023-11-17Noise Lab: Deep dive intro
2023-11-16Privacy Sandbox: Unlocking the potential of a more private internet
2023-11-15Thinking on ways to solve PICKLISTS
2023-11-15Why isn't my element stuck where I wanted it to stick?
2023-11-14Protected Audience API ad size macros
2023-11-09What are chrome: URLs?
2023-11-06Values, invalid custom, and more!
2023-11-02ChromeOS Flex: Modernize legacy devices with Chrome
2023-11-01Lightening and darkening color - GUI Snippets
2023-10-31New in Chrome 119: cookies expiration limit updated, CSS updates, & fenced frames improvements!
2023-10-26Why isn't my custom property the value I expect?
2023-10-26Scripting and prefers-reduced-transparency
2023-10-26HTML vs DOM? Let’s debug them


Tags:
Chrome
Developers
Google
Web
Thinking on ways to solve picklists
picklists
what are picklists
how to use picklists
picklists tutorial
gui challenges
css
css tutorial
how to use css
what is css
intro to css
introduction to css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
chrome latest
chrome updates
chrome for developers
Adam Argyle