Add input features (#2044)

Co-authored-by: Pete LePage <petele@google.com>
Co-authored-by: Daniel D. Beck <daniel@ddbeck.com>

features/input-button.yml

@@ -0,0 +1,8 @@
+name: '<input type="button">'
+description: The `<input type="button">` HTML element represents a button with programmable behavior, and which is inert by default.
+spec: https://html.spec.whatwg.org/multipage/input.html#button-state-(type=button)
+group:
+  - forms
+  - html-elements
+compat_features:
+  - html.elements.input.type_button

features/input-button.yml.dist

@@ -0,0 +1,17 @@
+# Generated from: input-button.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2015-07-29
+  baseline_high_date: 2018-01-29
+  support:
+    chrome: "1"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "1"
+    firefox_android: "4"
+    safari: "1"
+    safari_ios: "1"
+compat_features:
+  - html.elements.input.type_button

features/input-checkbox.yml

@@ -0,0 +1,10 @@
+name: '<input type="checkbox">'
+description: The `<input type="checkbox">` HTML element represents a checkable box.
+spec: https://html.spec.whatwg.org/multipage/input.html#checkbox-state-(type=checkbox)
+group:
+  - forms
+  - html-elements
+compat_features:
+  - api.HTMLInputElement.defaultChecked
+  - api.HTMLInputElement.indeterminate
+  - html.elements.input.type_checkbox

features/input-checkbox.yml.dist

@@ -0,0 +1,43 @@
+# Generated from: input-checkbox.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2015-07-29
+  baseline_high_date: 2018-01-29
+  support:
+    chrome: "1"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "3.6"
+    firefox_android: "4"
+    safari: "3"
+    safari_ios: "1"
+compat_features:
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "1"
+  #   firefox_android: "4"
+  #   safari: "1"
+  #   safari_ios: "1"
+  - api.HTMLInputElement.defaultChecked
+  - html.elements.input.type_checkbox
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "3.6"
+  #   firefox_android: "4"
+  #   safari: "3"
+  #   safari_ios: "1"
+  - api.HTMLInputElement.indeterminate

features/input-color.yml

@@ -0,0 +1,9 @@
+name: '<input type="color">'
+description: The `<input type="color">` HTML element displays a color picker, from which users can choose a color.
+spec: https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)
+group:
+  - forms
+  - html-elements
+caniuse: input-color
+compat_features:
+  - html.elements.input.type_color

features/input-color.yml.dist

@@ -0,0 +1,14 @@
+# Generated from: input-color.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: false
+  support:
+    chrome: "20"
+    chrome_android: "25"
+    edge: "14"
+    firefox: "29"
+    safari: "12.1"
+    safari_ios: "12.2"
+compat_features:
+  - html.elements.input.type_color

features/input-date-time.yml

@@ -0,0 +1,16 @@
+name: Date and time <input> types
+description: The `<input type="date">` and `<input type="time">` HTML elements represent date and time pickers in a form.
+spec: https://html.spec.whatwg.org/multipage/input.html#date-state-(type=date)
+group:
+  - forms
+  - html-elements
+status:
+  compute_from: html.elements.input.type_date
+caniuse: input-datetime
+compat_features:
+  - api.HTMLInputElement.valueAsDate
+  - html.elements.input.type_date
+  - html.elements.input.type_datetime-local
+  - html.elements.input.type_month
+  - html.elements.input.type_time
+  - html.elements.input.type_week

features/input-date-time.yml.dist

@@ -0,0 +1,73 @@
+# Generated from: input-date-time.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2021-04-26
+  baseline_high_date: 2023-10-26
+  support:
+    chrome: "20"
+    chrome_android: "25"
+    edge: "12"
+    firefox: "57"
+    firefox_android: "57"
+    safari: "14.1"
+    safari_ios: "5"
+compat_features:
+  # baseline: high
+  # baseline_low_date: 2017-11-28
+  # baseline_high_date: 2020-05-28
+  # support:
+  #   chrome: "5"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "57"
+  #   firefox_android: "57"
+  #   safari: "5"
+  #   safari_ios: "4"
+  - api.HTMLInputElement.valueAsDate
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2021-04-26
+  # baseline_high_date: 2023-10-26
+  # support:
+  #   chrome: "20"
+  #   chrome_android: "25"
+  #   edge: "12"
+  #   firefox: "57"
+  #   firefox_android: "57"
+  #   safari: "14.1"
+  #   safari_ios: "5"
+  - html.elements.input.type_date
+  - html.elements.input.type_time
+
+  # baseline: high
+  # baseline_low_date: 2021-10-05
+  # baseline_high_date: 2024-04-05
+  # support:
+  #   chrome: "20"
+  #   chrome_android: "25"
+  #   edge: "12"
+  #   firefox: "93"
+  #   firefox_android: "93"
+  #   safari: "14.1"
+  #   safari_ios: "5"
+  - html.elements.input.type_datetime-local
+
+  # baseline: false
+  # support:
+  #   chrome: "20"
+  #   chrome_android: "25"
+  #   edge: "12"
+  #   firefox_android: "18"
+  #   safari_ios: ≤11.3
+  - html.elements.input.type_month
+
+  # baseline: false
+  # support:
+  #   chrome: "20"
+  #   chrome_android: "25"
+  #   edge: "12"
+  #   firefox_android: "18"
+  - html.elements.input.type_week

