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

推薦する

CSS3 クリアフロートメソッドの例

1. 目的この記事を通じて、誰もがフロートをクリアする原理と方法を理解し、最終的にこの記事が最良であ...

HTTPSの最も優れた説明

皆さんおはようございます。しばらく記事を更新していませんでした。実は、私は流行中に1か月以上家にいて...

Nginx Rewrite の使用シナリオと設定方法の分析

Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....

Vue3.0 手書き拡大鏡効果

達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...

Dockerはプロセス操作を管理するためにSupervisorを使用する

Docker コンテナは、起動時に、たとえば ssh または apache デーモン サービスなどの...

MySQLはインデックスプッシュダウンを数秒で理解するのに役立ちます

目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...

MySQL 8.0 バージョンで getTables がすべてのデータベース テーブルを返す問題の簡単な分析

序文この記事では、主にライブラリ内のすべてのテーブルを返すMysql8.0ドライバgetTables...

vue3+TypeScript+vue-routerの使い方

目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...

MySQLの起動失敗の解決策

MySQLの起動失敗の解決策MySQLを起動できませんmysqlを停止した後、いくつかの操作(ホスト...

NextCloud プライベート クラウド ストレージ ネットワーク ディスクの構築に関する詳細なチュートリアル

Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...

ボタンの権限判定を実装するためのVueカスタムv-has命令

アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...

MySQL 5.7 でブロックポジショニング DDL の問題を解決する

前回の記事「MySQL テーブル構造の変更、メタデータ ロックを知っておく必要があります」では、MD...

CSSでできるならJavaScriptは使わない

序文JavaScript で記述できるアプリケーションは、最終的には JavaScript で記述さ...

Dockerコンテナを使用してプロキシ転送とデータバックアップを実装する方法

序文アプリケーションを Docker コンテナとしてサーバーにデプロイする場合、通常はネットワークと...

MySQL ベースのストレージエンジンとログの説明 (包括的な説明)

1.1 ストレージエンジンの概要 1.1.1 ファイルシステムストレージファイル システム: オペ...