ホームページ ウェブフロントエンド ブートストラップのチュートリアル ブートストラップフォームで情報を送信する方法

ブートストラップフォームで情報を送信する方法

Jul 27, 2019 am 11:27 AM
bootstrap 形状

ブートストラップフォームで情報を送信する方法

入力されたユーザー名とパスワードが空の場合は、判断が必要です。このとき、ユーザー名とパスワードの検証が使用されますが、これを jsp のフロントエンド ページに記述する必要があります; 方法は 2 つあり、1 つは submit を使用して送信する方法です。 1 つはボタンを使用して送信する方法です。

方法 1:

JSP フロントエンド ページの先頭に js メソッドを挿入します:

 function checkUser(){
   var result = document.getElementById("userid").value;
   var password = document.getElementById("userpassid").value;
   if(result == ""  ){
     alert("用户名不能为空");
     return false;
   }
   if(password == ""  ){
    alert("密码不能为空");
     return false;
   }else{
   return true;
   }
}
ログイン後にコピー

次の形式で記述します:

<form id="formid"  name= "myform" method = &#39;post&#39;  action = &#39;user_login_submit.action&#39; onsubmit = "return checkUser();" >
            <table width="100%" border="0">
              <tr>
                <td width="60" height="40" align="right">用户名 </td>
                <td><input type="text" value="" class="text2" name = "username" id = "userid"/></td>
              </tr>
              <tr>
                <td width="60" height="40" align="right">密  码 </td>
                <td><input type="password" value="" class="text2" name = "userpass" id = "userpassid"/></td>
              </tr>
              <tr>
                <td width="60" height="40" align="right"> </td>
                <td><div class="c4">
                    <input type="submit" value="" class="btn2"  />
ログイン後にコピー

方法 2:

function checkUser(){
   var result = document.getElementById("userid").value;
   var password = document.getElementById("passid").value;
   if(result == ""  ){
     alert("用户名不能为空");
     return false;
   }
   if(password == ""  ){
    alert("密码不能为空");
     return false;
   }
  document.getElementById("formid").submit();
}
ログイン後にコピー

フォームを記述するには、id を記述する必要があります

<form id="formid" method = &#39;post&#39;  action = &#39;user_login_submit.action&#39;  >
ログイン後にコピー

ボタンは次のように記述されます:

<input type="button" value="" class="btn2" onclick = "checkUser();" />
ログイン後にコピー

推奨事項: ブートストラップ入門チュートリアル

以上がブートストラップフォームで情報を送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ブートストラップリストでデフォルトスタイルを削除する方法は? ブートストラップリストでデフォルトスタイルを削除する方法は? Apr 07, 2025 am 10:18 AM

ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な!の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。

ブートストラップテーブルが文字化けコードを表示する理由は何ですか ブートストラップテーブルが文字化けコードを表示する理由は何ですか Apr 07, 2025 am 11:30 AM

Bootstrapテーブルに文字化けコードを表示する主な理由は、文字セットの不一致、問題のエンコード、ブラウザの互換性の低さです。ソリューションには以下が含まれます。1。文字セットの一貫性を確認します。 2.データ送信エンコーディングを確認します。 3.ブラウザをより良い互換性に置き換えます。 4.ブートストラップテーブルバージョンを更新します。 5.データ形式が正しいことを確認します。 6.ブラウザのキャッシュをクリアします。

Bootstrapのグリッドシステムを表示する方法 Bootstrapのグリッドシステムを表示する方法 Apr 07, 2025 am 09:48 AM

Bootstrapのメッシュシステムは、コンテナ(コンテナ)、行(行)、およびcol(列)の3つのメインクラスで構成されるレスポンシブレイアウトを迅速に構築するためのルールです。デフォルトでは、12列のグリッドが提供され、各列の幅はCol-MD-などの補助クラスを通じて調整でき、それにより、さまざまな画面サイズのレイアウト最適化を実現できます。オフセットクラスとネストされたメッシュを使用することにより、レイアウトの柔軟性を拡張できます。グリッドシステムを使用する場合は、各要素が正しいネスト構造を持っていることを確認し、パフォーマンスの最適化を検討してページの読み込み速度を改善します。詳細な理解と実践によってのみ、ブートストラップグリッドシステムを習熟させることができます。

CSSスタイルのブートストラップを表示する方法 CSSスタイルのブートストラップを表示する方法 Apr 07, 2025 am 10:24 AM

ブートストラップCSSの表示方法:ブラウザ開発者ツールを使用(F12)。 [要素]または「インスペクター」タブを見つけて、ブートストラップコンポーネントを見つけます。コンポーネントがスタイルパネルに適用されるCSSスタイルを表示します。開発者ツールを使用して、スタイルをフィルタリングしたり、コードをデバッグしたりして、その仕組みについての洞察を得ることができます。開発者ツールに熟練し、迂回を避けます。

ブートストラップリストのサイズを変更する方法は? ブートストラップリストのサイズを変更する方法は? Apr 07, 2025 am 10:45 AM

ブートストラップリストのサイズは、リスト自体ではなく、リストを含むコンテナのサイズに依存します。 BootstrapのグリッドシステムまたはFlexBoxを使用すると、コンテナのサイズを制御することで、リスト項目を間接的に変更します。

PHPとBootstrapテーブルの文字化けコードの問題を解決する方法 PHPとBootstrapテーブルの文字化けコードの問題を解決する方法 Apr 07, 2025 am 11:27 AM

ブートストラップテーブルを使用して中国の文字盤を表示するソリューション:1。PHP文字セットをUTF-8に設定します。 2. PHPスクリプトで文字セットを設定します。 3.データベース文字セットがUTF-8であることを確認してください。 4.ブートストラップテーブルの文字セットを「Zh-Cn」に設定します。 5。Mbstringを使用して、キャストキャラクターセットを拡張します。 6.他のエンコーディングからのトランスコードデータ。 7.ブラウザエンコーディングを確認します。

BootstrapのJavaScriptプラグインの効果を表示する方法 BootstrapのJavaScriptプラグインの効果を表示する方法 Apr 07, 2025 am 10:21 AM

Bootstrap用のJavaScriptプラグインソースコードを調査することにより、その内部メカニズムとイベントライフサイクルを理解し、特定のニーズを満たすためにカスタマイズできます。

ブートストラップのJavaScriptの動作を表示する方法 ブートストラップのJavaScriptの動作を表示する方法 Apr 07, 2025 am 10:33 AM

BootstrapのJavaScriptセクションは、静的なページに活力を与えるインタラクティブなコンポーネントを提供します。オープンソースコードを見ると、それがどのように機能するかを理解できます。イベントバインディングはDOMの操作とスタイルの変更をトリガーします。基本的な使用には、JavaScriptファイルの導入とAPIの使用が含まれ、高度な使用にはカスタムイベントと拡張機能が含まれます。よくある質問には、バージョンの競合やCSSスタイルの競合が含まれます。これは、コードをダブルチェックすることで解決できます。パフォーマンスの最適化のヒントには、オンデマンドの読み込みとコード圧縮が含まれます。 Bootstrap JavaScriptをマスターするための鍵は、その設計コンセプトを理解し、実用的なアプリケーションを組み合わせ、開発者ツールを使用してデバッグと探索することです。

See all articles