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データベースをインストールする方法の詳細な説明

推薦する

Linux システムで PATH 環境変数を設定する方法 (3 つの方法)

1. Windows システムでは、JDK のインストールなど、多くのソフトウェアのインストールで...

Ubuntu 20.04でルートアカウントを有効にする方法

Ubuntu 20.04 をインストールした後、デフォルトでは root アカウントのログイン権限が...

Vueは3段階のナビゲーション表示と非表示を実装します

この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...

Reactでコンポーネントを作成する方法

目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...

MySQL 接続数を設定する方法 (接続数が多すぎる)

mysql使用中に接続数が超過していることが判明しました~~~~ [root@linux-node...

Linux でログインタイムアウト後に非アクティブなユーザーを自動的にログアウトする

方法1: .bashrcまたは.bash_profileファイルを変更するこれは、ホーム ディレクト...

Kubernetes を使用して Springboot または Nginx をデプロイするための詳細なチュートリアル

1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...

MySQL パスワードに特殊文字が含まれている場合とコマンドラインからログインする場合

サーバーでは、データベースにすばやくログインするために、通常は mysql -hhost -uuse...

CSS3はシームレスなスクロールと手ぶれ防止を実現します

質問画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモ...

Linuxターミナルでファイルを作成する2つの一般的な方法を簡単に理解する

mkdir コマンドを使用して新しいディレクトリを作成できることは誰もが知っていますが、多くの場合、...

Docker stopはすべてのコンテナを停止/削除します

この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...

Node.js の TCP 接続処理のコア プロセス

数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...

WeChatアプレットタブの左右スライドスイッチ機能実装コード

効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...

MySQL InnoDB のトランザクション特性を確保するにはどうすればよいですか?

序文「データベース トランザクションの特徴は何ですか?」と尋ねられたら、 ACID 特性である原子性...

CocosCreatorプロジェクト構造の仕組みの詳細な説明

目次1. プロジェクトフォルダ構造1. アセットフォルダ2. 図書館3. ローカル設定(ローカル) ...