フォーム送信コード
1. ソースコード分析<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換性のあるコンテンツ=ie=edge> <title>ドキュメント</title></head><body><form action=/form.html method=GET> <!-- action:フォーム送信用のアドレス --> <!-- メソッド: ポリシーの送信方法 --><div class=name> <label for=name>username</label> <input type=text name=name id=name placeholder =ユーザー名を入力してください> <!-- プレースホルダーは透明なプロンプト テキストです--></div><div class=password> <label for=password>パスワード</label> <input type=password name=password id=パスワードplaceholder=パスワードを入力してください></div><div class=sex> <label for=sex>gender</label> <input type=radio name=sex value=male>男性<input type=radio name=sex value= Female>女性</div><div class=city> <label for=city>好きな都市</label> <select name=city id=city> <option value=beijing>北京</option> <option value=shanghai>上海</option> <option value=chongqing selected >重慶</option> <!-- selected は、ページに表示するために選択されたオプションを示します--> </select></div><div class =hobby > <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=area> <textarea id=area name=areacols=30 rows=10></textarea></ div> <button>button</button><!-- フォームは送信できます--><input type=submit value=submit> <!-- フォームは送信できます--><input type=button value=button><!-- フォームを送信できません --><input type=reset value=reset><!-- フォームに入力された内容をリセットします --></form></body> < /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 メソッドの違いすべての入力タグに name 属性を追加する必要があります。そうしないと、データを正しく受信できません。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。