HTMLでのフォーム送信の実装

フォーム送信コード

1. ソースコード分析

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
</head>
<本文>
<フォームアクション="/form.html" メソッド="GET">
    <!-- action: フォームが送信されるアドレス-->
    <!-- method: 保険証券を提出する方法 -->
<div クラス="名前">
    <label for="name">ユーザー名</label>
    <input type="text" name="name" id="name" placeholder="ユーザー名を入力してください">
    <!-- プレースホルダーは透明なプロンプトテキストです -->
</div>
<div class="パスワード">
    <label for="password">パスワード</label>
    <input type="password" name="password" id="password" placeholder="パスワードを入力してください">
</div>
<div class="sex">
    <label for="sex">性別</label>
    <input type="radio" name="sex" value="male">男性<input type="radio" name="sex" value="female">女性</div>
<div class="city">
    <label for="city">お気に入りの都市</label>
    <名前を選択="都市" id="都市">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="chongqing" を選択 >重慶</option>
        <!-- selected は、選択されてページに表示されているオプションを示します -->
    </選択>
</div>

<div class="趣味">
        <label for="hobby">趣味</label>
        <input type="checkbox" name="hobby" value="read">読書<input type="checkbox" name="hobby" value="flower">フラワーアレンジメント<input type="checkbox" name="hobby" value="sing">歌<!-- オプション名はすべて同じである必要があります-->
</div>
<div class="エリア">
    <textarea id="area" name="area" cols="30" rows="10"></textarea>
</div>
<button>ボタン</button>
<!-- フォームを送信できます -->
<input type="submit" value="submit"> 
<!-- フォームを送信できます -->
<input type="button" value="button">
<!-- フォームを送信できません -->
<input type="reset" value="reset">
<!-- フォームにすでに入力されている内容をリセットします -->

</フォーム>
</本文>
</html>

2. 端末操作

ターミナルgitbashを開き、htmlが配置されているフォルダに切り替えます。

コマンドライン http-server を使用して静的サーバーを開くと、開いた後に 2 つの IP アドレスが表示されます。 127.xxx はローカルアクセスアドレス、125.xxx は LAN アクセスアドレスです (ここでの前提は、nodejs がインストールされ、http-server サーバーが npm でインストールされていることです)

ブラウザで HTML ファイルを開きます。ローカルファイルアドレスを http://127.0.0.1:8080 に置き換えます。

フォームから送信された情報を確認するには、Check-network-headerをクリックしてください。

3. getメソッドとpostメソッドの違い

Get は & を使用して送信されたデータを URL に連結し、それが URL オブジェクト内のクエリの内容になります。しかし、投稿のURLは非常にきれいです
送信されるデータの量は異なります。Get は最大 1k のデータを送信できます。ブラウザの制限を超えると、データは切り捨てられます。理論上は投稿数は無制限ですが、サーバーの制限によります
get によって送信されたデータはブラウザの履歴に保存されるため、安全ではありません。
get は「欲しい」という意味で、post は「与える」という意味です

4. 注意事項

すべての入力タグに name 属性を追加する必要があります。そうしないと、データを正しく受信できません。