diff --git a/docs/3-golden-week/06-form/index.md b/docs/3-golden-week/06-form/index.md
index 80ad843ce..f20b26787 100644
--- a/docs/3-golden-week/06-form/index.md
+++ b/docs/3-golden-week/06-form/index.md
@@ -12,12 +12,83 @@ import OpenInCodeSandbox from "@site/src/components/OpenInCodeSandbox";
入力した内容によって、次に移る（表示される）ページが異なるウェブページがあるが、入力した内容によって異なるウェブページが表示されるよう、入力した内容が移った先のページのURLに反映されている。URLのうち、入力した内容が反映されている部分をクエリパラメータという。
-例：google.comで、検索エンジンに何か入力して、検索すると、検索結果が表示されるが、そのページのURLに注目。（下画像赤線がクエリパラメータ）
+例：google.comで、検索エンジンに何か入力して、検索すると、検索結果が表示されるが、そのページのURLに注目。（下画像赤線がクエリパラメータ）
+
+
+以下が上記サイトのURL
+[https://www.google.com/search?q=utcode&sxsrf=APq-WBv6kgtDWiq8hT6wfFdMPw4M5qWnNQ%3A1647830270847&source=hp&ei=_uQ3YrnJMY-F0wTg65qgDg&iflsig=AHkkrS4AAAAAYjfzDslMMqbHckba3h4_maDN03TFTmoX&oq=&gs_lcp=Cgdnd3Mtd2l6EAMYATIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJ1AAWABg4wpoAXAAeACAAQCIAQCSAQCYAQCwAQo&sclient=gws-wiz](https://www.google.com/search?q=utcode&sxsrf=APq-WBv6kgtDWiq8hT6wfFdMPw4M5qWnNQ%3A1647830270847&source=hp&ei=_uQ3YrnJMY-F0wTg65qgDg&iflsig=AHkkrS4AAAAAYjfzDslMMqbHckba3h4_maDN03TFTmoX&oq=&gs_lcp=Cgdnd3Mtd2l6EAMYATIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJ1AAWABg4wpoAXAAeACAAQCIAQCSAQCYAQCwAQo&sclient=gws-wiz)
+
+URLの末尾に `?key1=value1&key2=value2&...` の形式でクエリパラメータを記載できる。
+expressでは `request.query` オブジェクトに格納される。
+
+```javascript title="script.js"
+const express = require("express");
+
+const app = express();
+app.get("/", (request, response) => {
+ response.send(JSON.stringify(request.query));
+});
+app.listen(3000);
+```
+
+:::tip JSON.stringifyメソッド
+`JSON.stringifyメソッド`はオブジェクトをJSON形式の文字列に変換するメソッド。
+:::
+
+:::tip URLとして使用できない文字の対処方法
+URLとして使用できない文字（日本語文字など）は[URLエンコード](https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%82%BB%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)する必要がある。JavaScriptなら `encodeURIComponent` 関数で変換できる。
+
+```javascript
+encodeURIComponent("日本語") // "%E6%97%A5%E6%9C%AC%E8%AA%9E"
+```
+:::
## サーバーにデータを送信する
form要素を使うとユーザーの入力からクエリパラメータを生成してページ遷移できる。
-・ formのaction属性: フォーム送信時に移動し、データを送信するページ
-・input要素: テキストボックス
-・inputのname属性: クエリパラメータのキー
-・button要素: form内のボタンをクリックするとformのactionに指定したページに遷移する（送信ボタンになる）
\ No newline at end of file
+- formのaction属性: フォーム送信時に移動し、データを送信するページ
+- input要素: テキストボックス
+- inputのname属性: クエリパラメータのキー
+- button要素: form内のボタンをクリックするとformのactionに指定したページに遷移する（送信ボタンになる）
+
+以下のコードの、htmlファイル（staticディレクトリ内に作る）と、jsファイルを作成し、実行してみよう。
+```html title="index.html"
+
+
+
+
+ フォーム
+
+
+
+
+
+```
+```javascript title="sever.js"
+const express = require("express");
+
+const app = express();
+app.use(express.static("static"));
+app.get("/send", (request, response) => {
+ response.send(
+ `あなたの名前は${request.query.name}で、${request.query.age}歳ですね。`
+ );
+});
+app.listen(3000);
+```
+
+上記コードを実行すると、以下のような画面がブラウザに表示される。
+
+
+以下のように入力して、送信ボタンをクリックすると、
+
+
+[http://localhost/3000/send](http://localhost/3000/send)に移り、以下のような画面が表示される。
+
+
+このページのURLを見てみよう。特に、クエリパラメータの部分に注目。
+
\ No newline at end of file
diff --git "a/docs/3-golden-week/06-form/\343\202\257\343\202\250\343\203\252\343\203\221\343\203\251\343\203\241\343\203\274\343\202\277.png" "b/docs/3-golden-week/06-form/\343\202\257\343\202\250\343\203\252\343\203\221\343\203\251\343\203\241\343\203\274\343\202\277.png"
new file mode 100644
index 000000000..9a73adbfa
Binary files /dev/null and "b/docs/3-golden-week/06-form/\343\202\257\343\202\250\343\203\252\343\203\221\343\203\251\343\203\241\343\203\274\343\202\277.png" differ
diff --git "a/docs/3-golden-week/06-form/\343\202\257\343\202\250\343\203\252\343\203\221\343\203\251\343\203\241\343\203\274\343\202\277\344\276\2132.png" "b/docs/3-golden-week/06-form/\343\202\257\343\202\250\343\203\252\343\203\221\343\203\251\343\203\241\343\203\274\343\202\277\344\276\2132.png"
new file mode 100644
index 000000000..991acc096
Binary files /dev/null and "b/docs/3-golden-week/06-form/\343\202\257\343\202\250\343\203\252\343\203\221\343\203\251\343\203\241\343\203\274\343\202\277\344\276\2132.png" differ
diff --git "a/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256URL.png" "b/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256URL.png"
new file mode 100644
index 000000000..67f78a67f
Binary files /dev/null and "b/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256URL.png" differ
diff --git "a/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256\344\276\213\342\221\240.png" "b/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256\344\276\213\342\221\240.png"
new file mode 100644
index 000000000..bb1ffa124
Binary files /dev/null and "b/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256\344\276\213\342\221\240.png" differ
diff --git "a/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256\344\276\213\342\221\241.png" "b/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256\344\276\213\342\221\241.png"
new file mode 100644
index 000000000..fe0fbe707
Binary files /dev/null and "b/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256\344\276\213\342\221\241.png" differ
diff --git "a/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256\344\276\213\342\221\242.png" "b/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256\344\276\213\342\221\242.png"
new file mode 100644
index 000000000..371cd5b02
Binary files /dev/null and "b/docs/3-golden-week/06-form/\343\203\225\343\202\251\343\203\274\343\203\240\343\201\256\344\276\213\342\221\242.png" differ