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

推薦する

Tomcatの全体構造の簡単な紹介

Tomcat は Web コンテナとして広く知られています。Java を学び始めたときから現在の仕事...

Vue でインデックスをキー属性値として使用することが推奨されないのはなぜですか?

目次序文キーの役割差分アルゴリズムにおけるキーの役割ヘッドノードを同期するテールノードを同期する新し...

MySQLでの少し複雑な使用例コード

序文MySQL の構文は誰にとっても難しいものではないと思いますが、この記事では主に MySQL の...

実行中の時計を実装するための純粋な CSS3 コード

操作効果コードの実装html <div id="ウォッチ"> <...

Dockerfile における ENTRYPOINT と CMD の違い

Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...

Vue のライフサイクルとフック関数の詳細な説明と典型的な面接の質問

目次1. Vue ライフサイクル2. フック機能2.1 4つの段階と8つの方法に分かれています。 2...

Linux チェックアップ、Linux の状態 (ネットワーク IO、ディスク、CPU、メモリ) を把握

目次1. コアコマンド2. 共通コマンド3. コアコマンドの詳細な説明3.1、ps補助3.2 トップ...

スライダー効果を実装するミニプログラム

この記事の例では、スライディングブロック効果を実現するための小さなプログラムの具体的なコードを参考ま...

JavaScript インタビュー: 配列の平坦化メソッドを実装する方法

目次1 配列のフラット化とは何ですか? 2 JS標準ライブラリの配列フラット化メソッド3 フラットメ...

Raspberry Pi msmtp と mutt のインストールと設定のチュートリアル

1. muttをインストールするsudo apt-get install mutt 2. msmtp...

CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明

px(ピクセル)ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとし...

WeChatミニプログラムQRコード生成ツール weapp-qrcode 詳細説明

WeChat ミニプログラム - QR コード ジェネレーターダウンロード: weapp-qrcod...

MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...

kindとDockerを使用してローカルKubernetes環境を起動する

導入Kubernetes を使い始めるのに丸一日を費やしたことはありませんか?最近登場したいくつかの...