Text Input Effects | Set 1
Text Input Effects Simple ideas for enhancing text input interactions Haruki First Name Last Name Email Hoshi Name Street Town Inspired by Andrej Radisic's Jawbreaker input field Kuro Username Website Invitation Code Jiro Cat's Name Dog's Name Hamster's Name Minoru First Name Middle Name Last Name Yoko Street City Region Hideo Username Email Password Kyo What's your email? Akira First Name Last Na
Image Picker
Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface. View in Github or Download the project Features Works great on both single and multiple select elements. Falls back nicely for clients without JavaScript enabled. Integrates nicely with Twitter's Bootstrap markup. What it does? It turns a select element into a more user friendly i
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
Capture form validation back from the browser - Hyperform - Capture form validation back from the browser
Capture form validation back from the browser Hyperform is a complete implementation of the HTML 5 form validation API in Javascript. It replaces or polyfills the browser’s native methods and eases your validation task with custom events and hooks. Hyperform is neatly packed in a single Javascript file, weights only 36kB (10.3kB gzipped!) and includes: a full, working and compliant implementation
Multirange: A tiny polyfill for HTML5 multi-handle sliders.
Features Only 0.6KB minified & gzipped! No dependencies. Uses feature detection, will not run if two-handle sliders are natively supported. Keyboard accessible Clicking on the track still works Handles can be moved past each other Customizable styling JS properties polyfilled too (input.value, input.valueLow, input.valueHigh) Limitations Requires support for <input type="range"> (duh). Fully works
ClockPicker
A clock-style timepicker for Bootstrap (or jQuery). Download ZIP CSS < 6KB, JS < 9KB, after minified. Browser support All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8. Device support Both desktop and mobile device are supported. It also works great in touch screen device. Dependencies ClockPicker was designed for Bootstrap in the beginning. So Bootst
Card — make your credit card better in one line of code
With one line of code.. new Card({ form: 'form', container: '.card'}) You get.. Animations for 4 different card types An intuitive experience for your users Pure CSS, HTML, and Javascript (no images) 100% free and open source No need to change your form Card works as a drop in addition to your current credit card form. No need edit input names or HTML — you can leave everything as is. All pure CSS
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
jQuery select-multiple
I'm a user-friendlier drop-in replacement for the standard <select> with multiple attribute activated. Free (under MIT license) Works in an unobtrusive fashion Fully open sourced Keyboard support Provides some callbacks Fully customizable via CSS Depends on jQuery 1.8+ Tiny code ~8kb minified gem for Rails HTML <html> <head> <link href="path/to/select-multiple.css" media="screen" rel="stylesheet"
jquery.add-input-area
Please follow the naming convention below. 増減させる対象のエリア、追加ボタン、削除ボタンのCSSクラス名は、 命名規則に従うことでプラグインに渡すオプションの数を減らすことができます。 HTML <ol id="list"> <li class="list_var"> <input type="text" size="40" name="list_0" id="list_0"> <button class="list_del">Delete</button> </li> </ol> <input type="button" value="Add" class="list_add"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="jq
imgCheckbox | a jQuery plugin that makes img tags checkable
jquery.imgCheckbox.js Toggle the internet A jQuery plugin that makes img tags checkable. Find it on github. Try it by clicking here → Download Learn More You can call imgCheckbox without any parameters on any jQuery collection containing img elements. $("img").imgCheckbox(); imgCheckbox automatically attaches to a parent form (if one is present). The submit event is captured and values are injecte
Home - FH Outsourcing Solutions
Find trusted agencies, companies, and individuals for anything you want to outsource in your business.
The 10 Commandments of Good Form Design on the Web – Mono
1. Thou shalt provide clear, always visible labels for each field There is a trend in web design to show form labels only when a field is focussed. This can be cool on a simple form like a username/password form, but for anything longer it is probably a bad idea. When you have the space to show labels, do so. Especially in a long form a user will review the input he or she entered; when you can’t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cleave.js - Format input text content when you are typing
jsdo.it
jQuery formBuilder/formRender Demo
Lorenzo Bocchi
Custom File Inputs | Codrops
Forms within buttons
Delivering Materials Fast - Same-Day Aggregates