ふりがな自動入力の検証
始めに UXの向上のため名前を入力した際にふりがなを自動で入力したいことがあると思います。調べた感じ以下の2つのライブラリが有名っぽい気がしたのでそれぞれについて検証してみました。 https://www.npmjs.com/package/vanilla-autokana https://www.npmjs.com/package/historykana サンプルはcodesandboxで書きましたので、動作を確認したい方は触ってみてください。 各ライブラリの使い方 vanilla-autokana こちらはjqueryのプラグインにあるautokanaをインスパイアして作られたもののようです。DOM要素を指定するだけで後は自動で変換されるので楽ですね。 import * as AutoKana from 'vanilla-autokana'; AutoKana.bind('#name'
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
GitHub - andyvr/picEdit: An attempt to create a simple front-end image editor jQuery plugin that would replace a file-upload input box in a HTML form.
This plugin is work in progress! Use with caution! The plugin will turn your form's <input type="file"... box into a tiny image editor/uploader. Perform basic image operations and preview your image before uploading to the server. The functionality for the plugin is very similar to the one introduced in pasteboard.co website and photobooth.js library. In other words, your good old html form with t
jQuery plugins · Bootstrap Form Helpers
Extend Bootstrap now with 15 custom jQuery plugins BUY NOW Get Full Package or DOWNLOAD Get 7 Free Plugins Today Only! Huge savings when you buy a commercial license! About Bootstrap Form Helpers Bootstrap Form Helpers is a collection of jQuery plugins to help you build better forms. The plugins can be used individually but some of them work together like Countries and States.
jQuery.h5form - HTML5 Forms Plugin
This plugin gives all browsers the HTML5 forms like the Opera. These enhancements are determined in the presence or absence of the object in a input element. Therefore it will be able to support nearly maintenance-free for the other versions of browsers. Some of the features like the date state use to determine the type and version of browser. Even if the browser improvements, it uses the extensio
GitHub - zoltan-dulac/html5Forms.js: Implements a subset of the HTML5 Forms module, including calendars, colour swatches, sliding widgets, client side validation and more.
HTML5Forms.js is a JavaScript polyfill that implements a subset of the HTML5 Forms module in all browsers. The script will only add support for the different parts of the module when there doesn't exist a native implementation. HTML5Forms supports the following HTML5 input types: range date datetime datetime-local week color It also supports: form validation (via "required" and "pattern" attribute
ZeroMail
About ZeroMailはオープンソースのメールフォームスクリプトです。 言語はPHPで、mail関数およびmb_send_mail関数で送信します。 HTMLタグやCSSが使いこなせるWebクリエーター向けな仕様となっているので、 初心者には少々設置難易度が高いかもしれません。が、自由度は高いと思います。 元々は自分が商用サイトを組んでいた時に UTF-8に対応しているメールフォームが皆無だった 巷のメールフォームが出力するソースが気に入らない 商用サイトだからクレジットの表示は無いほうがいい ということでカッとなって作ってみたものです。 頂いた要望などを吸収している内にいつの間にか多機能になっていました。 Ajaxに関してはMooToolsのForm.ValidatorとForm.RequestをGoogleで検索しても 全然日本語のページが無かったので普及させるべく対応させてみた
formtasticを使ってみた。 - Play *sanity*
ruby-toolboxの"Rails FormBuilders"部門の一番人気formtasticを使ってみた。 step1 インストール formtasticのインストール方法は簡単 gem install justinfrench-formtasticとgemをインストールしたあと、 config.gem "justinfrench-formtastic", :lib => 'formtastic', :source => 'http://gems.github.com'config/enviroment.rbに追加すればOK。 このformtasticは"semantic_form_for"というメソッドを追加してくれる。 これは手でformを作っていくときに非常に頼りになるメソッドだ。 準備としてモデルを作り ruby script/generate model test str
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. $(".chosen-select").chosen({disable_search_threshold: 10}); Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is
第2回 アクションを起こしてもらえるフォームのポイントは？ | gihyo.jp
使いやすいフォームをデザインする6つのポイント みなさんは、どのようにフォームをデザインしているでしょうか？ CSSでスタイリングされていない素のHTMLフォームは、当然ですがデザイン性にとぼしいものです。また、入力エリアが狭いため、ユーザビリティも高いとは言えません。 フォームにはお問い合わせフォーム、申し込みフォーム、予約フォームなどいろいろありますが、共通するのは「ユーザーにアクションを起こしてもらう重要な要素である」ということです。しかし、フォームへの入力は、ユーザーにとって面倒な作業です。そのため、極力簡単に入力できるようにして、ユーザーの負荷を軽減する必要があります。 それでは、どうすればユーザーの負荷を軽減させることができるでしょうか？ そのためのポイントが以下の6つです。 要素を整列させる 適度な余白をつくる ディテールを作り込む デザインされたボタンを使う 住所を自動入力
Fancy Sliding Form with jQuery | Codrops
Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images. So let’s start! Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newslet
A Better jQuery In-Field Label Plugin | Viget
The hip trend these days is to use in-field labels on form fields. What are in-field labels you ask? I'm sure you've seen something like this recently: Subscribe This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don't suggest you use the example from above because that was just a quick way to show the effect. So
Uniform - Sexy forms with jQuery
Download Download Uniform jquery.uniform.zip (155kb) Get source on GitHub version 1.5 (2/9/2010) Uniform styles: Selects (Drop downs) Checkboxes Radio buttons File Upload inputs Tested & Compatible in: Safari 3+ Firefox 3+ IE7+ Chrome jQuery 1.3+ Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
All-in-One Workflow Automation Software | Formstack
jQuery Steps
Dynamically Duplicating a form, by Tristan Denyer
HTML/SELECTカスタマイズ
http://validval.frebsite.nl/
JotForm
Onextrapixel