Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」:phpspot開発日誌
Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 2014年01月15日- nghuuphuoc/bootstrapvalidator GitHub Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 BootstrapなサイトでのJSベースでのフォームバリデーションを実装できます。 Emailやクレジットカード等のよく使いそうなバリデーションや長さチェック等一般的なものまで実装されています。 リアルタイムバリデーションで使い勝手をよくしたい場合の１つの選択肢として覚えておいても良さそう 関連エントリ Bootstrapなサイトで使える星形レーティングプラグイン Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 フリーで使えるフラットでハ
レスポンシブWebデザイン対応のグリッドレイアウト向けコンタクトフォームを構築する為のCSSフレームワーク・Grid Forms
RWD対応のグリッドレイアト向けフォームを作る為のCSSフレームワークのご紹介です。表題のとおり用途はある程度限定されますが、覚えておいて損は無さそうです。 フレームワークと言っていいかどうか分かりませんが本サイトにそう書いてありました。フォームの為のCSSフレームワークです。RWDへの対応はRespond.jsを併用することで実現しています。 動作デモが用意されていましたので以下でご覧下さい。デモでは全画面に実装、RWD対応にもなったモバイルファーストなフォームになっています。 Sample <div data-row-span="2"> <div data-field-span="1"> <label>Flat no. and bldg. name</label> <input type="text"> </div> <div data-field-span="1"> <label>R
select要素のoption項目の内容を画像で表現する為のスクリプト・Image Picker
select要素のoptionを分かりやすく 表現する、というライブラリです。 選んだ項目にあわせて設定した画像 が表示、選んだoptionに連動しま す。これは結構いいアイデアじゃ 無いかなと。 select要素のユーザビリティ向上、みたいなスクリプトです。jQueryに依存します。 こんなやつです。選ぶと画像にも青い枠が付く、みたいなの。画像はマークアップせず、option要素にカスタムデータ属性を与える事で実装します。 Sample 選択すると画像の選択箇所も連動します。 コード<script src="jquery.min.js" type="text/javascript"></script> <script src="image-picker.min.js" type="text/javascript"></script>本体とプラグインを読み込んで $(".foo").ima
HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか | DevelopersIO
HTML5でinputタグのタイブが追加されましたが、現行のiPhone、Androidでどのくらい使えるのか調べてみました。 OSとブラウザに関しては以下の機種で調べています。 iPhone 5(iOS6)のSafari Galaxy S3(Android 4.04)のGoogle Chrome バージョン18 目次 テキスト入力 検索(search) 数値(number) 電話番号(tel) URL(url) メールアドレス(email) 日付・時間指定 時間(time) 日付(date) 日時(datetime) 日時(datetime-local) 週(week) 月(month) その他 範囲から指定(range) 色選択(color) テキスト入力 まずはテキスト入力系の属性を調べてみます。 見た目が変わったり、フォーカスインした際の入力モードが変わります。 検索(search
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
ふつうのformをつかいたい - はまちや２ - ニコニコ超会議2012
こんにちはこんにちは！！ はまちや２ (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう？ プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 本日のテーマ： 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…（はいはい） フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた！) (これで送信、と…) ※エラー：住所を正しく入力してください (え、なんで！？) ※住所は全角で入力してく
CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor
Hello! I’m Doctor Peter and I’m here to treat you with a dose of complementary CSS3. Don’t worry, this won’t hurt a bit. Contrary to what HTML5 Please and the W3C would have you believe, CSS3 is not part of HTML5. “But this is HTML5 Doctor,” I imagine you saying. “Why are you talking about CSS3 here?” Well, I want to talk about a very specific part of CSS3, one that works in perfect tandem with HT
Make a Textarea Auto Resize to fit Contents - Impressive Webs
On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed. It seemed like a simple task. After doing
Free Cheat Sheet For Designing Web Forms — Smashing Magazine
Created by Joe Leech and released for Smashing Magazine and its readers, this sheet contains an Omnigraffle template, as well as Photoshop (PSD) and PDF examples for you to download and use as you wish. Forms, forms, forms: so often overlooked in design. In this post, we are pleased to release the Form Design Cheat Sheet, created by Joe Leech and released for Smashing Magazine and its readers. Thi
Bring Your Forms Up to Date With CSS3 and HTML5 Validation | Envato Tuts+
Let's look at how to create a functional form which validates users' data, client-side. With that done, we'll cover prettying it up using CSS, including some CSS3! Before we get started, you may want to consider using one of our HTML5 Templates or CSS Themes for your next project—that is, if you need a quick, professional solution. Otherwise, it's time to begin this step by step tutorial. Step 1:
２次元のラジオボタンを作るチュートリアル＆jQueryサンプル:phpspot開発日誌
Radio Buttons with 2-Way Exclusivity | CSS-Tricks ２次元のラジオボタンを作るチュートリアル＆jQueryサンプル 通常ラジオボタンというと１次元で、１グループで１個だけというのが特徴ですが、これを２次元にして普通とは違う使い方ができるようになるチュートリアルです 例えば、以下のような表に適用して、縦の重複も横の重複もできないような物を作れます。 ２つの物を組み合わせてそれぞれに独占させるような使い方が可能です。１対１のマッチングとかに使えそう 関連エントリ ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル ナビゲーションメニューに関する有用なjQueryチュートリアル集 IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル
HTML5 Forms input types, attributes and new elements – demos, tips and tricks - Robert's talk
HTML5 Forms input types, attributes and new elements – demos, tips and tricks Published on Tuesday, August 16, 2011 Forms on the web. They are literally everywhere, and there seem to really be all kind of flavors for them. From day one they have been a great mean for users to input data and information and interact with various services. And what comes with that is every implementation under the s
Usernoise Modal Feedback: Free WordPress Contact Form That Works
WPMU DEV Logo Usernoise Modal Feedback: A Free WordPress Contact Form That Just Works WordPress sites are always in need of a good contact form. Are you looking for a feedback/contact form that works, right out of the box, with attractive aesthetics and a simple yet full-featured form? Look no further than the free Usernoise Modal Feedback Contact Form plugin. Why Usernoise? For starters, if you d
Useful Ideas And Guidelines For Good Web Form Design - Smashing Magazine
A number of techniques and elements can be used in Web forms to turn them from abject failures into successful conversion points. Shawn Borsky brings us some interesting examples and useful guidelines for Web form design. The input form is an essential element of almost any website or application these days. Input is a core method of interaction, and in many cases it represents the hard conversion
10 JavaScript & CSS Frameworks for Enhancing HTML Forms – Speckyboy
formbase formbase is a package that uses CSS/SASS to bring improved default styles to your form elements. The styles are cross-browser compatible and make for a better UX. Foxholder Foxholder is a collection of 15 different placeholder animations to enhance your forms. When users interact with an input, an animation is triggered. It’s a neat way of ensuring that users will know exactly where they
WordPressの Contact Form 7 でお問い合わせ完了ページを新規に設置し、コンバージョンを設定する方法
Contact Form 7 でお問い合わせメールフォームを設置する の記事でも Contact Form 7 の設置方法をご紹介しましたが、 今回は 「お問い合わせ完了ページを新規に設置し、コンバージョンを設定する」方法を、Google Analytics の設定画面を交えてご紹介します。 （１）お問い合わせ完了ページを新設する まずはWordPress 管理画面で、お問い合わせ完了ページ用の固定ページを新規に作成します。 （２）Contact Form 7の設定 Contact Form 7 プラグインの編集画面に戻り、ページ下部の「その他の設定」欄に（１）で設定したお問い合わせ完了ページのURL と合わせて以下のような記述を行います。 例えば、お問い合わせ完了ページのスラッグが「inquiry_thanks」であれば [html] on_sent_ok: "location.repl
WordPressプラグインinquiry-form-creatorの使い方 - webの日記
Word Press,javascript,html5とかの技術のこと書いてます以下、WordPressの公式リポジトリよりinquiry-form-creatorをダウンロードしていただけます。 inquiry-form-creatorのダウンロードページ お問い合わせのフォームを作成します サイドバーお問い合わせメニューの「編集」をクリックすると、お問い合わせの編集メニューに遷移します。 お問い合わせの名前を入力して「新規作成」をクリック。公開期間は任意で入力してください。 「フォームの編集」をクリックするとフォーム作成のライトウィンドウが表示します。 お問い合わせの項目を作成します 「新規項目」と書いてある横のリストボックスより追加したいエレメントを選択します。 例では「テキストボックス」を選択。size=40,maxlength=40さらに「必須」チェックのバリデーション
Design a Prettier Web Form with CSS 3 | Envato Tuts+
Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in today’s tutorial! This tutorial includes a screencast available to Tuts+ Premium members. Subtle background gradients give depth to the fields while shadows lift them from the page. Even more impressive is that this is do
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
spyrestudios.com| 502: Bad gateway
フォーム関連要素（2） HTML5でinput要素に追加された新しいタイプ13連発
