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

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 属性を追加する必要があります。そうしないと、データを正しく受信できません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  JavaScript の BigIn 関数の共通プロパティをまとめます

>>:  Alibaba Cloud ServerにMySQLデータベースをインストールする方法の詳細な説明

推薦する

シェル スクリプトを使用してワンクリックで MySQL 5.7.29 をインストールする方法

この記事は51CTOブログの著者wjw555の作品を参照しています。スクリプトの内容: vim イン...

Vue での親子コンポーネント通信と、sync を使用して親子コンポーネント データを同期する

目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...

JS はシンプルな todoList (メモ帳) 効果を実装します

メモ帳プログラムは、HTML + CSS + JavaScript の 3 つの主要なフロントエンド...

Web アプリ開発時間を短縮する 10 の時間を節約するヒント (グラフィカル チュートリアル)

今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...

Vueのフロントエンドとバックエンドのポートの不一致の問題を解決する

Vue のフロントエンドとバックエンドのポートが一致していませんconfig index.jsファイ...

Ubuntuのインストール Matlab2020b の詳細なチュートリアルとリソース

目次1. リソースファイル2. インストール2.1 詳細な手順2.1.1 ディスクイメージのマウント...

Vueはチャットインターフェースを実装する

この記事の例では、チャットインターフェースの表示を実現するためのVueの具体的なコードを参考までに共...

2秒以内にHTMLページ内の他のページにリダイレクトする方法

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

React 関数コンポーネントのパフォーマンス最適化のアイデアの詳細な説明

最適化のアイデア最適化には主に 2 つの方向があります。再レンダリングの回数を減らします。 Reac...

カーソル ループを使用して、MySQL ストアド プロシージャで一時テーブルを読み取る

カーソルカーソルは、結果セット内のデータを表示または処理するために使用される方法です。カーソルを使用...

Linux netstatコマンドの詳細な説明

目次Linux netstat コマンド1. TCP接続ステータスの詳細な説明2. コマンド形式3....

CentOS7.5 の MySQL8.0.19 のインストールチュートリアルの詳細な手順

1. はじめにこの記事には MySQL インストール部分のスクリーンショットがないので、ある程度の基...

ウェブデザイン研究における XHTML の応用の概要

<br />一般的に、「標準的な Web ページ」のファイル構成は XHTML CSS ...

Vue 3 で Vue Router リンクを拡張する方法

序文<router-link> タグは、Vue アプリ内のさまざまなページ間を移動するた...

vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...