HTMLのformでx-www-form-urlencodedを使用

HTMLのformでx-www-form-urlencodedを使用

HTMLのform要素でx-www-form-urlencoded形式を使用する場合、デフォルトでこの形式が適用されます。
x-www-form-urlencodedは、フォームデータがURLエンコードされて送信される形式です。
各フィールドの名前と値がペアになり、特殊文字はエンコードされて送信されます。

formのmethod属性にPOSTを設定し、enctype属性を指定しない場合、データは自動的にx-www-form-urlencoded形式で送信されます。
GETメソッドを使用する場合も、同様にデータはURLにエンコードされて送信されます。

具体的な例としては、次のようになります。

HTML (form.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Example</title>
</head>
<body>

  <form action="/submit" method="POST">
    <label for="test-name">Name:</label>
    <input type="text" id="test-name" name="name">

    <label for="test-email">Email:</label>
    <input type="email" id="test-email" name="email">

    <button type="submit">Submit</button>
  </form>

</body>
</html>

この例では、POSTメソッドを使用してデータが送信されますが、enctype属性を明示的に設定していないため、デフォルトでx-www-form-urlencoded形式になります。
送信されるデータは次のような形になります。

name=John+Doe&email=john%40example.com

name=John+Doeは、名前フィールドのデータがURLエンコードされていることを示します。

スペースは+に、特殊文字は対応するエンコード値に変換されます。

email=john%40example.comでは、@が%40にエンコードされています。

もしenctype属性を明示的に指定したい場合は、次のように書くことができます。

<form action="/submit" method="POST" enctype="application/x-www-form-urlencoded">

ただし、enctype属性を省略しても、デフォルトでx-www-form-urlencodedが使用されるため、この指定は省略可能です。

フォームの送信がサーバーでどのように処理されるかに関しては、バックエンドの言語やフレームワークによりますが、多くの場合、受信したデータはキーと値のペアとして処理されます。
これにより、サーバー側でフォームデータを簡単に取得して操作することができます。