HTMLフォームのいくつかの送信方法の概要

HTMLフォームのいくつかの送信方法の概要
最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを参照してください。

コードをコピー
コードは次のとおりです。

<フォーム名=”フォーム” メソッド=”投稿” アクション=”#">
<input type=”submit” name=”submit” value=”送信”">
</フォーム>

もう一つの一般的な方法は、画像を使用することです。

コードをコピー
コードは次のとおりです。

<フォーム名=”フォーム” メソッド=”投稿” アクション=”# ">
<input type=”画像” name=”送信” src=”btnSubmit.jpg”>
</フォーム>

3 番目の方法は、JavaScript DOM モデルを使用してリンクを使用してフォームを送信することです。

コードをコピー
コードは次のとおりです。

<フォーム名=”フォーム” メソッド=”投稿” アクション=”#”>
<a href="javascript:form.submit();">送信</a>
</フォーム>

このメソッドは実際には JavaScript 関数を呼び出します。JavaScript 関数を使用してフォームを送信するには、多くの柔軟な方法があります。たとえば、任意のタグの onclick イベントに追加できます。

コードをコピー
コードは次のとおりです。

<フォーム名=”フォーム” メソッド=”投稿” アクション=”#”>
<div onclick="javascript:form.submit();">
<span>送信</span>
</div>
</フォーム>

しかし、フォームに複数の送信ボタンが必要な場合はどうすればよいでしょうか?
たとえば、フォーム内の送信ボタンは、異なる処理ページを指します。フォーム データの処理ページはフォームの定義時に決定されているため、フォームに複数の送信ボタンを配置するだけでは、目的の結果は得られません。これには JavaScript が必要です。
まず、関数を定義します。

コードをコピー
コードは次のとおりです。

<スクリプト言語=javascript>
関数クエリ(){
フォームに以下の内容を入力します。
フォームを送信します。
関数更新(){
フォームに「update.php」と入力します。
フォームを送信します。
</スクリプト>

JavaScript を通じてフォームの action 属性の値を変更することで、異なる機能を持つ複数の送信ボタンを実装できます。ページ上のコードは次のとおりです。

コードをコピー
コードは次のとおりです。

<フォーム名=”フォーム” メソッド=”投稿” アクション=”#”>
<input type=”button” name=”query” onclick=”query();” value=”query”>
<input type=”button” name=”update” onclick=”update();” value=”更新”>
</フォーム>

上記のコードでは通常のボタンが使用されており、送信機能は onclick イベントで JavaScript 関数を呼び出すことによって実装されています。
上記のフォーム送信方法であれば、複雑なフォームも十分対応できると思います。

<<:  Kali に docker と portainer をインストールする方法

>>:  HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。

推薦する

Vueはechartsを使用して組織図を描画します

昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...

React Hooks の一般的な使用シナリオ (概要)

目次1. ステートフック1. 基本的な使い方2. 更新3. 合併を実現する4. 遅延初期化状態5. ...

Nginx セッション共有問題の解決策の分析

この記事は主に、Nginx セッション共有の問題に対する解決策を紹介します。記事内のサンプル コード...

クリーンなコードのための Web デザインの 12 の法則 [グラフィック]

美しいコードは美しい Web サイトの基礎です。優れた CSS は、同様に優れた HTML の上にの...

Linux で gdb を使用してコア ファイルをデバッグする方法

1.コアファイルプログラム実行中にセグメンテーション エラー (コア ダンプ) が発生すると、プログ...

Linux 上での Go 環境の構築のインストールと設定の説明

Linux で Go 環境を構築するのは非常に簡単です。 1. go1.2.1.linux-386....

MySQLスレーブのメンテナンスに関する経験の共有

序文: MySQL マスター/スレーブ アーキテクチャは、最も一般的に使用されるアーキテクチャ セッ...

実務経験7年のフロントエンドスーパーバイザーによる経験共有

今日はベテランの貴重な経験を共有します。著者は技術管理の経験が7年あり、多い時は80人以上を率いてい...

Docker で Python スクリプトを実行する方法

まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...

スクロールバーを非表示にする HTML の簡単な実装

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

JS での Reduce Fold Unfold の使用法の詳細な説明

目次折りたたむ(減らす) for...of の使用whileループの使用折り畳み実装に近い展開する配...

HTML チュートリアル、簡単に学べる HTML 言語 (2)

*******************HTML言語入門(パート2)*****************...

MySQL における 10 進数型の使用法の簡単な紹介

MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...

Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)

目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...