以下に、Bootstrapを使用してフォーム内にメールアドレスとテキストエリアを配置する方法をいくつか紹介します。
- 基本的なフォームの作成: 以下のコードは、基本的なフォームを作成するためのBootstrapのスニペットです。
<form>
<div class="form-group">
<label for="email">メールアドレス</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="message">メッセージ</label>
<textarea class="form-control" id="message" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>- レイアウトをカスタマイズする: Bootstrapは、フォームのレイアウトをカスタマイズするためのさまざまなクラスを提供しています。以下は、メールアドレスとテキストエリアの幅をカスタマイズする例です。
<form>
<div class="form-group">
<label for="email">メールアドレス</label>
<input type="email" class="form-control col-md-6" id="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="message">メッセージ</label>
<textarea class="form-control col-md-6" id="message" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>- バリデーションの追加: フォームにバリデーションを追加することもできます。以下は、メールアドレスとテキストエリアの入力が必須であることを示す例です。
<form>
<div class="form-group">
<label for="email">メールアドレス</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
<div class="invalid-feedback">
メールアドレスを入力してください。
</div>
</div>
<div class="form-group">
<label for="message">メッセージ</label>
<textarea class="form-control" id="message" rows="5" required></textarea>
<div class="invalid-feedback">
メッセージを入力してください。
</div>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>これらの例を使用して、Bootstrapを使用したフォーム内にメールアドレスとテキストエリアを配置する方法を学んでいただければ幸いです。必要に応じて、さらにカスタマイズやバリデーションの追加が可能です。