[B! form] koda3のブックマーク

あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方

フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム

koda3 2017/11/21

リンク

フロントサイドのバリデーションにはvalidatorjsが便利 - Qiita

Webフォームのバリデーションをするのって面倒ですよね。どうせサーバサイドでバリデーションするのに…。といいつつも、利用者を苛つかせないためにも、無駄な通信を減らすためにもフロントサイドのバリデーションは重要です。何か良いライブラリが無いかなと思ってgithubを漁っていたら、良さげなライブラリを見つけました。 validatorjs "A data validation library in JavaScript for the browser and Node.js, inspired by Laravel's Validator."とあるとおり、LaravelのValidatorに似た感じになっているのが特徴です。 Laravelといえば、JSはreact.jsではなくてvue.jsだろうということで、Vueのコンポーネントでのサンプルです。(CSSはBootstrap) もちろ

koda3 2017/03/13

リンク

【Tips】ただただフォーム最適化をまとめたチートシート的なもの - Qiita

概要主に「2016年 - 2017年」の記事から引っ張ってきて、ただただ羅列したものです。なので、このまとめ自体の最適化が成されてないですが、そこはご容赦ください… ユーザビリティ・アクセシビリティ分かりやすさ入力項目は必要最低限にする項目名は簡潔で短く分かりやすいものにするできる限り入力フィールドの数は最小限にする一つの項目の入力フィールドを複数に分けない例：姓名、電話番号、郵便番号など必須項目は、「＊」ではなく「必須」と表示するラベルやヒント（○文字以上必要です）をplaceholderに設定しないフォーカスした際に消えてしまうため、入力例を入れてあげる程度にするフォーカスした際の入力フィールドのデザインを変える入力フィールドのサイズは、入力される値に合わせるリアルタイムでチェック出来るバリデーションを実装するエラーメッセージは、上部にすべて表示するのでは

koda3 2017/02/03

form

リンク

HTML Interactive Form Validation

Creating forms in HTML has always been complicated. You first need to write the correct markup, then you need to make sure each field has a valid value before submitting, and finally you need to inform the user when there is a probl em. Thankfully, new features were introduced in HTML5 to make this a lot easier. In particular, the form controls were extended to support constraints, allowing the bro

koda3 2016/12/13

リンク

[JavaScript]HTML5 Form Validationの制御と注意事項

##概要 HTML5から支援しているForm Validation、皆さんご存知ですよね。非常に便利ですし、自分もHTML5に感謝しています。👏 サーバでは常にデータを検証するべきですが、追加のデータ検証をWebページ自身で行うことにも多くの利点があります。ユーザがフォームに入力している間にデータを検証することで、ユーザは何らかのミスをしたことを直ちに知ることができます。これはユーザが HTTP のレスポンスを待つ時間を減らし、またサーバで誤ったフォーム入力を扱うことがないようにします。詳しい内容は以下の記事をご参考してください。 🔗[JavaScript]HTML5 Form Validation しかし、ドンー (OA O; ) ブラウザー別にメッセージが統一されず、実際の案件には、デメリットになっちゃったんです。やっぱりHTML5 Form Validationに完全に依存

koda3 2016/09/06

html
form

リンク

CVRアップにこれが効く！フォーム検証jQueryプラグイン10本をサンプルで徹底比較

エラーメッセージや、入力サポートメッセージの表示は、ユーザーにメリットがあるだけではなく、フォームでの離脱を防ぎます。jQueryで簡単に実装、カスタマイズできるプラグインを中心にサンプルコード付きでまとめました。 HTML5では新しいform属性が導入され、ブラウザーがフォームのバリデーションを直接実行できるようになりました。基本的なフォームバリデーションは、この記事に書かれているようなプラグインを使わなくても、CSS3とJavaScriptで実現できます。とはいえ、HTML5を使ったフォームバリデーションには次のような制限があります。エラーメッセージについてはブラウザーに任されており、自分で設定できるのは入力フィールドのタイトルのみ。エラーメッセージのスタイルはカスタマイズできない。入力フィールドのパターンは自分で作成しなければならない。次の10個のjQueryフォームバリデー

koda3 2016/08/26

jquery
form

リンク

フリガナ自動入力を簡単に設置出来るjQueryプラグイン - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ

フォーム入力を楽にするフリガナ自動入力 ECサイトで買い物や問い合わせ、会員登録などのフォーム入力をする際に、「フリガナ」の入力が必要になる場合があります。出来るだけフォーム入力の手間をなくし、離脱率を減らすよう工夫が必要ですが、今回はフォーム入力をした際に名前の漢字に合わせたフリガナを自動で入力するjQueryプラグインをご紹介します。名前を入力すればフリガナを自動入力できるjquery.autoKana.js 実装にはjquery.autoKana.jsというプラグインを使用します。ダウンロードは以下より。 GitHub – harisenbon/autokana: Library for automatically rendering Furigana for inputted Japanese Text 設置方法は以下の通りです。 ①jQueryライブラリを読み込みまずはj

koda3 2016/03/23

jquery
form

リンク

今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。自動入力機能に対応しよう Google Chrome（デスクトッ

koda3 2016/03/10

リンク

フロントエンドコーディングのみで簡単にセキュアなお問い合わせフォームが作れるようになりました | Milkcocoa Engineers' Blog

