Bootstrap学习之表单

表单

单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

表单控件

<form class="mx-auto pt-5" style="width:500px;height:500px;">
  <div class="form-group">
    <label for="formEmail">邮件</label>
    <input id="formEmail" class="form-control" type="email"  placeholder="name@example.com">
  </div>

  <div class="form-group">
    <label for="formSelect">下拉框</label>
    <select id="formSelect" class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>

  <div class="form-group">
    <label for="formSelect2">下拉框</label>
    <select multiple id="formSelect2" class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>

  <div class="form-group">
    <label for="formArea">文本域</label>
    <textarea id="formArea" cols="20" rows="3" class="form-control"></textarea>
  </div>

  <div class="form-group form-check">
    <input id="formCheck" class="form-check-input" type="checkbox">
    <label class="form-check-label" for="formCheck">选择</label>
  </div>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

.form-group

.form-control

文本控件（如<input>、<select>、<textarea>）统一采用 .form-control 样式进行处理优化，包括常规外观、focus选中状态、尺寸大小。

大小规格

<form class="mx-auto pt-5" style="width:500px;height:500px;">
  <div class="form-group">
    <label class="col-form-label-lg" for="formInput1">Email</label>
    <input id="formInput1" class="form-control form-control-lg" type="text" placeholder=".from-control-lg">
  </div>
  <div class="form-group">
    <label class="col-form-label" for="formInput2">Email</label>
    <input id="formInput2" class="form-control" type="text" placeholder="Default input">
  </div>
  <div class="form-group">
    <label class="col-form-label-sm" for="formInput3">Email</label>
    <input id="formInput3" class="form-control form-control-sm" type="text" placeholder=".from-control-sm">
  </div>
</form>

.form-control-sm|lg : 控制控件的大小

.col-form-label-sm|lg : 控制 label 中的文本大小

只读属性

<form class="mx-auto pt-5" style="width:500px;height:500px;">
  <div class="form-group">
    <input class="form-control" type="text" placeholder="可读可写">
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="只读" readonly>
  </div>
</form>

readonly

在 input 控件上增加 readonly 属性，可防止修改 input 中的值。达到只读效果。

只读纯文本

<form class="mx-auto pt-5" style="width:500px;height:500px;">
  <div class="form-group row">
    <label for="formEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input id="formEmail1" class="form-control-plaintext" type="text" placeholder="email@example.com" readonly>
    </div>
  </div>

  <div class="form-group">
    <label for="formEmail2" class="sr-only">Email</label>
    <input id="formEmail2" class="form-control-plaintext" type="text" placeholder="email@example.com" readonly>
  </div>
</form>

若需要将 input 控件显示为纯文本（没有控件框），只要使用 .form-control-plaintext 样式即可。

.form-control-plaintext

效果

• 移除预设的表单样式，并保留适当的边距和填充间隙
  

.sr-only

效果

• 通过 clip 属性的剪切功能使元素隐藏
  

输入范围

<form class="mx-auto pt-5" style="width:500px;height:500px;">
  <div class="form-group">
    <label for="formRange">选择值（100）</label>
    <input id="formRange" class="form-control-range" type="range" value="100">
  </div>
  <div class="form-group">
    <label for="formRange2">选择值（50）</label>
    <input id="formRnage2" class="form-control-range" type="range" value="50">
  </div>
  <div class="form-group">
    <label for="formRange3">选择值（0）</label>
    <input id="formRange3" class="form-control-range" type="range" value="0">
  </div>
</form>

.form-control-range

复选框与单选框

默认垂直

<form class="mx-auto pt-5" style="width:500px;height:500px;">
  <div class="form-check">
    <input id="formCheckBox" class="form-check-input" type="checkbox">
    <label for="formCheckBox" class="form-check-label">
      可选复选框
    </label>
  </div>

  <div class="form-check">
    <input id="formCheckBox2" class="form-check-input" type="checkbox" disabled>
    <label for="formCheckBox2" class="form-check-label">
      不可选复选框
    </label>
  </div>
</form>

水平排列

<form class="mx-auto pt-5" style="width:500px;height:500px;">
  <div class="form-check form-check-inline">
    <input id="formCheckBox" class="form-check-input" type="checkbox">
    <label for="formCheckBox" class="form-check-label">
      可选复选框
    </label>
  </div>

  <div class="form-check form-check-inline">
    <input id="formCheckBox2" class="form-check-input" type="checkbox" disabled>
    <label for="formCheckBox2" class="form-check-label">
      不可选复选框
    </label>
  </div>
</form>

通过给容器设置 .form-check-inline 实现水平排列效果。

.form-check-inline

• 使父级元素宽度只适应子级元素
  

布局

垂直表单

<form
  class="border border-success mx-auto mt-5"
  style="width: 500px; height: 200px"
>
  <div class="form-group">
    <label for="userName">用户名</label>
    <input class="form-control" type="text" id="userName" />
  </div>

  <div class="form-group">
    <label for="userName">密码</label>
    <input class="form-control" type="password" id="userPwd" />
  </div>
</form>

水平表单

<form
  class="mx-auto border border-success mt-5"
  style="width: 500px; height: 200px"
>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label" for="userName">名称</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="userName" placeholder="请输入名称" />
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label" for="userPwd">密码</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="userPwd" placeholder="请输入密码" />
    </div>
  </div>
</form>

实现思路：

通过添加 .row 类，并使用 .col-*-* 等栅格组件来指定标签和宽度，可以创建水平表单。

确保添加.col-form-label 到您<label>上，以便他们垂直居中与他们相关的表单控件。

.col-form-label

• 让文字与相关表单控件垂直居中