features/input-email-tel-url.yml

@@ -0,0 +1,14 @@
+name: Email, telephone, and URL <input> types
+description: The `<input type="email">`, `<input type="tel">`, and `<input type="url">` HTML elements represent email address, telephone number, and URL fields in a form.
+spec:
+  - https://html.spec.whatwg.org/multipage/input.html#email-state-(type=email)
+  - https://html.spec.whatwg.org/multipage/input.html#telephone-state-(type=tel)
+  - https://html.spec.whatwg.org/multipage/input.html#url-state-(type=url)
+group:
+  - forms
+  - html-elements
+caniuse: input-email-tel-url
+compat_features:
+  - html.elements.input.type_email
+  - html.elements.input.type_tel
+  - html.elements.input.type_url

features/input-email-tel-url.yml.dist

@@ -0,0 +1,54 @@
+# Generated from: input-email-tel-url.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2015-07-29
+  baseline_high_date: 2018-01-29
+  support:
+    chrome: "5"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "4"
+    firefox_android: "4"
+    safari: "5"
+    safari_ios: "3"
+compat_features:
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "1"
+  #   firefox_android: "4"
+  #   safari: "1"
+  #   safari_ios: "1"
+  - html.elements.input.type_url
+
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "3"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "4"
+  #   firefox_android: "4"
+  #   safari: "4"
+  #   safari_ios: "3"
+  - html.elements.input.type_tel
+
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "5"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "1"
+  #   firefox_android: "4"
+  #   safari: "5"
+  #   safari_ios: "3"
+  - html.elements.input.type_email

features/input-file.yml

@@ -0,0 +1,9 @@
+name: '<input type="file">'
+description: The `<input type="file">` HTML element represents a field used to upload a file.
+spec: https://html.spec.whatwg.org/multipage/input.html#file-upload-state-(type=file)
+group:
+  - forms
+  - html-elements
+compat_features:
+  - api.HTMLInputElement.files
+  - html.elements.input.type_file

features/input-file.yml.dist

@@ -0,0 +1,42 @@
+# Generated from: input-file.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2015-07-29
+  baseline_high_date: 2018-01-29
+  support:
+    chrome: "2"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "3"
+    firefox_android: "4"
+    safari: "4"
+    safari_ios: "3"
+compat_features:
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "1"
+  #   firefox_android: "4"
+  #   safari: "1"
+  #   safari_ios: "1"
+  - html.elements.input.type_file
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "2"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "3"
+  #   firefox_android: "4"
+  #   safari: "4"
+  #   safari_ios: "3"
+  - api.HTMLInputElement.files

features/input-hidden.yml

@@ -0,0 +1,8 @@
+name: '<input type="hidden">'
+description: The `<input type="hidden">` HTML element represents a form field that is not displayed visually on the page.
+spec: https://html.spec.whatwg.org/multipage/input.html#hidden-state-(type=hidden)
+group:
+  - forms
+  - html-elements
+compat_features:
+  - html.elements.input.type_hidden

features/input-hidden.yml.dist

@@ -0,0 +1,17 @@
+# Generated from: input-hidden.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2015-07-29
+  baseline_high_date: 2018-01-29
+  support:
+    chrome: "1"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "1"
+    firefox_android: "4"
+    safari: "1"
+    safari_ios: "1"
+compat_features:
+  - html.elements.input.type_hidden

features/input-image.yml

@@ -0,0 +1,9 @@
+name: '<input type="image">'
+description: The `<input type="image">` HTML element represents an image which can be used to submit a form.
+spec: https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image)
+group:
+  - forms
+  - html-elements
+compat_features:
+  - api.HTMLInputElement.src
+  - html.elements.input.type_image

features/input-image.yml.dist

@@ -0,0 +1,18 @@
+# Generated from: input-image.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2015-07-29
+  baseline_high_date: 2018-01-29
+  support:
+    chrome: "1"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "1"
+    firefox_android: "4"
+    safari: "1"
+    safari_ios: "1"
+compat_features:
+  - api.HTMLInputElement.src
+  - html.elements.input.type_image

features/input-number.yml

@@ -0,0 +1,20 @@
+name: '<input type="number">'
+description: The `<input type="number">` HTML element restricts input in the field to numeric data.
+spec: https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)
+group:
+  - forms
+  - html-elements
+caniuse: input-number
+status:
+  compute_from: html.elements.input.type_number
+compat_features:
+  - api.HTMLInputElement.valueAsNumber
+  - api.HTMLInputElement.max
+  - api.HTMLInputElement.min
+  - api.HTMLInputElement.step
+  - api.HTMLInputElement.stepDown
+  - api.HTMLInputElement.stepUp
+  - html.elements.input.max
+  - html.elements.input.min
+  - html.elements.input.step
+  - html.elements.input.type_number