Bootstrap-v5-表单(输⼊框)⼀、表单控制(Form controls)
表单⼤⼩(Sizing)
表单可见性(Disabled)
只读纯⽂本(Readonly plain text)
⽂件上传(File input)
颜⾊(Color)
数据列表(Datalists)
⼆、实例
1、表单⼤⼩(Sizing)
.form-control    默认输⼊框⼤⼩
.form-control-lg   ⼤号输⼊框
.
form-control-sm  ⼩号输⼊框
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label="⼤输⼊框">
<input class="form-control" type="text" placeholder="Default input" aria-label="默认输⼊框">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label="⼩输⼊框">
2、表单禁⽤
disabled 禁⽤(不可编辑)
readonly 只读
<input class="form-control" type="text" placeholder="Disabled input" aria-label="禁⽤输⼊框" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="禁⽤只可读" disabled readonly> 3、只读纯⽂本(Readonly plain text)
.
form-control-plaintext
<!-- 只读纯⽂本 -->
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example">
</div>
</div>
<div class="mb-3 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
4、⽂件上传
formFile 上传⽂件(默认)
formFileMultiple ⽂件上传(多个)
formFileDisabled 上传⽂件(未⽣效)
formFileSm ⽂件上传(⼩⽂本框)
formFileLg ⽂件上传(⼤⽂本框)
<!-- ⽂件上传 -->
<div class="mb-3">
<label for="formFile" class="form-label">默认⽂件上传</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">多个⽂件上传</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">不可上传⽂件</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">inputtypefile不上传文件
<label for="formFileSm" class="form-label">⼩⽂件上传</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">⼤⽂件上传</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>
5、颜⾊选择器
.form-control-color 颜⾊选择
<!-- 颜⾊选择 -->
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color"> 6、数据列表
<!-- 下拉选择 -->
<label for="exampleDataList" class="form-label">下拉选择</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="请搜索">
<datalist id="datalistOptions">
<option value="旧⾦⼭">
<option value="纽约">
<option value="北京">
<option value="上海">
<option value="芝加哥">
</datalist>