HTMLのformでmethodにputを指定

HTML

HTMLのformでmethodにputを指定

HTMLのformタグでmethodにPUTを指定する方法について説明します。
HTMLのform要素は通常、GETまたはPOSTメソッドを使用してデータをサーバーに送信します。
しかし、HTTPメソッドの中にはPUTやDELETEなどもあり、これらを利用するには特別な設定が必要です。

基本的なフォームの設定

HTMLのform要素でmethodにPUTを指定するためには、HTML標準だけでは直接PUTメソッドを使用することはできません。
HTMLのform要素は、GETとPOSTメソッドに対応しており、PUTやDELETEは対応していません。
しかし、以下の方法で実装することができます。

JavaScriptを利用した方法

PUTメソッドを使いたい場合、通常はJavaScriptを利用してHTTPリクエストをカスタマイズします。
以下に、PUTリクエストを送信するためのHTMLとJavaScriptの例を示します。

HTMLファイル (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PUTメソッドのフォーム</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>PUTメソッドを使用したフォーム</h1>
  <form id="putForm">
    <label for="data">データ:</label>
    <input type="text" id="data" name="data" required>
    <button type="submit">送信</button>
  </form>
  <script src="script.js"></script>
</body>
</html>
JavaScriptファイル (script.js)
document.getElementById('putForm').addEventListener('submit', function(event) {
  event.preventDefault(); // フォームのデフォルトの送信を防ぐ

  const formData = new FormData(this);
  const data = new URLSearchParams(formData).toString();

  fetch('/your-endpoint', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: data,
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
});

詳細な説明

1. HTMLフォーム:
id="putForm"というIDを持つform要素を作成します。
フォーム内にはユーザーからデータを入力するためのinput要素と、送信ボタンがあります。

2. JavaScriptでの処理:

  • フォームのsubmitイベントをリッスンし、デフォルトの送信動作を防ぎます（event.preventDefault()）。
  • フォームデータをFormDataオブジェクトを使って取得し、URLSearchParamsを使ってURLエンコードされた文字列に変換します。
  • fetch APIを使用して、PUTメソッドでデータを送信します。

headersにはContent-Typeを指定し、リクエストボディには変換したデータをセットします。

このように、JavaScriptを使ってPUTメソッドを実現することで、HTMLフォームからPUTリクエストを送信することができます。
HTML標準では直接PUTメソッドを指定することはできませんが、JavaScriptを駆使することで、要求される機能を実現できます。