- HTMLの基本的なフォーム構造: まず、HTMLの基本的なフォーム構造を作成します。以下は、名前とメールアドレスの入力フィールドを持つ簡単なフォームの例です。
<form>
<div class="form-group">
<label for="name">名前:</label>
<input type="text" class="form-control" id="name" placeholder="お名前を入力してください">
</div>
<div class="form-group">
<label for="email">メールアドレス:</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>- Bootstrapのグリッドシステムを使用して水平フォームを作成する:
Bootstrapのグリッドシステムを使用すると、簡単に水平フォームを作成できます。以下のコード例では、
rowとcol-*-*クラスを使用して、名前とメールアドレスの入力フィールドを横並びに配置しています。
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">名前:</label>
<input type="text" class="form-control" id="name" placeholder="お名前を入力してください">
</div>
<div class="form-group col-md-6">
<label for="email">メールアドレス:</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>- カスタムCSSを使用して水平フォームをスタイリングする:
必要に応じて、カスタムCSSを使用してフォームをスタイリングすることもできます。以下のコード例では、
form-horizontalクラスを使用してフォーム全体を水平に配置し、form-groupクラスを使用して入力フィールドを左右に整列させています。
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">名前:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="お名前を入力してください">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">メールアドレス:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">送信</button>
</div>
</div>
</form>これらの方法を使用すると、HTMLとBootstrapを組み合わせて水平フォームを作成することができます。必要に応じて、さらにカスタマイズやスタイリングを行うことも可能です。これにより、ウェブ開発で水平フォームを実装する際の一連の手順を理解できるでしょう。