フォーム送信コード 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メソッドの違い
4. 注意事項 すべての入力タグに name 属性を追加する必要があります。そうしないと、データを正しく受信できません。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: JavaScript の BigIn 関数の共通プロパティをまとめます
>>: Alibaba Cloud ServerにMySQLデータベースをインストールする方法の詳細な説明
この記事は51CTOブログの著者wjw555の作品を参照しています。スクリプトの内容: vim イン...
目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...
メモ帳プログラムは、HTML + CSS + JavaScript の 3 つの主要なフロントエンド...
今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...
Vue のフロントエンドとバックエンドのポートが一致していませんconfig index.jsファイ...
目次1. リソースファイル2. インストール2.1 詳細な手順2.1.1 ディスクイメージのマウント...
この記事の例では、チャットインターフェースの表示を実現するためのVueの具体的なコードを参考までに共...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
最適化のアイデア最適化には主に 2 つの方向があります。再レンダリングの回数を減らします。 Reac...
カーソルカーソルは、結果セット内のデータを表示または処理するために使用される方法です。カーソルを使用...
目次Linux netstat コマンド1. TCP接続ステータスの詳細な説明2. コマンド形式3....
1. はじめにこの記事には MySQL インストール部分のスクリーンショットがないので、ある程度の基...
<br />一般的に、「標準的な Web ページ」のファイル構成は XHTML CSS ...
序文<router-link> タグは、Vue アプリ内のさまざまなページ間を移動するた...
バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...