Bootstrap表单（输入框）

一、表单控制（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 protected]">
      </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">
      <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>      

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

<!-- 下拉选择 -->
    <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>