Newer
Older
hello-programmer-world / src / pages / php / 030-form.mdx
@h.sakamoto h.sakamoto 7 days ago 5 KB form
---
layout: "@/layouts/MarkdownLayout.astro"
---

import Toc from "../../components/Toc.astro";

export const title = "フォームの入力を受け取る";

import DockerLink from "@/components/DockerLink.astro";
import RenderFile from "@/components/RenderFile";
import RenderHtml from "@/components/RenderHtml";

# {title}

phpの書き方がわかったところで、次は入力フォームについて学びましょう。

## TOC

## フォームを用意する

例として、以下のような懸賞を模したフォームを用意しました。

<DockerLink href="sample/php/form.html" />

```html file=public/sample/php/form.html
public/sample/php/form.html
内容を取得できませんでした
```

フォームを作成するには`<form>`タグを使います。  
この`<form>`タグにはいくつか属性がありますが、特に重要なのが`method`属性と`action`属性です。

`action`属性は、フォームのデータを送信する先を指定します。  
今回は`./submit.php`となっていて、そこに送信したデータをどうするかをプログラムすることになります。

`method`属性は、深くは触れませんがデータを使って何をしてほしいのかを大まかにサーバーに伝えるためのものです。  
この`method`属性には主に`GET`と`POST`の2つがありますが、今回は`POST`を使います。

```html "action=\"./submit.php\"" "method=\"post\""
<form method="post" action="./submit.php">
  ...

  <button type="submit">送信</button>
</form>
```

## 送信先を用意する

このセクションでは、`submit.php`を作成します。  
説明のために、このファイルがどのような考えのもとに作成されているかを順番に解説します。

### 雛形を作成する

まず、送信先の`submit.php`を作成します。  
ここでどんなデータを受け取ったかに関わらず、どのような見た目にするかを決めるための雛形を作成しています。

<DockerLink href="sample/php/form/1/submit.php" />

```html file=public/sample/php/form/1/submit.php
public/sample/php/form/1/submit.php
内容を取得できませんでした
```

### 接続を拒否してみる

この`submit.php`は、フォームから送信されたデータを受け取るためのファイルです。  
しかしブラウザなどから直接アクセスした場合、フォームからの送信ではありません。

このように、フォームからの送信ではない場合に接続を拒否するコードを追加してみます。

<DockerLink href="sample/php/form/2/submit.php" />

```html file=public/sample/php/form/2/submit.php ins={12,34-39} collapse={1-10,41-44}
public/sample/php/form/2/submit.php
```

様々な実装の方法がありますが、ここでは`if`文を使って条件分岐を行っています。

この条件に、`$_SERVER["REQUEST_METHOD"] === "POST"`という記述があります。

`$_SERVER`という、みかけない変数が出てきました。  
その中身が、`POST`であるかを確認しています。

この`POST`という文字に見覚えはありませんか?  
これは、先ほどフォームの`method`属性で指定したものです。

ちなみに直接アクセスした場合、この値は`GET`となります。

```html "method=\"post\"" file=public/sample/php/form.html {11} collapse={1-10,12-51}
public/sample/php/form.html
```

この値が`POST`であればフォームから送られてきた情報だとみなし、雛形の内容を表示しています。  
そうでなかったときの処理として、拒否する旨のHTMLを表示しています。

なお`$_SERVER`という変数は、ブラウザなどから送信された情報を格納するために、phpが用意した連想配列です。

### フォームから受け取ったデータを表示する

ただ単純に雛形を表示するだけでは、本当にフォームから送信されたデータを受け取れているか確認できません。  
実際に送られてきたデータを表示して、安心感を与えてみましょう。

<DockerLink href="sample/php/form/3/submit.php" />

```html file=public/sample/php/form/3/submit.php ins={19,23,27} collapse={1-10,41-44} /._POST.".*"./
public/sample/php/form/3/submit.php
```

今度は`$_POST`という変数が出てきました。  
これも`$_SERVER`と同様に、自動的に作成される連想配列です。  
この`$_POST`から、`name`などのキーを指定して値を取り出そうとしていることがわかります。

このキーはどこから来たのでしょうか?

それはもちろんフォームからなのですが、より具体的には、フォーム内の各入力欄の`name`属性から来ています。  
この`name`属性を持つ項目が、そのキーを使って`$_POST`から値を取り出せるようになっています。

ちなみにフォームの`method`属性が`GET`だった場合は、`$_GET`変数から取り出すことになります。

```html file=public/sample/php/form.html collapse={1-10,34-51} /name="[a-zA-Z0-9]*"/
public/sample/php/form.html
```

## まとめ

- フォームの送信先は、`action`属性で指定する
- フォームの送信方法は、`method`属性で指定し、それが`POST`の場合は`$_POST`変数から取り出すことができる