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

推薦する

CSS ファンタスティックボーダーアニメーション効果の実装

今日、私はブログサイト shoptalkshow を閲覧していて、非常に興味深いこのインターフェース...

jsを使用して写真をアップロードする機能を実現する

フロントエンドで画像をアップロードする原理は、入力 type="file" タグ...

Ubuntu 19にTheanoをインストールする際の問題を解決する

解決: pythearn2 パッケージをダウンロードしたディレクトリで、setup.py ファイルを...

MySQL の接続数が多すぎるエラーの原因と解決策

目次概要本日正午、開発およびテスト環境の MySQL サービスで接続数が多すぎるというエラーが報告さ...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...

クリックして認証コードと認証を切り替えるJavaScript

この記事では、クリックして切り替える認証コードと認証を実装するためのJavaScriptの具体的なコ...

ベンダー プレフィックス: ブラウザ エンジン プレフィックスが必要なのはなぜですか?

ベンダープレフィックスとは何ですか?ベンダー プレフィックス - ブラウザー エンジン プレフィック...

Ajax は CORS レスポンス ヘッダーを設定してクロスドメインの問題を解決し、クロスドメインのケース スタディを実現します。

1. クロスドメインを実現するためにCORSレスポンスヘッダーを設定するクロスオリジンリソース共有...

Nginx の一般的な設定とテクニックの概要

序文この記事では、Nginx の一般的な、実用的で興味深い構成をいくつか紹介します。この記事を読んだ...

iPhone デバイスの WAP ページでフォントサイズが大きい問題の解決策

JavaScriptコントロールを使用したくない場合は、次の方法を試してください。 Safariブラ...

誤って削除されたデータを復元するための mysqlbinlog コマンドを使用した mysql の実装

実験環境: MYSQL 5.7.22バイナリログを有効にするログ形式 MIXED実験プロセス: 1....

Alibaba Cloud ServerにMySQLデータベースをインストールする方法の詳細な説明

序文学習中に Zookeeper をインストールする必要があったため、仮想マシンに常に問題が発生した...

DockerコンテナがJupyterにアクセスできない問題の解決策

このプロジェクトでは、環境を構築するために Docker コンテナを使用します。Dockerfile...

Windows/Mac で Docker を使用して MySQL (utf8 を含む) をインストールする

目次1. MacへのDockerのインストール2. Win 10 システムでの Docker のイン...

CSS3でよく使われるスタイルの詳しい解説[基本的なテキストとフォントのスタイル]

概要: Web ページをより美しく見せるために、ここでは CSS3 でよく使用されるスタイルをいくつ...