11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog
Andrey Sitnik Author of PostCSS and Autoprefixer, Principal Frontend Engineer Most websites have login or sign-up forms; they’re a critical part of business conversion. However, even popular sites fail to implement the 11 best practices mentioned in this article, and thus have at least one mistake. So, read on, then check your forms and improve your UX by using HTML technologies the way they shoul
Request for developer feedback: customizable select  | Blog  | Chrome for Developers
Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype fo
Good forms
Brian LeRoux posted a few thoughts about forms and the idea of a “good form†resonated with me so I dogpiled some of my own thoughts and experiences on it. Here’s a compilation of those ideas. I’m sure this is incomplete and would love to see your list. Good forms work without client JavaScript (Brian LeRoux) Good forms always submit (Brian LeRoux) Good forms remember values and display problems i
パスワードã®å…¥åŠ›æ–‡å—列を任æ„ã§è¡¨ç¤ºã™ã‚‹ | Accessible & Usable
公開日 : 2024å¹´3月23æ—¥ カテゴリー : アクセシビリティ / ユーザビリティ フォームã®ãƒ‘スワード入力欄 (<input type="password">) ã¯åŸºæœ¬çš„ã«ã€å…¥åŠ›ã•ã‚ŒãŸæ–‡å—列ãŒãƒžã‚¹ã‚ングã•ã‚Œã€ä»£ã‚ã‚Šã«æ–‡å—æ•°ã®åˆ†ã ã‘「黒ã„点ã€ãŒæ示ã•ã‚Œã‚‹ã‚ˆã†ã«ãªã£ã¦ã„ã¾ã™ã€‚他人ã«ã‚ˆã‚‹ãƒ‘スワードã®ç›—ã¿è¦‹ã‚’防ããŸã‚ã§ã™ãŒã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¯ã€å¤§åŠã®ã‚±ãƒ¼ã‚¹ã§ã¯èƒŒå¾Œã‹ã‚‰è¦—ã人ãŒèª°ã‚‚ã„ãªã„状æ³ã§ãƒ‘スワードを入力ã™ã‚‹ã§ã—ょã†ã—ã€å…¥åŠ›ã—ãŸæ–‡å—列ãŒè¦–èªã§ããªã„ã¨æ£ã—ãタイプã§ãã¦ã„ã‚‹ã‹ä¸å®‰ã«ãªã£ãŸã‚Šã€ã‚¿ã‚¤ãƒ—ミスã—ãŸã¨ãã®ä¿®æ£ãŒã—ã¥ã‚‰ã„ (ã©ã®ç®‡æ‰€ã§ãƒŸã‚¹ã—ãŸã‹ç¢ºä¿¡ãŒæŒã¦ãšã€ã¯ã˜ã‚ã‹ã‚‰å…¥åŠ›ã—ç›´ã•ã–ã‚‹ã‚’å¾—ãªããªã‚‹) ã¨ã„ã£ãŸå•é¡Œã‚‚ã‚ã‚‹ã§ã—ょã†ã€‚ã“ã†ã—ãŸã“ã¨ã‚’考慮ã«å…¥ã‚Œã‚‹ã¨ã€ãƒ‘スワードã®ãƒžã‚¹ã‚ングã¯ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®ä»»æ„ã§è§£é™¤ã§ãã‚‹ (入力ã—ãŸæ–‡å—列を表示ã•ã›ã‚‹) よã†ã«ã—ãŸã»ã†ãŒã€ãƒ¦ãƒ¼ã‚¶ãƒ“リティã®è¦³ç‚¹ã§ã¯æœ›ã¾ã—ã„ã¨è€ƒãˆã‚‹ã“
Bringing Back Horizontal Rules in Select Elements
In September 2023, Safari 17.0 on macOS shipped a small but interesting change to the <select> element. You can now put an <hr> element, known as a horizontal rule, inside a <select> element, which will draw a horizontal line again. Again, because Safari used to support this over a decade ago — more on that story later. The horizontal rule creates visual breaks between options to help users scan a
Making Disabled Buttons More Inclusive | CSS-Tricks
Let’s talk about disabled buttons. Specifically, let’s get into why we use them and how we can do better than the traditional disabled attribute in HTML (e.g. <button disabled> ) to mark a button as disabled. There are lots of use cases where a disabled button makes a lot of sense, and we’ll get to those reasons in just a moment. But throughout this article, we’ll be looking at a form that allows
Why the GOV.UK Design System team changed the input type for numbers – Technology in government
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ To provide users with a good service, government organisations usually need to collect data. Lots of data. The GOV.UK Design System team publishes patterns and components that let users enter their data in an easy and accessible way. The last thing we want to do is create barriers to use
サブミット (é€ä¿¡) ボタンをデフォルトã§ç„¡åŠ¹ã«ã™ã‚‹å ´åˆ | Accessible & Usable
公開日 : 2023å¹´10月5æ—¥ カテゴリー : アクセシビリティ / ユーザビリティ å…ˆã®è¨˜äº‹ã€Œã‚µãƒ–ミット (é€ä¿¡) ボタンをデフォルトã§ç„¡åŠ¹åŒ–ã—ãªã„ã€ã§ã¯ã€ã€Œå¤šãã®ã‚¦ã‚§ãƒ–フォームã«ãŠã„ã¦ã¯ã€ã‚µãƒ–ミットボタンã¯å¸¸æ™‚有効ã«ã—ã¦ãŠãã€å…¥åŠ›ä¸å‚™ãŒã‚ã‚Œã°é©æ™‚インクルーシブãªå½¢ã§ã‚¤ãƒ³ã‚¹ãƒˆãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã‚’æ示ã™ã‚‹ãªã©ã—ã¦ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒé©åˆ‡ã«ä¿®æ£ã§ãã‚Œã°å分ã€ã¨ã„ã†ä¸»æ—¨ã®ã“ã¨ã‚’書ãã¾ã—ãŸã€‚ 一般的ãªã‚¦ã‚§ãƒ–サイトã®ãƒ•ã‚©ãƒ¼ãƒ (システムå´ã«å¯¾ã—ã¦æœªé€ä¿¡ã®æƒ…å ±ã‚’ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒå…¥åŠ›ã—ã¦ã€é€ä¿¡ã™ã‚‹ã¨ã„ã†æµã‚Œ) ã§ã‚ã‚Œã°åŸºæœ¬çš„ã«ã¯ä¸Šè¿°ã®ã¨ãŠã‚Šã§ã€æ•¢ãˆã¦ã‚¤ãƒ¬ã‚®ãƒ¥ãƒ©ãƒ¼ã«ã‚µãƒ–ミットボタンを無効化ã™ã‚‹ã“ã¨ã®å¦¥å½“性ã¯ä½Žã„ã‹ã¨æ€ã„ã¾ã™ã€‚ãŸã 例外的ãªã‚±ãƒ¼ã‚¹ã‚‚ãªã„ã‚ã‘ã§ã¯ãªãã€ãŸã¨ãˆã°ã‚¦ã‚§ãƒ–アプリケーションã®è¨å®šç”»é¢ãªã©ã€ã‚らã‹ã˜ã‚システムå´ã«åæ˜ ã•ã‚Œã¦ã„ã‚‹æƒ…å ±ã‚’å¤‰æ›´ã™ã‚‹ã‚ˆã†ãªãƒ•ã‚©ãƒ¼ãƒ ã§ã¯ã€ã‚µãƒ–ミットボタンãŒãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã§ç„¡åŠ¹ã«ãªã£ã¦ã„ã‚‹
Textareas with auto-increasing height using CSS
Textareas areas are great when it comes to accepting a large amount of text from the user. But, the problem with textareas is that they have a fixed height. So, if the user enters more text than the height of the text, the text will overflow and the user will have to scroll to see the rest of the text. You can increase the height of the textarea using the rows attribute. But, that’s not a good sol
Designing Better Error Messages UX — Smashing Magazine
Error messages need to be easy to spot, but they also need to be helpful. Let’s explore when error messages should live above input fields and why toast error messages are usually not a very good idea. When we design interfaces, we rarely think about error messages first. After all, how much is there to design anyway? We highlight the error, display a message, and nudge users toward the correct in
The Accessibility of Styled Form Controls
The Accessibility of Styled Form Controls A repository of styled and “styled†form control elements and markup patterns, and how they are announced by screen readers. Why? Form controls are necessary in many interfaces, but are often considered annoying, if not downright difficult, to style. Many of the markup patterns presented here can serve as a baseline for building more attractive form contro
Form Design Patterns デモ URL ã®å¤‰æ›´ (Heroku ã‹ã‚‰ Render ã«ç§»è¡Œ) | Accessible & Usable
公開日 : 2023å¹´5月3æ—¥ カテゴリー : アクセシビリティ / ユーザビリティ ç§ã®ç›£è¨³æ›¸ã€ŒForm Design Patterns — シンプルã§ã‚¤ãƒ³ã‚¯ãƒ«ãƒ¼ã‚·ãƒ–ãªãƒ•ã‚©ãƒ¼ãƒ 制作実践ガイドã€ã§ã¯ã€å„ç« ã®å†’é ã§ã€Œã“ã®ç« ã§è§£èª¬ã™ã‚‹ãƒ•ã‚©ãƒ¼ãƒ ã®å®Œæˆå½¢ã€ã¨ã—ã¦ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸ã‚’ã”用æ„ã—ã¦ãŠã‚Šã¾ã™ã€‚ã‚‚ã¨ã‚‚ã¨åŽŸæ›¸ç”¨ã«å…¬é–‹ã•ã‚Œã¦ã„ãŸã‚‚ã®ã‚’フォークã—ã¦ã€ä¸»ã«ãƒ©ãƒ™ãƒ«ã¾ã‚りを日本語化ã—ãŸã‚‚ã®ã§ã™ã€‚ã‚ーボードæ“作やスクリーンリーダーã§ã®æŒ™å‹•ã‚‚å«ã‚ã¦ç¢ºèªã§ãるよã†ã«ãªã£ã¦ã„ã‚‹ã®ã§ã€å®Ÿéš›ã«è§¦ã‚Œã¦ã„ãŸã ã„ã¦ã€ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティã«å„ªã‚ŒãŸãƒ•ã‚©ãƒ¼ãƒ ã®ä¸€ä¾‹ã¨ã—ã¦å‚考ã«ã—ã¦ã„ãŸã ã‘ã‚‹ã‹ã¨æ€ã„ã¾ã™ã€‚ ã“ã®ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸ã¯ã€ã“ã‚Œã¾ã§ Heroku ã§å…¬é–‹ã—ã¦ã„ã¾ã—ãŸãŒã€ã“ã®ãŸã³ Heroku ã®ä½¿ç”¨ã‚’ã€2024å¹´4月末をもã£ã¦çµ‚了ã™ã‚‹ã“ã¨ã«ã„ãŸã—ã¾ã—ãŸã€‚移行先㯠Render ã§ã€æ—¢ã«å…¬é–‹æ¸ˆã§ã™ã€‚ 本書をãŠæŒã¡ã®æ–¹ã¯ã€å„ç« ã®ã€Œã“ã®ç« ã§è§£èª¬ã™
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
una.im | Updates to the customizable select API
Web Components for Password Input Enhancements
Brief Note on Disclosures in Fieldsets
Fine-tuning Text Inputs
TIL - submit() versus requestSubmit()
Don’t Disable Form Controls
Better form UX with the CSS property `field-sizing` - Stephanie Stimac's Blog
CSS only floating labels
{{#tags}}- {{label}}
{{/tags}}