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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。