Beautiful and Simple CSS Button Styling
You feel the buttons are not beautiful in form and display on different browsers. CSS buttons are much more efficient than image-based buttons because they’re entirely text-based. If you are looking for a simple and effective way of creating dynamic CSS buttons with cross browser compatibility, these tutorials are for you. Below, you will find the CSS Tutorials and Techniques to make CSS Button St
セマンティックで使いやすいフォームを制作するための習作
ビギナーのためのセマンティックでアクセシブルで機能性にも優れたフォームを制作するための習作Nettuts+から紹介します。 20+ HTML Forms Best Practices for Beginners 下記は、その意訳です。 1ステップずつフォームを改善し、アクセシブルで機能性をアップするポイントを紹介します。 セマンティック アクセシビリティ ファンクショナリティ デザイン 結論 セマンティック 1. fieldsetを使用 ユーザーが入力する多くのフィールドがある際、fieldset要素を使用して類似情報をまとめます。 <textarea name="code" class="html" cols="60" rows="5"> <fieldset> <span>Billing Address</span><input type="text" /> <span>City</sp
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介
入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。 jQueryを使ってWebブラウザ上で入力チェック 動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。 今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。 jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
Lightform Free Ajaxphp Contact Form » Web-kreation
Web Kreation Ltd. is now Morphosis Ltd.. You can still view this site but comments are closed and contact form disabled. If you want to see our latest work or contact us, please visit our new site www.morphos.is. Web-kreation Online Portfolio of Jeremie Tisseau UI/UX Designer, Event Organizer, Web Entrepreneur
秀逸！スライダーを使ったメール送信フォーム·SlideSubmit MOONGIFT
ロボットによるユーザ登録やメール送信などを防ぐ目的で使われるCAPTCHA。ロボットははじけるかも知れないが、ユーザビリティは著しく低下する。最近ではCAPTCHAを解析するものも登場しており、さらに分かりづらく変形して人間すら惑わすものになっている。 スライドアクションでロボットと人間を区別 そこで注目したいのが新しい形の人とロボットの区分けをつける手段だ。その一つとしてSlideSubmitを紹介しよう。 今回紹介するフリーウェアはSlideSubmit、スライダーを使ったユーザビリティの高いメール送信フォームだ。ソースコードは公開されているが、ライセンスは明記されていなかったのでご注意いただきたい。 SlideSubmitはPHPやJavaScriptで作られているソフトウェアだ。サンプル的なフォームで、名前とメールアドレス、それに本文を入力して送信するというフォームになっている。
これならコンタクトしたくなる？Ajaxを使ったメールフォーム·LightForm MOONGIFT
Webサービスを使っていたり、コーポレートサイトを見ていて、問い合わせのメールを送りたくなるということは相当なコストがかかる。それだけに一通、一通を大事にしなければならない。 シンプルなメールフォーム だがフォームがいけてないデザインだったり、入力チェックがややこしかったりしたら送信する気もなくなってしまう。それは大問題と言える機会ロスだろう。そんな失敗をしないためにもLightFormを使おう。 今回紹介するオープンソース・ソフトウェアはLightForm、Ajaxを使った美麗なメールフォームだ。 LightFormはシンプルなメールフォームで、名前、メールアドレス、サブジェクトと内容が必須になっている。Webサイトも入力できるが必須ではない。ロボット防止に簡単な足し算に答える必要がある。 分かりやすい入力エラー そして入力ボックスからフォーカスを動かすと即座に必須チェックが行われる。結
jQuery Form Plugin
Overview The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn't get any easie
ヨモツネット 実験室 » 入力されたテキストを自動で指定の形式(半角,全角,ひらがな,全角カタカナ)に変換する
概要 ユーザがフォームに入力したとき、指定の形式 (半角,全角,ひらがな,全角カタカナ) に自動で変換してあげるための JavaScript ライブラリです。 動作確認用の demo ダウンロード 使い方と説明 動作させるためには、ダウンロードした valueconvertor.js を (X)HTML ファイルの head 要素内などで読み込みます。 <script type="text/javascript" src="js/valueconvertor.js"></script> さらに、変換の動作の目印とするための class 属性値を設定します。<input type="text" class="ascii" />のように、input 要素に対して、指定の class 属性値をつけると動作します。class 属性値と動作の内容の対応表については以下の通りです。 値の形式 clas
スキンケア情報便 jibberbook
私は、毛穴と肌の赤みに悩んでいます。前までは、ドラッグストアで買った1000円くらいの美白効果のある化粧水と乳液のみ使っていました。しかし、毛穴の汚れはどんどん酷くなる一方で、鼻はいちご鼻ですし、頬も黒い毛穴があり、赤みが全然治らず、困っていました。 毛穴がとにかく気になり、毛穴の汚れを取るために剥がすパックをやってみたのですが毛穴が開いてしまっただけでなにも変わりませんでした。後から調べてみると、毛穴のパックはあまり良くないとの事でした。 今現在のスキンケアは、顔を洗う前に蒸しタオルをして、ロゼット洗顔パスタ海泥スムースで洗顔をし、タオルで顔を拭くのではなくティッシュでポンポンと押し当てるようにして優しく顔を拭きます。その後すぐに、導入美容液をつけ、次に化粧水をつけます。 化粧水は、ドラッグストアでよく見かけるロートメラノＣＣ薬用シミ対策美白化粧水をつけます。そして、2日に1回はシートの
Learn How To Code by Envato Tuts+
Thousands of free tutorials and online courses to help you learn software development from mobile devices to web applications and everything in between. Join our community to improve your coding skills and workflow. What would you like to learn? Our extensive learning guides provide a deep dive into various types of software development. Improve your WordPress knowledge, learn Ruby or PHP, get sta
Learn How To Code by Envato Tuts+
Thousands of free tutorials and online courses to help you learn software development from mobile devices to web applications and everything in between. Join our community to improve your coding skills and workflow. What would you like to learn? Our extensive learning guides provide a deep dive into various types of software development. Improve your WordPress knowledge, learn Ruby or PHP, get sta
Thematic WordPress Theme Toolbox: 10 extremely useful hooks
This page provides an overview of all important pages on CatsWhoCode.
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
&lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;pid=877160106″&gt;&lt;/script&gt;&lt;noscript&gt;&lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;pid=877160106″ target=”_blank” &gt;&lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;pid
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (1) ドラッグ&ドロップでカラム幅を変更可能 | エンタープライズ | マイコミジャーナル
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
[CSS]フォームに特化したスタイルシートのフレームワーク -Formy
テキストエリアやラジオボタン・チェックボックス、セレクトボックスなどのフォームに特化したスタイルシートのフレームワーク「Formy」を紹介します。 Formy - CSS Form Framework ファイル構成は、下記のようになっています。 reset.css fieldset, form, label, legendのリセット。 form.css Formyのコアファイル。 ie.css IE用に調整。 スタイルシートもシンプルに設計されており、カスタマイズする際にも簡単に行えると思います。 reset.css <textarea name="code" class="css" cols="60" rows="5"> fieldset, form, label, legend{ margin:0; padding:0; border:0; font-weight:inherit; f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - RonnieSan/uploadify: A jQuery plugin for file uploads.
16 Free Ajax Contact Forms - For A Better User Experience
http://101lab.net/javascript/2007/08/ajax-1.html