<form class="border border-success mx-auto pt-5" style="width:500px;height:200px;">
  <div class="row">
    <div class="col">
      <label for="userName">名称</label>
      <input id="userName" class="form-control" type="text">
    </div>

    <div class="col">
      <label for="userPwd">密码</label>
      <input id="userPwd" class="form-control" type="password">
    </div>
  </div>
</form>

表单下方帮助提示文本

<form class="mx-auto pt-5" style="width:500px;height:500px;">
  <label for="userName">userName</label>
  <input id="userName" class="form-control" type="text" aria-describedby="userNameBlock">
  <small id="userNameBlock" class="form-text text-muted">表单下方帮助提示文本</small>
</form>

提示文本应该与使用 aria-describedby 属性表单控件相关联。

.form-text

<form class="mx-auto pt-5 form-inline" style="width:500px;height:500px;">
  <label for="userName">userName</label>
  <input id="userName" class="form-control mx-3" type="text" aria-describedby="userNameBlock">
  <small id="userNameBlock" class="form-text text-muted">表单下方帮助提示文本</small>
</form>

禁用表单

<form class="mx-auto pt-5" style="width:500px;height:500px;">
  <label for="userName">userName</label>
  <input id="userName" class="form-control" type="text" placeholder="禁用状态" disabled>
</form>

添加 disabled 属性到 input 上，使控件处于禁用状态。

<form class="mx-auto pt-5" style="width: 500px; height: 500px">
  <fieldset disabled>
    <div class="form-group">
      <label for="userName">userName</label>
      <input
        id="userName"
        class="form-control"
        type="text"
        placeholder="禁用状态"
      />
    </div>

    <div class="form-group">
      <label for="userAge">userAge</label>
      <input
        id="userAge"
        class="form-control"
        type="text"
        placeholder="禁用状态"
      />
    </div>
  </fieldset>
</form>

将 disabled 属性添加到 <fieldset> 以禁用其中的所有控件。

自定义表单

自定义复选框

<form class="mx-auto mt-3 pt-2 border border-success" style="width: 500px; height: 200px">
  <p>复选框</p>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" id="Check" class="custom-control-input">
    <label for="Check" class="custom-control-label">CheckBox1</label>
  </div>

  <div class="custom-control custom-checkbox">
    <input type="checkbox" id="Check2" class="custom-control-input"> 
    <label for="Check2" class="custom-control-label">CheckBox2</label>
  </div>
</form>

自定义单选框

<form
  class="mx-auto mt-3 pt-2 border border-success"
  style="width: 500px; height: 200px"
>
  <p>单选框</p>
  <div class="custom-control custom-radio">
    <input
      type="radio"
      name="gender"
      id="Radio"
      class="custom-control-input"
    />
    <label for="Radio" class="custom-control-label">男</label>
  </div>
  <div class="custom-control custom-radio">
    <input
      type="radio"
      name="gender"
      id="Radio2"
      class="custom-control-input"
    />
    <label for="Radio2" class="custom-control-label">女</label>
  </div>
</form>

<form
  class="mx-auto mt-3 pt-2 border border-success"
  style="width: 500px; height: 200px"
>
  <p>单选框</p>
  <div class="custom-control custom-radio custom-control-inline">
    <input
      type="radio"
      name="gender"
      id="Radio"
      class="custom-control-input"
    />
    <label for="Radio" class="custom-control-label">男</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input
      type="radio"
      name="gender"
      id="Radio2"
      class="custom-control-input"
    />
    <label for="Radio2" class="custom-control-label">女</label>
  </div>
</form>

通过给外层容器添加.custom-control-inline 类实现水平排列效果。

IOS 风格开关

<form
  class="mx-auto mt-3 pt-2 border border-success"
  style="width: 500px; height: 200px"
>
  <div class="custom-control custom-switch">
    <input type="checkbox" id="check1" class="custom-control-input">
    <label for="check1" class="custom-control-label">复选框</label>
  </div>

  <div class="custom-control custom-switch">
    <input type="checkbox" id="check2" class="custom-control-input" disabled>
    <label for="check2" class="custom-control-label">复选框（禁用状态）</label>
  </div>
</form>

下拉选择菜单

<form
  class="mx-auto mt-3 pt-2 border border-success"
  style="width: 500px; height: 200px"
>
  <div class="form-group">
    <label for="select1">下拉菜单</label>
    <select id="select1" class="custom-select">
      <option selected>Open this select menu</option>
      <option value="">One</option>
      <option value="">Two</option>
      <option value="">Three</option>
    </select>
  </div>
</form>

下拉菜单大小

<form
  class="mx-auto mt-3 pt-2 border border-success"
  style="width: 500px; height: 300px"
>
  <div class="form-group">
    <label for="select1">下拉菜单</label>
    <select id="select1" class="custom-select custom-select-lg">
      <option>select-lg</option>
    </select>
  </div>

  <div class="form-group">
    <label for="select2">下拉菜单</label>
    <select id="select2" class="custom-select">
      <option>默认大小</option>
    </select>
  </div>

  <div class="form-group">
    <label for="select3">下拉菜单</label>
    <select id="select3" class="custom-select custom-select-sm">
      <option>select-sm</option>
    </select>
  </div>
</form>

通过 .custom-select-* 来设置下拉框的大小。

显示的行数

<form
  class="mx-auto mt-3 pt-2 border border-success"
  style="width: 500px; height: 300px"
>
  <div class="form-group">
    <label for="select1">下拉菜单</label>
    <select id="select1" class="custom-select" size="3" multiple>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

multiple 属性：设置选项为平铺效果。

size 属性：设置显示的行数。