都道府県を楽に選択できるコンポーネント作りました【Vue 3】 - Qiita
こんにちは、株式会社FunctionalLabでフロントエンド主軸の開発を行なっているしゅうです。 今回は、都道府県を楽に選択できるコンポーネント作ったので紹介します。 公開リンク npm: https://www.npmjs.com/package/vue3-prefecture-selector github: https://github.com/shu-pf/vue3-prefecture-selector なぜ作ったのか 会員登録の際に「都道府県を選択してください」と出てくる際に、このような選択肢が現れますが入力に時間がかかります。 今回はこのセレクトボックスに対して別の表現の選択肢は無いか考えてみました。 作ったもの Vue3のコンポーネントを作成しました。 CodesandBoxでも動作を確認できます。 Codesandbox 上の画像のように、 都道府県を選択する用のモーダ
CSSでフォームの実装に悩んだら！ さまざまなフレームワークで実装されたフォームのライブラリ -HeroTofu
Tailwind CSSやBootstrapやBulmaなど、CSSのさまざまなフレームワークで実装されたフォームのライブラリを紹介します。 それぞれのフレームワークを利用している時はもちろん、フレームワークの比較検討にも役立ちます。 HTML Forms Library HTML Forms Libraryとは HTML Forms Libraryの使い方 HTML Forms Libraryとは HTML Forms LibraryはTailwind CSSやBootstrapやBulmaなど、さまざまなCSSのフレームワークで実装されたフォームのライブラリです。テンプレートを使用して、さまざまなフォームを簡単に実装できます。 ライセンスは、下記の通りです。 商用プロジェクトで無料で使用できます。 帰属は素晴らしいですが、必須ではありません。
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
インプット・グループ ≪ コンポーネント ≪ Bootstrap3日本語リファレンス
使い方 ポイントは２つ。 入力欄の左に配置する場合は入力欄の直前に、入力欄の右に配置する場合は入力欄の直後に、入力欄の両サイドに配置する場合は入力欄の直前と直後に、class属性に、input-group-addonを指定したspan要素を配置する。そのspan要素内にテキストやボタンを配置する。 入力欄（input要素）とspan要素を、class属性にinput-groupを指定したdiv要素で括る。 <div class="input-group"> <span class="input-group-addon">ユーザー名</span> <input type="text" class="form-control" placeholder="太郎"> </div>
tetra-themes.com - tetra themes リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
18 Useful WordPress Contact Form Plugins
Contact Form is one of the most important page for all websites. If you are running an e-commerce website, you need a contact form so that your potential buyers can reach you to get more information. Even if you run a personal blog, you will also need a contact form so that bloggers from same niche or advertisers can contact you easily. There are some great online form providers such as Wufoo and
Input Masking | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I don’t have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format use an input mask. I thought I’d just line up a few demos for really easy reference. Robin Herbots’s (jQuery) Inputmask This is an actively maintained plugin. S
Inline validation in forms — designing the experience
After having released my own form validations library, I couldn’t stop asking myself one thing: What is the best user experience when it comes to displaying the inline validation errors? I know that the library itself can handle anything, but I wanted to find out what the best default experience was, something I could provide out-of-the-box. While researching this topic, I chanced upon various art
内容に応じて自動リサイズするフォーム要素がつくれる「Stretchy」:phpspot開発日誌
Stretchy: Form element autosizing, the way it should be. 内容に応じて自動リサイズするフォーム要素がつくれる「Stretchy」 textareaの他にinput type="text"やselectも内容によって自動リサイズをかけられます。 最初は要素を小さめにしたいような場合につかえそうです 関連エントリ Windowリサイズ完了時のコールバックを設定できるようにするjQueryプラグイン「Resize End」 iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」 textareaを入力値によってリサイズできるシンプルなjQueryプラグイン「autoresize-textarea」
フォーム内の特定要素のlocalStorageへのバックアップを可能にする「DataSaver」:phpspot開発日誌
DataSaver - jQuery plugin for save your data フォーム内の特定要素のlocalStorageへのバックアップを可能にする「DataSaver」。 ブラウザの終了や予期せぬリロード等によってフォームの内容が消えてしまうのを防ぐためのjQueryプラグインです。 フォームまるごと、ではなく特定の要素のみ、という使い方が出来ます（もちろん全部も可）。 バックアップ用のキー等も個別にカスタマイズできるためフォームが複数ある場合も対応可能です。 関連エントリ フォームのfile入力部分のUIを綺麗に整形できる「jQuery Filestyle」 クールでモダンなコンタクトフォームのデモ＆サンプルスクリプト 超カッコ良い検索フォームのチュートリアル＆デモ フォームにて入力の入力UIを追加できる「jquery.signfield」 クレジットカード入力専用フォ
フォームのfile入力部分のUIを綺麗に整形できる「jQuery Filestyle」:phpspot開発日誌
jQuery Filestyle - jQuery Customization of input html file - Customization of upload フォームのfile入力部分のUIを綺麗に整形できる「jQuery Filestyle」。 ファイルアップロードの際にかならず使う<input type="file">ですが、ブラウザによってデザインがまちまちでダサいと、割と扱いにくいのですが、それを綺麗に整形するためのjQueryプラグインです CSSで自由に調整をかけるのも簡単そうです。 Bootstrapなサイトでも便利に使えそうです 関連エントリ 画像アップロード時にクライアント側で編集が可能になる「picEdit」
Emoji Toggles! | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Fun Friday thing! Natalya on CodePen made a super fun Pen. You know how clicking a <label> with a for attribute that matches a checkbox input, it will toggle the input to checked or unchecked? That, combined with the :checked selector in CSS and the sibling combinator forms
上下キー、マウスホイールで数値を増減させられる「jStepper」:phpspot開発日誌
アニメーション切り替えがカッコイイタブUI実装jQueryプラグイン「tabtab... 次の記事 ≫：アプリ用のモダンなWEBサイトをAppStore等からサクッと作れちゃう「Launch...
画像ではない軽量CAPTCHAを実装できる「jQuery Real Person」:phpspot開発日誌
jQuery Real Person 画像ではない軽量CAPTCHAを実装できる「jQuery Real Person」。 *を使って文字を書いてそちらをベースにCAPTCHAを実装しているようです。 画像ではないため、サーバに負荷もかからず、クライアントにとっても軽量なCAPTCHA。 安全性の程は検証していませんが、簡易的に行う分にはお手軽でよさそう 関連エントリ 超簡単なゲームを遊んでCAPTCHAの代替に使える「PlayThru」
Uberから来たメールの誘導方法がうまい | IDEA*IDEA
Uberから五周年だよ、というメールが来ました。 ↑ つか、まだ5年なのにすごいな。 で、「あなたはこのぐらいUber利用しましたよ」「Uberはこの国や都市で使えますよ」的なメッセージがあって最後に出てくるのがこちら。 ↑ あなたの次の目的地はどちら？と聞かれてフォーム内でカーソルがチカチカ。 このカーソル、どうやって実現しているんだろう？とおもって調べたら「カーソルが点滅しているGIFアニメ」でした・・・なるほど。 たしかにフォームでカーソルがチカチカしていたらクリックしてなにか入力してみたくなりますよね・・・。クリックさせるうまい方法だと思ったり思わなかったり・・・。
クレジットカード入力専用フォームを実装できる「payform」:phpspot開発日誌
レスポンシブに使えるクオリティの高いサイドメニュー実装「vertical-re... 次の記事 ≫：画像・動画にリアルタイムでフィルタをかけられるjQueryプラグイン「to...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
グリッドシステムを使ったより現実的なフォーム | Bootstrapでホームページを作る - 北海道苫小牧市のホームページ制作 STUDIO KEY
フォームのインライン編集を簡単に出来る「jQuery.editable」:phpspot開発日誌
ユーザ入力をリアルタイムでバックアップしてフォーム内容を保持できる「Squirrel.js」:phpspot開発日誌
GitHub - minimaxir/big-list-of-naughty-strings: The Big List of Naughty Strings is a list of strings which have a high probability of causing issues when used as user-input data.
