Bootstrap5 表单⭐
堆叠表单
.form-label 内边距
.form-chek 元素周围
.form-check-input 复选单选 .form-check-lable 类
<div class="container mt-3">
<h2>堆叠表单</h2>
<form action="">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
内联表单
.row
.col
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
文本框
.form-control 渲染
<label for="comment">请输入评论:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
输入框大小
.form-control-lg .form-control-sm
禁用/只读表单
disabled/readonly
纯文本输入
.form-control-plaintext
取色器
.form-control-color
<input type="color" class="form-control form-control-color" value="#CCCCCC">
Bootstrap5 下拉菜单
下拉菜单 元素可以使用 .form-select
.form-select-lg 或 .form-select-sm 类来修改大小
<label for="browser" class="form-label">选择你喜欢的网站:</label>
<input class="form-control" list="sites" name="site" id="site">
<datalist id="sites">
<option value="Google">
<option value="Runoob">
<option value="Taobao">
<option value="Wiki">
<option value="Zhihu">
</datalist>
Bootstrap5 复选框与单选框⭐
.form-check 确保标签和复选框有适当边距
.
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
<label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
<label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>Option 3
<label class="form-check-label"></label>
</div>
切换开关
form-check form-switch
Bootstrap5 选择区间⭐
<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange">
<input type="range" class="form-range" step="10">
type=“range” class=“form-range” step=“10” 设置步长为step属性
最大最小值
<input type="range" class="form-range" min="0" max="4">
Bootstrap5 输入框组⭐
.input-group 设置文本的样式
.input-group-text 设置文本的样式
<form>
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Your Email">
<span class="input-group-text">@runoob.com</span>
</div>
</form>