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 ページに動的な時計を書く

推薦する

Docker で Kong API Gateway をインストールして使用する詳細なチュートリアル

1 はじめにKong は単純な製品ではありません。この記事で言及されている Kong は主に Kon...

MySQLのインデックス選択と最適化の詳細な説明

目次インデックスモデルB+ツリーインデックスの選択インデックスの最適化インデックスの選択性カバーイン...

レスポンシブなアコーディオン効果を実現するための CSS3 の詳細な説明

最近、外国人が CSS3 を使用してアコーディオン効果を実現しているビデオを見たので、自分で学習した...

Kylin V10 への zabbix-agent のインストール手順

1. インストールパッケージをダウンロードするダウンロードアドレス: https://sourcef...

MySQL における引用符とバックティックの違いと使い方の詳細な説明

序文そこでこのブログを書きました。このブログでは大物の記事からいくつかの知識も推奨しています。侵害が...

Linux SecureCRT の文字化けの解決方法

SecureCRT が文字化けした文字を表示する状況を見てみましょう。例えば: ではリセットしてみま...

Vue の要素カレンダー コンポーネントを使用したサンプル コード

まず効果図を見てみましょう: 完全なコードは添付されています <テンプレート> <...

Vue でカスタムパスのエイリアスを設定する方法

Vue でカスタム パス エイリアスを設定する方法日常の開発では、モジュールやコンポーネントをインポ...

html、xhtml、xmlの違い

開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...

Linux 上の Vim で色とテーマを変更する方法

Vim は Linux でよく使用されるテキスト エディターです。 Vim は、Sublime や ...

Better-scrollはメニューとコンテンツをリンクする効果を実現します

1. 基本的な使い方 <!DOCTYPE html> <html lang=&qu...

Power Shell に vim 実装コード例を追加する方法

1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...

MYSQL 文字関数を使用してデータをフィルタリングすることに関する質問

問題の説明:構造:テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...

Nginx ロードバランシングの設定方法

目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング(デフォルト)重さip_ハッシュ公正(...