Floated Label Pattern with CSS Only
I came across Brad Frost's post about the Floated Label Pattern and instantly thought, "I think you can do this in CSS" and set out to prove it. It turned out to be a little trickier than expected but I created a quick proof of concept: The Example How it works I use the :valid pseudo class along with the pattern attribute on the input to style the associated label accordingly. .field { position:r
Primer
Primer’s design tokens for color, spacing, and typography.
MDS - The Website of Matt D. Smith
I first had the idea for a new input pattern back in August, 2013. The idea was simple enough - animate placeholder text to show an icon beside the input so you don't lose your context. I had been doing 99% mobile work for the past 2 years and little things like this can really add up. I wanted a solution that saved space, looked clean and clear, but didn't forego usability. Even a simple username
Railsのfields_forを使ったnested attributesなデータの追加や削除をAngularJSでやっちゃおうという話 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年10月18日14:06 JavaScript Ruby Railsのfields_forを使ったnested attributesなデータの追加や削除をAngularJSでやっちゃおうという話 ユーザ登録時に併せて言語の習得レベルを設定する、みたいな場合を考えます。 = form_for :user do |f| ..(snip).. # ここから .form = f.fields_for :user_languages do |form| %p = form.label :language_id, '言語' = link_to 'Remove', 'javascript:void(0)' = form.collection_select :language_id, Language.all, :id, :name %p レベル - Level.all.each do |leve
twiwt.org - このウェブサイトは販売用です！ - twiwt リソースおよび情報
このウェブサイトは販売用です！ twiwt.org は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、twiwt.orgが全てとなります。あなたがお探しの内容が見つかることを願っています！
入力フォームのどこで脱落したのか？ Googleアナリティクスで評価する――実例で解説！イベントトラッキング（3）［第68回］ | Googleアナリティクスとは／衣袋教授のGoogleアナリティクス入門講座 | Web担当者Forum
横転、エッホエッホ、ミャクミャクなど強力ワード多数！「SNS流行語大賞2025」ノミネート30語が発表【イー・ガーディアン調べ】 11月27日 8:30
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗ
line-height: normal !important
たまに忘れてFirebugで調査して「あーそうだった！ これだよ！ クソが！ 俺か！」みたいな。これはFirefoxのフォーム系の置換要素に設定してあるデフォルト・スタイルで、入力ボックスとボタンの高さを揃えるのが面倒くさい原因のひとつ(もちろんこれだけではない)。これはかなり昔からあるけど「置換要素がline-heightプロパティーで高さ変わるわけねーだろクソが」という理由によりWon't Fixなので、死ぬまで付き合うことになりそう。 !importantなため制作者スタイルからはどうあがいても上書きするのは無理なので、他のブラウザー向けにline-height: normalを設定してやるのがまず必要。その上で入力ボックスとボタンのbox-sizingプロパティーが違うことに気をつけ、高さを指定する。 input[type="text"] { height: 1.75em; lin
Getting Started | bootstrap-select · SnapAppointments Developer
The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. Download (v1.13.14) Getting Started Quick start Bootstrap-select requires jQuery v1.9.1+, Bootstrap’s dropdown.js component, and Bootstrap's CSS. If you're not already using Bootstrap in your project, a precompiled version of the Bootstrap v3.4.
Ladda
A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a real-world example, check out any of the forms on slides.com. expand-left Submit expand-right Submit expand-up Submit expand-down Submit contract Submit co
COOKPADの「伏せ字にせず入力」ボタンは素晴らしい
@tokuhiromから教えてもらったのですが、COOKPADのスマートフォン向けWebサイトのログインページには、パスワードを「伏せ字にせず入力」するボタンがついているのですね。 さっそく見てみましょう。まずはログイン画面です。パスワード欄の下側に、「伏せ字にせず入力」ボタンが見えます。 「元に戻す」ボタンを押すと、伏せ字に戻ります。 僕はこれを知って興奮しました。なぜなら、拙著「体系的に学ぶ 安全なWebアプリケーションの作り方」には以下のように書いたからです（P337～P338）。 パスワード入力欄のマスク表示は、現在の常識的なガイドラインですが、実は筆者自身は疑問を持っています。パスワード入力欄をマスク表示にすると、記号や大文字・小文字交じりの安全なパスワードを入力しにくくなるので、利用者は簡単な（危険な）パスワードを好むようになり、かえって安全性を阻害するリスクの方が大きいのでは
パスワードを隠すのをやめよう
ユーザがパスワードを打ち込んでも、黒い点の列でしかフィードバックが返ってこないとき、ユーザビリティは損なわれている。パスワードを隠したからといって、セキュリティは強化されないことが多く、逆に、ログインの失敗によって、あなたのビジネスに悪影響を及ぼす。 Stop Password Masking by Jakob Nielsen on June 23, 2009 ユーザがパスワードを打ち込んでいるとき、ほとんどのパスワードをはっきりとテキストで示すべき時期が来ている。フィードバックを提供し、システムの状態を視覚化することは、常にもっとも基本的なユーザビリティの原則の１つである。ユーザが複雑な暗号を入力している間、どれも同じ形の黒い点を見せるというのは、間違いなくその原則に違反している。 ほとんどのウェブサイトは（そして多くのアプリケーションでも）ユーザがパスワードを入力している最中、パスワー
Editable for Bootstrap
Heads up! This project was significally improved and renamed into X-editable! Please use X-editable page to download newest release, create issues and view actual documentation. All futher updates will be done there. About Invokes in-place editing feature to any element of your page based on Bootstrap form and popover supported types: text, textarea, select, date validation on client and server-si
Fuel UX
Fuel UX extends Bootstrap with additional lightweight JavaScript controls for your web applications. Get Fuel UX View examples Ignite your Bootstrap project today. Include Fuel UX controls in your next web project knowing it's solidly optimized and easy to upgrade. Use a little or use a lot. Deploy only the controls you want with minimal, name-spaced, responsive styling designed to easily fit into
Garlic.js
Garlic.js allows you to automatically persist your forms' text field values locally, until the form is submitted. This way, your users don't lose any precious data if they accidentally close their tab or browser. It strives to have a javascript agnostic interface for UI/UX developers that might want to use it. Just add some data-persist="garlic" in your form tags, and you're good to go!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ryanb/nested_form: Rails plugin to conveniently handle multiple models in a single form.
https://www.dropzone.dev/js/
GitHub - FineUploader/fine-uploader: Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.
Nothing Insightful — Styling File Inputs in iOS6 with jQuery Mobile
http://blog.bluearrowslab.com/smartphone/topicks/190/