@funwithforms

Forms are awesome

 Internet
funwithforms.com
Joined August 2016
  • Tweets104
  • Following1
  • Followers113
1Media
Hope :user-valid / :user-invalid github.com/web-platform-test… will make it into Interob 2023

`:user-invalid` & `:user-valid` browser support · Issue #178 · web-platform-tests/interop

Description Quoting the specification: The :user-invalid and the :user-valid pseudo-classes represent an element with incorrect or correct input, respectively, but only after the user has significa...

github.com
2
5
Fun with Forms retweeted
Stefan Judis@stefanjudis23 Sep 2022
With Safari 16 (released Sep 12) `requestSubmit` is now cross-browser supported. 🎉
Support table for request submit showing that all browsers support it.

ALT Support table for request submit showing that all browsers support it.

Stefan Judis@stefanjudis14 Feb 2020
HTMLFormElement.requestSubmit() in a nutshell. 👇 Spec: html.spec.whatwg.org/multipa… MDN: developer.mozilla.org/en-US/… #devsheets Video alt: Form that is not submitting on button click due to failing validations. `submit()` ignores errors and submits – `requestSubmit()` validates first.
6
17
✍️ Stop supporting Internet Explorer! justmarkup.com/notes/2022-07…

Stop supporting Internet Explorer!

Ways to support Internet Explorer.

justmarkup.com
1
2
🔗 Say Hello to `selectmenu`, a Fully Style-able `select` Element css-tricks.com/the-selectmen…
1
4
Always ensure your form can handle different name formats. web.dev/learn/forms/internat…

Internationalization and localization  |  web.dev

Be prepared for international data formats, and learn how to plan your form for localization.

web.dev
This quoted post is unavailable.
Try viewing anyway · View on X
1
4
🔗 Making a custom clear text field button by @scottohara scottohara.me//blog/2022/02/…
1
2
🔗 Issue #14 - Autocapitalization htmhell.dev/tips/autocapital…

Autocapitalization - HTMHell

Control how virtual keyboards capitalize words and characters by default

htmhell.dev
2
Ten years 🎉 justmarkup.com/notes/2022-01…

Ten years 🎉

Reached the milestone of one decade. Ten years ago I published my first article here.

justmarkup.com
2
8
Fun with Forms retweeted
Vadim Makeev@pepelsbey_dev12 Jan 2022
The best way to learn Berlin boroughs is to make a silly demo, right? Well, there you go: new <selectmenu> and <popup> elements combo as a styleable <select> alternative. ⚠️ Works only in Chrome with Experimental Web Platform features flag enabled. codepen.io/pepelsbey/pen/zYE…
A map titled “Berlin boroughs map” where all boroughs are painted in a few pale colors, and the current borough is painted bright red. Over the map there’s a popup with the list of all boroughs names with the “Spandau” selected.

ALT A map titled “Berlin boroughs map” where all boroughs are painted in a few pale colors, and the current borough is painted bright red. Over the map there’s a popup with the list of all boroughs names with the “Spandau” selected.

1
1
1
16
🔗 Under-Engineered Dependency Questions adrianroselli.com/2021/12/un…

Under-Engineered Dependency Questions

Others in this sorta-series: Under-Engineered Custom Radio Buttons and Checkboxen Under-Engineered Toggles Under-Engineered Toggles Too Under-Engineered Text Boxen Under-Engineered Select Menus A...

adrianroselli.com
2
🔗 Proposal for <selectmenu> which is available in Chromium-based browsers behind flag A way to finally be able to fully style <select>. github.com/captainbrosset/op…
8
2
21
🔗 Trim Your Whitespace textslashplain.com/2022/01/1…
4
🔗 New on the web: programmatically open a native date picker stefanjudis.com/blog/new-on-…

New on the web: programmatically open a native date picker

The new `showPicker()` DOM methods enables developers to open a native date picker if the input element supports it.

stefanjudis.com
1
4
🔗 Generate CSS to style range inputs that look consistent across all browsers range-input-css.netlify.app

range-input.css - Range Input CSS Generator

Generate CSS to style range inputs that look consistent across all browsers

range-input-css.netlify.app
3
🔗 How to hide Microsoft Edge's password reveal button stefanjudis.com/snippets/how…

How to hide Microsoft Edge's password reveal button

Use `::-ms-reveal` to hide Microsoft Edge's "password reveal" button.

stefanjudis.com
3
🔗 Buttons vs. Links No, they are not the same. by @yatil yatil.net/blog/buttons-vs-li…
4
4
Fun with Forms retweeted
Stefan Judis@stefanjudis7 Nov 2021
Whoop whoop! 🎉 `input-security` (the standardized way to toggle the display of password input values) ships in Safari Tech preview. 💪 🔗 Spec: drafts.csswg.org/css-ui/#inp… Video alt: Showing the usually obscured input field value using `input-security`.
2
64
6
280
Fun with Forms retweeted
Sam Dutton@sw125 Nov 2021
Great to get to work with Michael on web.dev/learn/forms! Please let us know if anything doesn't make sense, or if anything is missing. 👍🙏
Michael Scharnagl@justmarkup3 Nov 2021
So excited that this course is out now.
3
8
🔗A guide to designing accessible, WCAG-compliant focus indicators sarasoueidan.com/blog/focus-…
2
1
10
54,4% of the top 1,000,000 web pages have at least one missing `<label>` element. webaim.org/projects/million/… Let's improve accessibility across the web, and learn how to build accessible forms web.dev/learn/forms/accessib…
1
4
Load more