-
Notifications
You must be signed in to change notification settings - Fork 21
Add 2D matrix dropdown form inputs and typed numeric input fields with units #846
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 2 commits
329b6cc
98ef657
ba03f3e
21b8097
7692625
229745f
1bb24d4
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| --- | ||
| title: I want 2D matrix dropdown form inputs | ||
| date: 2024-01-21T11:00:18.245Z | ||
| submitter: Christoph Paper | ||
| number: 18b2eec2-49ad-410f-be86-c20aaac2dfe9 | ||
| tags: | ||
| - html | ||
| - forms | ||
| discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/656 | ||
| status: discussing | ||
| related: | ||
| - title: HTML select element | ||
| url: https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element | ||
| type: spec | ||
| - title: "EN 13402: Size designation of clothes" | ||
| url: https://www.iso.org/standard/46154.html | ||
| type: note | ||
| --- | ||
|
|
||
| Many products require two-dimensional size or variant selection where both dimensions must be chosen together and most combinations are valid. Clothing is a common example: jeans require a girth and a length, bras require a girth and a cup size, and shoes sometimes require a length and a width (as defined in EN 13402-2). The same pattern applies to many other multi-attribute selections in forms, such as shirt size plus color, date components (day plus month), or typography settings (weight plus style). | ||
|
|
||
| Today, authors must implement this with two separate `<select>` elements and JavaScript to coordinate them, which is error-prone, inaccessible, and verbose. I want a native two-dimensional matrix select element that lets users pick a row and a column value simultaneously, clearly communicating the paired nature of the choice. | ||
|
|
||
| ```html | ||
| <select2d name="size"> | ||
| <option2d row="XS" col="30">XS / 30</option2d> | ||
| <option2d row="XS" col="32">XS / 32</option2d> | ||
| <option2d row="S" col="30">S / 30</option2d> | ||
| <option2d row="S" col="32">S / 32</option2d> | ||
| <option2d row="M" col="32">M / 32</option2d> | ||
| <option2d row="M" col="34">M / 34</option2d> | ||
| </select2d> | ||
aarongustafson marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| ``` | ||
|
|
||
| The submitted value could be the concatenation of both axes (e.g., `XS/30`) or a structured pair, while the UI would render as a matrix or grid so the user can clearly see which combinations are available. Unavailable combinations could be disabled or hidden. This would benefit accessibility by making the relationship between the two dimensions explicit to assistive technologies, and reduce the amount of JavaScript needed for common e-commerce and data-entry scenarios. | ||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,39 @@ | ||||||
| --- | ||||||
| title: I want typed numeric input fields with units | ||||||
aarongustafson marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| date: 2024-01-21T11:00:18.245Z | ||||||
| submitter: Christoph Paper | ||||||
aarongustafson marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
| number: bd9677b9-2a64-4f48-ab7f-4e581e7557ff | ||||||
| tags: | ||||||
| - html | ||||||
| - forms | ||||||
| discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/656 | ||||||
| status: discussing | ||||||
| related: | ||||||
| - title: I want browsers to localize data like dates and numbers | ||||||
| url: https://webwewant.fyi/wants/59/ | ||||||
| type: discussion | ||||||
aarongustafson marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
| - title: "WHATWG: input element - number state" | ||||||
| url: https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number) | ||||||
| type: spec | ||||||
| - title: CSS Values and Units Module | ||||||
| url: https://www.w3.org/TR/css-values/ | ||||||
| type: spec | ||||||
| --- | ||||||
|
|
||||||
| I want a native HTML input type that accepts a numeric value together with a unit, and automatically converts the entered value to a canonical unit for form submission. Currently, `<input type="number">` accepts only a bare number with no unit awareness, forcing authors to either use a separate unit selector or restrict users to a single unit system. | ||||||
aarongustafson marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
|
||||||
| A dedicated `amount` input type would let users enter values in their preferred units — metric or imperial, for example — while the browser handles conversion and normalization transparently: | ||||||
|
|
||||||
| ```html | ||||||
| <input type="amount" value="10 kg" step="0.1 lb"> | ||||||
| <input type="amount" value="5 ft 10 in" step="1 cm"> | ||||||
| ``` | ||||||
|
|
||||||
| The browser would parse the unit attached to `value` and `step`, allow the user to type in any compatible unit (e.g., pounds when the canonical unit is kilograms), and submit the value in the canonical form. Compound measurements like `5 ft 10 in` should also be supported for height, distance, and similar fields. | ||||||
|
||||||
| The browser would parse the unit attached to `value` and `step`, allow the user to type in any compatible unit (e.g., pounds when the canonical unit is kilograms), and submit the value in the canonical form. Compound measurements like `5 ft 10 in` should also be supported for height, distance, and similar fields. | |
| The browser would parse the unit attached to `value` and `step`, allow the user to type in any compatible unit (e.g., pounds when the canonical unit is kilograms), and submit the value in the canonical form. Authors should declare that canonical submission unit with a dedicated attribute such as `unit="kg"` or `unit="cm"`; `value` may use any compatible unit as an initial value, and `step` defines only the stepping granularity in its own unit rather than implicitly choosing the submission unit. If `value` is omitted, the control should still use the declared `unit` as the canonical unit for parsing, validation, and form submission. Compound measurements like `5 ft 10 in` should also be supported for height, distance, and similar fields. |
Uh oh!
There was an error while loading. Please reload this page.