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">Submitbutton>
	form>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

内联表单

.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>
1
2
3
4
5
6
7
8
9

文本框

.form-control 渲染

<label for="comment">请输入评论：label>
<textarea class="form-control" rows="5" id="comment" name="text">textarea>
1
2

输入框大小

.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">
1

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>
1
2
3
4
5
6
7
8
9

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>
1
2
3
4
5
6
7
8
9
10
11
12

切换开关

form-check form-switch

Bootstrap5 选择区间⭐

<label for="customRange" class="form-label">Custom rangelabel>
<input type="range" class="form-range" id="customRange">
1
2

<input type="range" class="form-range" step="10">
1

type=“range” class=“form-range” step=“10” 设置步长为step属性

最大最小值

 <input type="range" class="form-range" min="0" max="4">
1

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.comspan>
		div>
	form>
1
2
3
4
5
6
7
8
9
10
11