HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLフォームのmethod属性とは？getとpostの違いと使い方をわかりやすく解説

HTMLのmethod属性は、フォームから送信するデータを「どのような方法で」サーバーへ渡すかを指定するための重要な属性です。具体的には、データをURLの一部として送るか（GET）、HTTP POSTトランザクションとして送るか（POST）を選択できます。

method属性の基本構文

method属性の書き方は以下の通りです。

<form method="get | post"></form>

get を指定すると、フォームのデータはURL変数（クエリ文字列）として送信されます。一方、post を指定すると、データはHTTPリクエストのボディに含まれるPOSTトランザクションとして送られます。

  • get： 送信内容がURLに表示されるため、検索キーワードなど共有したい情報に適しています。
  • post： データがURLに現れないため、パスワードや個人情報など機密性の高いデータの送信に向いています。

実装例：HTMLフォームのmethod属性デモ

それでは、method属性を使用した実際のコード例を見てみましょう。以下のサンプルでは、名前と姓を入力するフォームをGETメソッドで送信します。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    input {
        width: 315px;
        display: block;
        margin: 1rem auto;
        border: 2px solid #fff;
        padding: 8px;
        background: transparent;
        border-radius: 20px;
        outline: none;
    }
    ::placeholder {
        color: #000;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 20px;
        width: 330px;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>HTML Form method Attribute Demo</h1>
<form action="/action_page.php" method="get">
<input type="text" name="firstname" placeholder="Enter First Name">
<input type="text" name="lastname" placeholder="Enter Last Name">
<input type="submit" value="SUBMIT" class="btn">
</form>
</body>
</html>

出力結果

HTMLフォームのmethod属性とは？getとpostの違いと使い方をわかりやすく解説

上記のようにフォームが表示されます。ここで名前（First Name）と姓（Last Name）を入力し、「SUBMIT」ボタンをクリックしてフォームを送信してみましょう。

HTMLフォームのmethod属性とは？getとpostの違いと使い方をわかりやすく解説

送信後、ブラウザのアドレスバーに注目してください。get メソッドを指定しているため、入力した値が ?firstname=○○&lastname=○○ のようなURL変数として付加されていることが確認できます。これがmethod属性の動作です。

まとめ

method属性を使いこなすことで、フォームデータの送信方法を状況に応じて制御できます。検索フォームなどには get、会員登録やログインなど機密データを扱うフォームには post を使うのが一般的なベストプラクティスです。ぜひ実際にコードを書いて、両者の違いを体感してみてください。

  1. HTMLのnovalidate属性とは？フォームのバリデーションを無効化する方法

    HTMLのnovalidate属性は、フォームを送信する際に入力データの検証（バリデーション）を行わないことを指定するための属性です。通常、required属性やtype=emailなどが設定された入力フィールドは、送信時にブラウザによって自動的にチェックされますが、form要素にnovalidate属性を付与すると、これらの組み込みバリデーションがすべて無効化されます。 この属性は論理属性（ブール型属性）のため、値を指定せずに記述するだけで機能します。JavaScriptから動的に追加・削除することも可能です。 構文 novalidate属性の基本的な記述方法は以下のとおりです。 <f

  2. HTMLフォームのaction属性とは?使い方とサンプルコードをわかりやすく解説

    HTMLのaction属性は、フォームが送信されたときに、入力データをどのURLへ送るかを指定するための属性です。フォームを作成するうえで最も重要な属性の一つであり、データの送信先となるサーバーサイドのスクリプト(例：PHPファイルなど)を指定します。action属性の基本構文action属性の基本的な書き方は以下のとおりです。<form action=URL></form>action属性の値には、絶対URLまたは相対URLを指定できます。ここで指定したURLに対して、フォームに入力されたデータが送信されます。HTMLフォームaction属性の使用例それでは、実際にa