95+ CSS Forms
In the ever-evolving landscape of web design, creating captivating and user-friendly forms is a crucial aspect of delivering a seamless user experience. To aid designers and developers in this endeavor, we are thrilled to present our collection of CSS forms. This handpicked selection features an array of free HTML and CSS form code examples sourced from CodePen, GitHub, and various other trusted r
Choices
Choices.js Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency. For all config options, visit the GitHub repo. Interested in writing your own ES6 JavaScript plugins? Check out ES6.io for great tutorials! 💪🏼 Text inputs Limited to 5 values with remove button Unique values only, no pasting Email addresses only D
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
Google Material Design Input Boxes in CSS3 | DigitalOcean
Introduction Google Material Design is all the rage right now. With Google announcing the new design philosophy and using Polymer to create rich animated applications, many developers are starting to incorporate these ideas into their own experiments. We created our own Google Material Design Checkboxes using CSS3 last week and here are some more examples of Google Material Design: Radio Buttons T
Design Better Forms
Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design. This article focuses on the common dos and don’ts of form design. Keep in mind these are general guidelines and there are exceptions to every rule.
Form Validation UX In HTML And CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! You can do an impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors. But it does require some CSS trickery to get everything just right! (You can) make the label look like a placeholder First: always use rea
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
Labelauty jQuery Plugin
A nice and lightweight jQuery plugin that gives beauty to checkboxes and radio buttons and allows custom labels for each status of (un)checked inputs. Labeled Check Boxes Non-labeled Check Boxes Labeled Radio Buttons Non-labeled Radio Buttons
Practical ARIA Examples
The HTML (ARIA and ARIA-associated attributes displayed in green) <form action=""> <fieldset> <legend>Login form</legend> <div> <label for="username">Your username</label> <input type="text" id="username" aria-describedby="username-tip" required /> <div role="tooltip" id="username-tip">Your username is your email address</div> </div> <div> <label for="password">Your password</label> <input type="t
jQuery Autotab Demo
Autotab's full documentation can be found in ReadMe.md on GitHub. Angular and Knockout demos are also available. Note: For the purposes of this demo, I am calling $.autotab({ tabOnSelect: true }); to initialize the auto tabbing order. Use the buttons below to turn Autotab on or off. Turning Autotab off will remove both auto tabbing and filtering. Turn On Turn Off Autotab status: On
Styling Cross-Browser Compatible Range Inputs With CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Styling for range inputs has improved dramatically since the release of IE 10. It is now possible to generate cross-browser compatible range inputs (sliders) using only CSS. In this tutorial, we will take a basic range input (<input type="range">): Screenshot of a range input, Mac Chrome 38
Building HTML5 Form Validation Bubble Replacements
I've written and spoken about HTML5 form validation over the last few years, and one of the most common questions I get is about bubbles. By bubbles I mean the UI controls browsers display validation errors in. Below you can see Chrome's, Firefox's, and IE's implementations: For whatever reason, we developers (or more likely our designer colleagues) have a deep-seated desire to style these things.
Aerotwist - Better password form fields
The best experiences are all about reducing friction, and that takes many forms. Sometimes it means adding things in, like labels, tooltips or other signifiers. At other times it’s about stripping things back to the core, making it super clear what you’re supposed to do next. Last updated: 29 Apr 2014 Est. Read Time: 3 min Share this: Twitter Tagged: #design, #opinion Update (1st May 2014, pre caf
» checkboxのテキストにはuser-select: none;を付けるといいかも。 | isee ウェブに関するブログ
ダブルクリックの処理 checkboxとテキストをlabelタグで囲み、テキスト部分をクリックしてもチェックが入るというような処理は、必ずといってもいいほど行うことかと思います。 しかし、checkboxのテキストをダブルクリックしてしまい、テキストが選択状態になっていると上手くチェックを切り替える事がで出来なくなってしまうことがあります。 あまりダブルクリックをするということはないかもしれませんが、チェックを入れた瞬間に「あっやっぱり外そう」と思い瞬時にクリックをするとテキストを選択してしまい、切り替えが上手くいかない場合があります。以下のような感じです。 現象発生ブラウザ テキスト選択時にチェックが上手く切り替える事が出来なくなるブラウザは、確認した限りGoogle Chromeのみでした。(IEでも少しおかしかったです)ほかのブラウザではテキストが選択状態にある場合でも、チェックの切
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
admin_post_{$action} – Hook | Developer.WordPress.org
Cleave.js - Format input text content when you are typing
https://jackocnr.com/intl-tel-input.html
range.css
Replacing Radio Buttons Without Replacing Radio Buttons — SitePoint
JS Bin