ブートストラップフォームのセットアップ方法

Bootstrapは、フレームワークのロード、フォームの作成、フォーム要素の追加、スタイルの設定、検証の追加、フォームデータの処理など、フォームをセットアップする一連のステップを提供します。その中で、フォームスタイルの設定には次のものが含まれます。.Form-Controlクラススタイルを使用して、すべてのフォーム要素に適用します。 .input-Groupクラススタイルを使用して、入力ボックスなどの要素をグループ化します。 .form-groupクラススタイルを使用して、関連するフォーム要素をグループ化します。

ブートストラップを使用してフォームをセットアップする方法

Bootstrapは、美しく実用的なWebページを簡単に作成するのに役立つさまざまな組み込みスタイルとコンポーネントを提供する人気のあるフロントエンドフレームワークです。この記事では、Bootstrapを使用してフォームを設定する方法について説明します。

ステップ1：ブートストラップをロードします

まず、WebページにBootstrap CSSおよびJavaScriptファイルをロードする必要があります。

 <code class="html"><link rel="stylesheet" href="path/to/bootstrap.min.css"> <script src="path/to/bootstrap.min.js"></script></code>

ステップ2：フォームを作成します

HTML <form></form>タグを使用してフォームを作成します。

 <code class="html"><form action="/submit" method="post"> ... </form></code>

ステップ3：フォーム要素を追加します

<form></form>タグには、入力ボックス、選択ボックス、ラジオボタン、チェックボックスなど、さまざまなフォーム要素を追加できます。

 <code class="html"><input type="text" name="name" placeholder="姓名"> <select name="gender"> <option value="male">男</option> <option value="female">女</option> </select> <input type="checkbox" name="terms" value="1"> <label for="terms">我同意条款</label></code>

ステップ4：フォームスタイルを設定します

Bootstrapは、いくつかの異なるフォームスタイルクラスを提供します。

• .form-control ：すべてのフォーム要素に適用できます
• .input-group ：入力ボックスやその他の要素をグループ化するために使用されます
• .form-group ：関連するフォーム要素のグループをグループ化するために使用されます

ステップ5：フォーム検証を追加します

Bootstrapは、フォーム入力を確認するのに役立つ検証プラグインを提供します。

 <code class="html"><script> // 为表单元素添加验证规则$(&#39;form&#39;).validate({ rules: { name: "required", gender: "required", terms: "required" } }); </script></code>

ステップ6：フォームデータを処理します

フォームを送信すると、PHP、node.js、またはその他のバックエンド言語を使用してフォームデータを処理できます。

 <code class="php"><?php if (isset($_POST[&#39;name&#39;]) && isset($_POST[&#39;gender&#39;]) && isset($_POST[&#39;terms&#39;])) { // 处理表单数据} ?></code>

例

これは、ブートストラップを使用して設定された形式の例です。

 <code class="html"><form action="/submit" method="post"> <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" name="name" placeholder="姓名"> </div> <div class="form-group"> <label for="gender">性别</label> <select class="form-control" name="gender"> <option value="male">男</option> <option value="female">女</option> </select> </div> <div class="form-group"> <label for="terms">我同意条款</label> <input type="checkbox" class="form-control" name="terms" value="1"> </div> <button type="submit" class="btn btn-primary">提交</button> </form></code>

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