サンプルアプリはこちらです。 mockサーバーの起動が必要なので、注意してください。デプロイしているサンプルアプリは、サーバーとの通信をしないので、注意してください。 https://github.com/sadnessOjisan/Form-Museum
サーバーサイドのバリデーションを自動的に表示するようにVue.jsで実装されたフォームのコンポーネントを紹介します。 ベーシックなフォームをはじめ、ファイルアップロード、ドロップゾーンなど、最近よく利用されるフォームのコンポーネントが揃っています。
更新:2016/8/28 こんにちは。ブログに問い合わせフォームは設置してますか? このブログでは、Googleフォームで作った、問い合わせフォームを埋め込んでいました。 問い合わせは多くないので、それほど不満はなかったのですが、いちいちGoogleフォームを開かないと内容が見れないのは面倒でした。 そんな時見つけたのがTayori。その辺りの不満は解消、その他も便利なので紹介します。 コミュニケーションが簡単なので問い合わせ対応が楽しみになる 問い合わせが来た場合、メールに通知。管理画面に入ると返信をすることができます。 Googleフォームだったときは返信するタイミングで、自分のメールアドレスから送信(開示)しなくてはならなかったが、Tayoriは管理画面から送信できる。もちろん相手に届くメールアドレスもTayoriのものだ。 手順も簡単。返事を書いて、送信するだけ。テンプレ回答を作っ
なんとなくでも、Dockerfileは作れてしまいますが、オプションを正しく理解したいと思いマニュアルを参考に、使える命令を整理してみます。 公式マニュアル https://docs.docker.com/reference/builder/ 基本的な形式 Dockerfileは、主に下記のような形式で記述します。 # コメント行 INSTRUCTION arguments INSTRUCTION → 命令 arguments → 引数 命令 以下でDockerfileで使える命令について説明していきます。 FROM FROMはコンテナのベースイメージを指定します。 Dockerfileの中で、コメントを除いた最初の命令として記述する必要があります。 imageにはDockerHubで公開されているイメージを指定します。 ローカルで作成したものも指定もできます。 パターン1 FROM <i
※追記: fields_forにかんして、新しくこちらの記事にまとめたので是非一緒に参照してください。 form_tagとform_forの使い分け Railsにおけるformを理解するために、最初に理解すべきなのがこの違いです。 Railsのform_for/form_tagの分け方の意図としては、 form_for: 任意のmodelに基づいたformを作るときに使う form_tag: modelに基づかないformを作るときに使う ということです。 つまり、あるuserモデルに基づいたuserを作成するときはform_forを使い、 そうではなく、検索窓のような何のモデルにも基づかないformを作りたいときはform_tagを使うのが原則です。 具体的に何が違って、その用途はどう分かれているのか。 結論としてform_forはモデルオブジェクト扱う上で便利 post先のurlは不要
はじめに Angular JS で複数のコントローラ間でモデル(状態や値)を共有する方法として、次の 3 種類を解説します。 モデルを共有するサービスを使用する (Shared Service)。 親コントローラのスコープを子コントローラで共有する (Parent Scope Sharing)。 イベントを利用する (Pub/Sub)。 Shared Service 複数のコントローラ間で共有するモデルをサービスとして作成し、そのサービスを複数のコントローラで参照します。 実装例を示します。 <!DOCTYPE HTML> <html ng-app="AngularJsStudy"> <head> <title>Shared State Service - AngularJS Study</title> <meta charset="utf-8" /> <meta http-equiv="
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 1.発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを(多分)見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの?と思ったのが、作ったそもそもの発端です。 2.半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
ベトナムにおけるBacklog活用のリアル ベトナムにおけるBacklog活用のリアル backlog Backlog の Amazon EKS クラスターを Blue-Green アップデートするためにやっていること Backlog の Amazon EKS クラスターを Blue-Green アップデートするためにやっていること backlog 2023年最も素晴らしいプロジェクトを表彰!Good Project Awardを開催しました 2023年最も素晴らしいプロジェクトを表彰!Good Project Awardを開催しました backlog Backlog開発者が夫婦の不和をなくす家庭管理アプリを作ってみた話 Backlog開発者が夫婦の不和をなくす家庭管理アプリを作ってみた話 backlog 創業からもうすぐ80年の老舗企業!ミートボールでおなじみの石井食品様で、プロジェクト
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
checkboxesとradioボタンをスタイリングするjQueryのプラグインです。カスタマイズ性に優れており、使い方も手軽そうだったので備忘録的にご紹介します。 よくあるプラグインですけど、使いやすそうだったのでメモ。 checkboxesとradioボタンをスタイリングするライブラリ。IE7にも対応しています。 かわいい。 スタイルは最初からいろいろと用意されていますのでカスタマイズの参考にもなりますね。 コード <script src="jquery.js"></script> <script src="jquery.icheck.js"></script> コアとプラグインを読み込みます。 $('input').icheck(); 初期化します。 $('input').icheck({ handle: '', // 'checkbox'か'radio'とすればどちらかに限定できる
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
ニーハオ!カヤックのHTMLファイ部のしんちゃんアル! 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中! こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです! 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように! 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に! バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう! これら一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く