Webページへのコード貼り付け ※追記(2016-02-18)：CDNから読み込むJavaScriptのコードを修正しました（ファイル名も変えています、contactf orm.min.js→milkform.min.js）。具体的にはsubmit()関数を使って送信するタイミングを自分で決められるようにしました。 milkcocoa.jsとmilkform.jsをCDNから読み込んで、formタグにmilkform属性を含ませ、JavaScript内でvar milkform = new MilkForm('あなたのapp_id');と書けば利用開始できます。milkform.submit()でデータの送信が出来て、ロード時、送信成功時、失敗時のコールバックも設定できます。 <form milkform> <input type="text" name="e-mail"> <input t

koda3 2016/02/12

リンク

さいきょうの二重サブミット対策 - Qiita

この記事はシステムエンジニア Advent Calendar 2015 - Qiitaの記事です。弊社アーキ部で@kawasimaさんに教えてもらったさいきょうの二重サブミット対策について書いていきます！二重サブミットが発生するケース不正な更新リクエストが発生するケースとして、以下のものが考えられます。サブミットボタンをダブルクリックする戻るボタンで戻って、再度保存ボタンを押す完了ページでブラウザリロードする CSRF攻撃による不正な更新リクエスト 1. サブミットボタンをダブルクリックする確定ボタンをダブルクリックすることによって、ユーザが意図していないリクエストが発生してしまうケース。 2. 戻るボタンで戻って、再度保存ボタンを押す処理完了画面から戻るボタンで前の画面に遷移し、再び確定ボタンを押すケース。本来は入力➡︎確認➡︎完了の画面遷移が適切だが、その画面遷移にな

koda3 2015/12/23

CSRF
form

リンク

jQuery formBuilder - jQueryによる動的フォームが作成

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しましたマーケターの人たちはアンケートフォームを数多く作成します。そんな時に一回一回プログラマに依頼して作成してもらうのでは時間もかかりますし面倒です。そこで使ってみたいのがjQuery form Builderです。jQuery form Builderを使えば自由にフォームが作れるので、後はそのデータを保存できるようにすればいいだけです。 jQuery form Builderの使い方 jQuery form Builderのデモサイトです。項目は自由にドラッグ&ドロップできます。編集で細かいところを直せます。リストなどは項目を設定できます。実際のレンダリング結果を確認できます。 jQuery form Builderは汎用的なフォームができますので、後はそのデータをJSONなりでまとめ

koda3 2015/12/20

jquery
form

リンク

スクリーンショットで振り返る・はてなブログ記事編集画面デザインの歴史 - Hatena Developer Blog

※この記事は、はてなデベロッパーアドベントカレンダーの4日目です。前日はこの記事でした。はてな×ドワンゴ合同ハッカソン@京都イベントレポート！ - Hatena Developer Blog こんにちは。id:ueday です。はてなブログのリードデザイナーをしています。早いもので12月ですね。はてなブログは先日11月7日に4周年を迎えました。この4年間のうちに様々な新機能や改善をリリースしてきましたが、そのなかでも特に「記事編集画面（以下、編集画面）」はローンチ当初から継続して改善に取り組んできました。はてなブログは「書きたい人のためのブログサービス」というポリシーで運営しており、それが最もよく現れるのが編集画面なのです。私ははてなブログのプロジェクト初期から4年間ずっと開発に参加してきたため、開発時に撮った古いスクリーンショットも残っています。この記事では、それらのスクリーンシ

koda3 2015/12/04

リンク

ドラッグアンドドロップで簡単にフォームを作れるjQueryプラグイン

ドラッグアンドドロップでフォームを作れるWebサービスはたくさんあるんですが、フォームを設置するjQueryプラグインはそんなにないですよね。そんなわけで今回はそんなD&Dでフォームを作れるようにするためのプラグインのご紹介です。こういうのを実装できます。ドラッグアンドドロップでフォームを組み立てる。編集は超らくちん。 View XMLをクリックすればそのまま使えるコードがでてきます。実際は触ってみるのが一番わかり易いと思います。 jQuery form Builder | Drag & Drop Form Creation ダウンロード後、圧縮ファイルを解凍して、demoフォルダの中のindex.htmlを、コーダーで開いてみましょう。大体の仕様はその中を見ればほぼわかると思いまうs。

koda3 2015/11/28

リンク

お申し込みを1割増やしたフォーム改善の話

http://pepabo.connpass.com/event/14124/ お申し込みを1割増やしたフォーム改善の話Read less

koda3 2015/11/19

リンク

jquery不要！CSS3アニメーションで入力フォームに動きをいれてみた | Neganin(ネガニン)

CSS3アニメーションを採用できる案件が増えてきたので、最近はjqueryを使用することが少なくなってきました。今回は入力フォームにjQueryを使わずにアニメーションを取り入れてみたいと思います。フォームにデフォルトで付いているCSSのリセットも含めながら説明させて下さい。まずは、デモをご覧ください。 2. HTML 予めアニメーションさせたい「input」「textarea」「ラジオボタン」にclassを付けていきます。 <form> <div> <p><span class="ate1">必須</span>名前：</p> <p><input type="text" name="name" class="input_text" placeholder="名前"></p> </div> <div> <p><span class="ate1">必須</span>E-mail：</p> <

koda3 2015/05/06

design
form

リンク

フォーム周りで覚えておくと便利なCSS Snippets - NxWorld

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。各要素のデフォルトスタイルを削除フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