その設計をもとに、今回から実際にプログラミングをしていきましょう。 プログラミングをするときには、「おすすめテキストエディタ5選」で紹介したようなエディタが必要になります。無料版のツールでも大丈夫です。Windows環境であれば「サクラエディタ」、Macであれば「CotEditar」でも構いません。 今回は「入力したデータをデータベースに登録するまで」を構築しましょう。 データ登録の仕組み データ登録の仕組みは下記のような形です。 また、入力フォーム画面の表示、POST送信先などは全てindex.phpに集約させます。 index.phpにアクセスした際に、フラグによって処理を変更する形です。 ひとつずつ作っていきましょう。 入力画面のHTMLを用意する まずは送信したい値を入力する、入力フォームを用意しましょう。 要件にそって必要な入力項目を用意します。これはHTMLソースで用意し、vi

こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは

おはこんばんにちは、はるです。 LPなどでよく見かける縦長のサイトで、各セクションが画面いっぱいに広がるページを、プラグインで簡単に作る方法を紹介したいと思います。 今回の記事では、このようなベースを作成していきます。 Scrollifyについて デモサイト：https://projects.lukehaas.me/scrollify/ github：https://github.com/lukehaas/Scrollify 利用するのは、「Scrollify」というプラグイン。 デモサイトにあるような、各セクションごとにひっつくようなレイアウトを簡単に制作できます。セクションで画面の高さを超える場合、そのセクション内でスクロールができるようにしてくれるのが特長です。 githubの履歴からわかるように、リリースが2014年と新しくなはいプラグインですが、他のものと比べ使いやすかったため、

こんにちは、はっちゃんです。 今回はinfobox.jsの使い方をご説明します。 Google Mapをサイトに埋め込む際、Google Mapから取得できるURLで iframe として表示させるのではなく、スタイルやピンの画像を自由にカスタマイズできる「Google Maps JavaScript API v3」を使用することが多いですよね。 デフォルトのメソッド、InfoWindowの使い方 生成したDOMは、InfoWindowのオプションから、contentをvalueに設定するだけで簡単に表示できます。 See the Pen infowindow by k_hatsushi (@hatsushi_kazuya) on CodePen. ですが、たとえば「枠の色を変えたいなー」と思っても、従来のInfoWindowメソッドを使用して作ったDOMだと、枠の内側にもうひとつ枠が生成

今回やりたいこと（前回の続き） 不正な入力値のとき、エラー内容をリアルタイムに表示させる 各項目の入力内容を見て、送信ボタンの非活性/活性を都度切り替える 前回は、HTML5から追加された、フォームのバリデーションに関する機能をおさらいしました。今回は、JavaScriptからフォームの要素にアクセスして、バリデーションの制御を行います。 不正な入力値のとき、エラー内容をリアルタイムに表示させる まずは、やりたいことの1つ目からみていきます。 「不正な入力値のとき、エラー内容をリアルタイムに表示させる」ためには、フォームの変更を都度検知できるようにする必要がありますね。 JavaScriptでフォームの変更を検知する JavaScriptでフォームの変更を検知するサンプルを用意してみました。 サンプルでは、form要素にchangeイベントとinputイベントの2つのイベントをつけています