Zenn
📝

今さら聞けないHTMLフォームの基本

2022/01/28に公開
HTML
PHP
#
フォーム
tech

雰囲気でフォーム作成してきたので、今一度HTMLフォームについてちゃんと理解しようと思い調べてみた。
MDN Web Docsを参考に備忘録です。

すべてのフォームは、<form> 要素から始まる。

htmlにはformタグが用意されています。実は、すべての属性を省略可能みたい。（したことないけど笑）
実際は少なくともaction属性とmethod属性は常に設定するはずです。

例

<form action="hogehoge.jp/hoge.php" method="post">
<p>
名前：<input type="text" name="name" size="40">
</p>
<input type="submit" value="送信"><input type="reset" value="リセット">
</p>
</form>

フォームデータの送信

属性を定義することでフォームデータの送信を設定することができます。

action 属性
→フォームで収集したデータを送信すべき場所(URL)を定義
method 属性
→データを送信するために使用するHTTPメソッド(getまたはpost)を定義

action属性

action属性は、どこにデータを送信するかを定義します。
値は相対/絶対URLでなければなりません。
データがどう送られるかは、後述するmethod属性に依存します。
（ちなみにこの属性が与えられなかった場合は、フォームが含まれているページのURLにデータが送信されるそうです。）

method属性

method属性は、どのようにデータを送信するかを定義します。
HTTPプロトコルにはこのリクエストを実行するための方法がいくつかあります。

GETメソッド

GETメソッドは、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。

https://satoriku.com/request-method/#GET

この場合、ブラウザーは空の本文を送信するので、フォームをこのメソッドで送信する場合はデータをURLの後に付加します。つまりクエリとして送信されます！

ちなみにクエリってのはこういうやつです↓

https://www.google.com/search?q=zenn&sxsrf=APq-WBtrZzTHNwrL91MV3sY_g7sYcvL-kA%3A1643607076887&ei=JHT3YaXJNdDzhwOy14x4&ved=0ahUKEwil696_odv1AhXQ-WEKHbIrAw8Q4dUDCA4&oq=zenn&gs_lcp=Cgdnd3Mtd2l6EAwyBwgjELADECcyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsANKBAhBGABKBAhGGABQAFgAYP8IaAFwAngAgAEAiAEAkgEAmAEAyAEKwAEB&sclient=gws-wiz

これはGoogleで"zenn"と検索した時のURLです。
パスはhttps://www.google.com/searchで終わってますが、?で区切られた後に「キー名=値」のセットで情報が付与されています。この?以降に付与される情報をクエリ情報と言います。

POSTメソッド

HTTPリクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。

https://satoriku.com/request-method/#POST

このメソッドを使用してフォームを送信する場合は、データが HTTPリクエストの本文の後に追加されます。

サーバー側でのデータ取得

前述のように、クライアントから送られたデータをサーバー側で取得する方法はどうかというと...
どちらのHTTPメソッドを選択しても、サーバーが受け取る文字列は、キー/値の組のリストとしてデータを取得するために解析されます。このリストにアクセスする方法は、使用する開発プラットフォームや、フレームワークに依存します。
ここではphpのみ紹介します！（自分が一番使うので...他は調べてください🙇‍♂️）

PHPの場合

ざっくりですが...

  • $_POSTグローバル変数は、POST メソッドで送信されたデータへ名前でアクセスを可能にする
  • GETメソッドで送信されたデータにアクセスするには、$_GET が使用できる

例

<?php
  $say = htmlspecialchars($_POST['say']);
  $to  = htmlspecialchars($_POST['to']);

  echo  $say, ' ', $to;
?>

$_POSTは「要素名 => 値」の連想配列なので、個々の要素値にアクセスするには$_POST['要素名']のように表します。

ファイルを送信する場合

他のデータがすべてテキストデータですが、ファイルはバイナリーデータです。
HTTPはテキストのプロトコルであるため、バイナリーデータを扱うための特別な要件があるようです。

enctype属性

この属性で Content-Type HTTP ヘッダーの値を指定できます。
既定値はapplication/x-www-form-urlencoded

使用時の要件

  • ファイルの内容はURL引数に収めることができないので、method属性をPOSTに設定する。
  • データは複数の部分に分かれ、それぞれのファイルや文字列データがフォーム本体に含められているのでenctypeの値をmultipart/form-dataに設定する。
  • ユーザーがアップロードするファイルを選択できるように、1 つ以上の<input type="file">コントロールを含める。

セキュリティ対策

最後にフォームに関する一般的なセキュリティ対策を少しだけ。

潜在的に危険な文字をエスケープ

エスケープ処理を正しく行わなかった場合、クロスサイトスクリプティングと呼ばれる脆弱性の原因になります。
注意すべき具体的な文字は、データが使用される状況や使用するサーバー基盤に大きく依存します。
注意しておくべきことは、JavaScriptやSQLコマンドといった実行可能なコードのようなキャラクターシーケンスです。

入力データの量を、必要なサイズまでしか受け入れないように制限

そういえばWordpressはデフォルトで制限されてますね。

reCAPTCHAの導入

スパム対策としてGoogleが提供しているreCAPTCHAを導入するのも手です。
無料で設置も簡単です。
https://www.google.com/recaptcha/about/

参考サイト

https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data

Discussion