JavaScriptの記事では、Webフォームの操作方法を説明します。

JavaScriptの記事では、Webフォームの操作方法を説明します。

1. はじめに

先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお話しします。これを読む前に、以下の記事を読むことをお勧めします。

前の記事を読んでから、この記事を読んでください。

2. 本文

図に示すように、Webアプリケーション上の小さな三角形をクリックして、jspの場所を表示します。

作成後、ここにはJSPの空のリストが表示されます。ここで入力した内容は、まずフロントエンドにフィードバックされ、その後

バックエンドのデータ処理と受信。

ステップ1: 図に示すように、ここにいくつかのものを入力します。<h1>コンテンツ</h1>はフォーマットで、中央のコンテンツが

h1サイズのタイトル。h1~h6のタイトルのサイズは徐々に小さくなっています。h1は比較的大きいので使用には注意が必要です。

この実行をクリックした後、Baiduでlocalhost:8080を検索し、効果を確認する必要があります。

かなり大きいように感じるので、通常は<h2>內容</h2>を使用します。

ステップ 2: 下の丸で囲んだ内容を入力します。<input type=""> はフォーマットであり、「txt」は背後にボックスがあることを意味します。

[実行] をクリックした後、Baidu に移動して以前のコンテンツを更新し、図に示すように新しいコンテンツを取得します。

しかし、1 行では見栄えが良くないと感じるので、改行を追加する必要があります <br>

実行をクリックした後、Baiduで更新して取得することができます

次のように入力してみましょう:

パスワードは暗号化なしでも見ることができることがわかったので、txtをpasswordに変更するだけです。

Baidu で実行と更新をクリックして表示します。

結果は以下のようになります。

小さな目のロゴを通して見えるかどうかを制御できます

ステップ 3: 名前と ID を追加するだけです。コロンは識別子のようなものを表します。

id はフロント部分に表示され、名前はバックエンドがデータを送信するときに使用されます。

アカウントとパスワードを入力しても送信できないことがわかったので、図のように下線部分を入力するためのボタンを設置する必要があります。

<input type=" ">はフォーマット、submit は送信ボタンです

しかし、送信をクリックしても応答がないことに気づくでしょう。このとき、全体を囲むために<form></form>を追加する必要があります。

<form></form>はアンケートに相当します。アンケートを作成したら、送信できます。

[実行] をクリックすると、次の図が表示されます。

「送信」をクリックすると、Web ページに表示され、名前の役割が反映されます。

ステップ4: これはランクの提出なので、ランクを選択する必要があります。ランク<option>內容</option>である必要があります。

しかし、震える手で<option>內容<option>と書いて、/ を忘れてしまったらどうなるでしょうか?

さらに多くのスペースがあり、これらのスペースはオプションです

これは非常に不快なので、図に示すように、アイデア コードに / を追加する方が適切です。

次に、Baidu で実行と更新をクリックします。

異なる送信ボタンを設定することもできます。コンテンツを設定するには、value='' '' が必要です。

図に示すように:

単一選択と複数選択も設定できますが、どのように実現するのでしょうか?

ラジオ: ラジオのキーワードは「radio」です。関数を設定するための形式は<input type=" ">であることがわかっています。

図に示すように、

消す:

3 つすべてを選択できることがわかったので、名前修飾子を追加し、同じ方向を使用して 1 つだけ選択できることを示す必要があります。

今回は写真通りです

これにデフォルト値(デフォルトで選択される値)を追加したい場合は、チェックマークを追加するだけです。

後:

複数選択: 複数選択と単一選択の違いは、ラジオボタンがチェックボックスに変更されることです。

実行後は以下のようになります。

そうです。近すぎるとボックスをクリックできないことがあります。中国語の文字をクリックしても反応がなく、選択できないので、

図に示すように、中国語の文字を設定するときに、 <label>內容</label>を直接追加することもできます。

テキストを選択できるようになりました:

時にはミスが多すぎて、一つずつ削除したくないこともあります。このような場合は、リセット ボタンを使用できます。

再度設定するとリセットされます。最後のボタンを送信ボタンに変更します。

図に示すように:

すべてをクリアするには、「リセット」をクリックします。

前回はラフバージョンを書きました。

他にもいくつかありますが、それについては後で説明します。

あなたが探しているものはここにあります:❤バックエンドデータ受信を見落とす3つの方法❤(推奨コレクション)

こちらもご覧ください: 大規模Web入門レベルのWeb高速開発への直接アクセス (❤ おすすめコレクション ❤)

これで、Web フォーム ページの操作に役立つ JavaScript に関するこの記事は終了です。より関連性の高い JavaScript Web フォーム コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Javascript を使用して複数の Web フォームを同時に送信する方法
  • 複数の Web フォームを同時に送信する Javascript メソッド
  • 実用的な情報が満載のJavaScript Webフォーム機能通信

<<:  dockerでPostgreSQLを実行する方法

>>:  HTML で Web ページに動的な時計を書く

推薦する

MySQL ストアド プロシージャのクエリ コマンドの概要

以下のように表示されます。 mysql.proc から名前を選択します (db='データベー...

MySql における特殊演算子の使用の概要

序文MySQL には次の 4 種類の演算子があります。算術演算子比較演算子論理演算子ビット演算子これ...

MySQL をインストールするときに初期パスワードを忘れた場合のシンプルで効果的な解決策

MySQL をインストールすると初期パスワードが与えられますが、この初期パスワードは大文字と小文字の...

WeChatアプレットコンポーネントライフサイクルの落とし穴の記録

通常、コンポーネントのライフサイクルは、ビジネス ロジックが始まる場所です。ビジネスシナリオが複雑で...

フォーム要素とプロンプトテキストが揃っていない問題

最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...

SSL で Nginx リバース プロキシを構成する簡単な手順

序文リバース プロキシは、Web 経由で行われたリクエスト (http と https の両方) を...

MySQLグループリンクの使用に関する詳細な説明

MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...

JavaScript の遅延読み込み属性パターンを理解する

従来、開発者はインスタンスで必要になる可能性のあるデータに対して JavaScript クラス内にプ...

HTML でのアンカータグの使用例の共有

アンカータグの使用法:同じドキュメント内の特定の場所にリンクすることをアンカー リンクと呼びます。ア...

MySQL でタイムゾーンを表示および変更する方法

今日、プログラムが間違った時刻を挿入し、フィールドがデフォルト値 CURRENT_TIMESTAMP...

docker エントリポイントファイルの詳細な説明

Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...

WeChatアプレットでvantフレームワークを使用するための具体的な手順

目次1. アプレットのプロジェクト ディレクトリを開き、ファイルの場所を開きます。 2. プロジェク...

MySQL は正常に起動するがポートをリッスンしない場合の解決策

問題の説明MySQL が正常に起動しました。以下に示すように、 ps -ef |grep mysql...

ElementUIはel-formフォームリセット機能ボタンを実装します

目次ビジネスシナリオ:効果のデモンストレーション:ビジネスシナリオ: el-form を使用する場合...

Vue ログインページ用の動的パーティクル背景プラグインの実装

目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...