📅 最后修改于: 2023-12-03 15:13:40.847000 🧑 作者: Mango
Bootstrap is a popular CSS framework that can greatly simplify the process of building responsive and attractive web pages. One of the features of Bootstrap is the ability to easily create forms that look great and function smoothly on different types of devices. In this tutorial, we will explore how to use Bootstrap's form components to create a form with a section.
To start using Bootstrap, you need to add the appropriate CSS and JavaScript files to your HTML document. You can either download them from the Bootstrap website or link to them via a CDN. Here is an example of how to link to the necessary files:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Forms</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<form>
<!-- Your form components will go here -->
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Once you have set up your HTML document, you can start adding form components using Bootstrap's classes. For example, to create a basic form with an email input and a submit button, you can use the following code:
<form>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
To add a section, you can wrap the form components that belong together in a fieldset. You can also add a legend to describe the section. For example:
<form>
<fieldset>
<legend>Contact information</legend>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="phone">Phone number</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter phone number">
</div>
</fieldset>
<fieldset>
<legend>Shipping information</legend>
<div class="form-group">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="Enter address">
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="Enter city">
</div>
<div class="form-group">
<label for="state">State</label>
<input type="text" class="form-control" id="state" placeholder="Enter state">
</div>
<div class="form-group">
<label for="zip">Zip code</label>
<input type="text" class="form-control" id="zip" placeholder="Enter zip code">
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
In this tutorial, we have explored how to use Bootstrap's form components to create a form with a section. By wrapping related form components in a fieldset and using a legend to describe the section, you can make your forms more organized and easier to use.