Vue.jsを使用してさまざまなフォームを簡単に実装できる -Vue Formulate
Vue.jsを使用して、Webページやスマホアプリでよく使用されるフォームを簡単に実装できるVue Formulateを紹介します。 サインアップ、ログイン、メールアドレス、ファイルのアップロード、アンケートなど、さまざまなフォームをサポートしており、バリデーション機能も備えています。 Vue Formulate Vue Formulate -GitHub Vue Formulateの特徴 Vue Formulateのデモ Vue Formulateの使い方 Vue Formulateの特徴 Vue Formulateは、Vue.jsを使用してフォームを構築する最も簡単な方法です。主な機能は、フォームとフィールドの検証、ファイルのアップロード、フォームの生成、ラベルをサポートする単一要素の入力、ヘルプテキスト、エラーメッセージ、プレースホルダーなど、さまざまなプロジェクトで使用するための包
【jQuery】フォーム部品の取得・設定まとめ - Qiita
<label><input type="radio" name="area" value="0" checked>関東</label> <label><input type="radio" name="area" value="1">関西</label>
ログインフォームは変わった方法で実装しないで！
Webサイトのログインに使用するパスワードをどのように管理していますか？ 私は1Passwordで管理していますが、他にもChromeのパスワードマネージャーやmacOSのキーチェーンなどを使用している人も多いと思います。 そんなパスワードマネージャーとうまく連動するログインフォームを実装するためのポイントをまとめた記事を紹介します。 don’t get clever with login forms by Brad Frost 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ログインフォームの避けるべき例 ログインフォームの適した例 はじめに 日増しに、私はログインフォームでイライラすることに気がつきました。1Password（私が使用している）やChromeのパスワードマネージャー（これも私が使用している）のような
無料で試せるフォーム作成ツールならformrun(フォームラン)
フォームの作りやすさはもちろんのこと、ステータスの管理画面が使いやすいのがformrunにした決め手です。
jQuery multiselect
I'm a user-friendlier drop-in replacement for the standard <select> with multiple attribute activated. Free (under WTFPL 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 HTML <html> <head> <link href="path/to/multiselect.css" media="screen" rel="stylesheet" type="text/css">
より良い検索フォームのための９つのベストプラクティス
検索ボックスは入力フィールドと送信ボタンの組み合わせです。検索ボックスにデザインは必要ないと考える人もいるかもしれません。たしかに、たった２つの単純な要素でしかありません。しかし、コンテンツが多いサイトでは、検索ボックスは往々にしてもっとも頻繁に使用される要素なのです。 複雑なサイトに遭遇したとき、ユーザーは労力を使わずに素早く最終目的地まで辿り着けるように、すぐに検索ボックスを探します。ですから、検索ボックスのデザインやユーザビリティは重要なのです。 この記事では、ユーザーが目的地に辿り着くための時間を節約するために、検索ボックスをどのように改善できるかを見ていきます。
フォームのデザインを簡単に整える「iCheck」がとっても便利！ | WebChokoTips – ウェブチョコチップス
フォームのデザインって難しいですよね。でも、ユーザの動きを考えやすくて作りがいがあるかと思います。 しかも、デフォルトのスタイルだと全体のテイストと合わなかったりするので、実装に手間がかかってしまいます。 そこで今回紹介するプラグインは、「iCheck」というjQueryのプラグインです。スタイルの変更が面倒なチェックボックスとラジオボタンをいい感じに整えてくれるすぐれものです。 まずはDEMOを用意したのでご覧ください。 DEMO DEMOにあるフォームはサーバーへの送信はしていませんので、お気軽に試して見て下さい！ 使い方 HTMLは以下のような感じで、特別なマークアップは必要無いようです。
Bootstrap使い方メモ１（基本＋CSS） - Qiita
公式サイトを一通り動かしてみたときのメモ。 まずは CSS。 Hello World Bootstrap を入手する ここ から zip ファイルをダウンロードする。 HTML を書く <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css" /> </head> <body> <h1>Hello Bootstrap!!</h1> </body> </html> HTML5 の DOCTYPE を記述する。 css ファイルを読み込むだけで使い始められる。 モバイル用に viewport を設定する meta タグを記述する。 user-scalable=n
効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | POSTD
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
フォームで無効な日付を選択させない ｜ Tips Note by TAM
日付を選択するボックスが年、月、日と分かれていた場合、 無効な日付を選択することができてしまいます。（2月31日など） Javascriptを利用して選択できないようにする方法を紹介します。 今回は無効な日付を選択した場合は、選択したボックスを空にしています。 応用すればアラートを出す、またはエラーテキストを表示するなどができると思います。 処理の流れは選択した値を変数「y、m、d」に入れ、すべて選択されていたらDate()に選択値を入れる。 Date()で取得した日付をdsに入れ、年、月、日を取得する ※getFullYear()、getMonth()、getDate() 選択値とDate()で取得した値（ds）を比較して、一致していなければ選択したselectのvalueを空にする。 ※4月31日は5月1日になって返ってくるので、存在しないことが判定できます。 function dat
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
Wufoo Making forms easy fast fun.
An arrow pointing left An arrow pointing right An arrow pointing left A magnifying glass The Twitter logo The Facebook logo The LinkedIn logo The Google Plus logo The RSS feed symbol The Wufoo by SurveyMonkey Logo The Wufoo by SurveyMonkey Logo A credit card A tray with an upwards pointing arrow A diamond with two arrows leading to different boxes Two bars in a chart Two pages A painter's palette
ドラッグアンドドロップで簡単にフォームを作れるjQueryプラグイン
ドラッグアンドドロップでフォームを作れるWebサービスはたくさんあるんですが、フォームを設置するjQueryプラグインはそんなにないですよね。 そんなわけで今回はそんなD&Dでフォームを作れるようにするためのプラグインのご紹介です。 こういうのを実装できます。 ドラッグアンドドロップでフォームを組み立てる。 編集は超らくちん。 View XMLをクリックすればそのまま使えるコードがでてきます。 実際は触ってみるのが一番わかり易いと思います。 jQuery formBuilder | Drag & Drop Form Creation ダウンロード後、圧縮ファイルを解凍して、demoフォルダの中のindex.htmlを、コーダーで開いてみましょう。 大体の仕様はその中を見ればほぼわかると思いまうs。
[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]
フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。
![[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5062373ec67701c8d65ca6ffdfe6e9cb4dc3565f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110901.png)
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.
郵便番号から住所を自動入力する操作性が世界一簡単なZipAddr
Top デモ 仕様 利用方法 拡張方法 拡張(有償) 更新履歴 お問い合わせ ************************************************** 3/31迄表示 * [zipaddr] （2024/1/27、朝に更新予定） * * Ver7.261からオウンコードの記述方法が、 * ZP.（D.から）に変わります。 ‥‥‥‥【重要】 * * ※WPプラグイン zipaddr-jp は同期を取ります。 * （更新後にUpdateをお願い致します） 2024.1.14 照沼 ************************************************** ◎利用数：45,133 サイト ◎本日の(類推)アクセス数：3,190 回 【利用数40,000サイト達成、継続】 上位自動ツール「Autoin入力」を無料で
手軽にselect要素の装飾やカスタマイズができるjQueryプラグイン「Select or Die」 - NxWorld
目新しいプラグインではないのですが、使わせてもらう機会が多いのでご紹介。 「Select or Die」はselect要素にちょっとした機能を付けたり、用意されているスタイルを使うことで手軽に装飾することができるjQueryプラグインです。 ブラウザもIE8から対応しており、jQueryのバージョンも新しいのはもちろん、v1.8でも動作してくれます。 同じようなスクリプトやプラグインは他にもありますが、個人的にselect要素を変更する際にはおすすめのプラグインです。 使用方法 まずは「Select or Die」からプラグインファイルをダウンロードするなどして、jQueryと併せて必要なファイルを読み込みます。（パスなどは自身の環境に合わせて変更してください。） <link rel="stylesheet" href="css/selectordie.css" /> <script sr
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック
ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。 アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。 Some :active & :focus effects 使い方は簡単、CSSファイルを外部ファイルとして記述し、input要素にclassを加えるだけです。CSSファイルは上記ページの下部「Download」からダウンロードできます。 エフェクトのカラーを変更したい場合は、CSSファイルで一括置換するだけでOKです。 HTML <head> ... <link rel="stylesheet" type="text/css" href="active_and_focus.min.css" media="a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery formBuilder/formRender Demo
