Bootstrap表单

• 最外层应该是<form></form>标签
• 里面嵌套各种子元素

只读文本框

<input class="form-control" type="text" placeholder="只读内容：请填写下面信息！" readonly="readonly" />

输入文本框和密码框

            <div class="form-group">
                <label for="user">请输入用户名：</label>
                <input type="text" id="user" class="form-control" placeholder="请输入用户名" />
            </div>
            <div class="form-group">
                <label for="password">请输入密码：</label>
                <input type="password" id="password" class="form-control" placeholder="请输入密码" />
            </div>

复选框

<div class="form-check">
               <input type="checkbox" id="check" class="form-check-input" />
               <label for="check">保存用户名和密码</label>
           </div>

单选按钮

       <div class="form-group form-check-inline">
               <div class="form-check">
                   <input type="radio" name="radio" id="male" class="form-check-input" value="male" checked="checked" />
                   <label for="male">男</label>
               </div>
               <div class="form-check">
                   <input type="radio" name="radio" id="female" class="form-check-input" value="female" />
                   <label for="female">女</label>
               </div>
           </div>

水平多个文本框

             <div class="form-group">
               <label for="born">出生年月日：</label>
               <div id="born" class="form-row">
                   <div class="col-6">
                       <input type="text" class="form-control" placeholder="年">
                   </div>
                   <div class="col-3">
                       <input type="text" class="form-control" placeholder="月">
                   </div>
                   <div class="col-3">
                       <input type="text" class="form-control" placeholder="日">
                   </div>
               </div>
           </div>

单选下拉列表和多选下拉列表

      <div class="form-group">
              <label for="city1">请选择城市（单选）：</label>
              <select name="city1" id="city1" class="form-control">
                  <option value="beijing">北京</option>
                  <option value="shanghai">上海</option>
                  <option value="tianjin">天津</option>
              </select>
          </div>
          <div class="form-group">
              <label for="city2">请选择城市（多选）：</label>
              <select multiple="multiple" name="city2" id="city2" class="form-control">
                  <option value="beijing">北京</option>
                  <option value="shanghai">上海</option>
                  <option value="tianjin">天津</option>
              </select>
          </div>

输入文本域

            <div class="form-group">
                <label for="info">请输入备注：</label>
                <textarea name="info" id="info" cols="30" rows="10" class="form-control"></textarea>
            </div>

上传文件

            <div class="form-group">
                <label for="file">请上传头像：</label>
                <input type="file" id="file" class="form-control-file" />
            </div>

输入带格式的电子邮箱

            <div class="form-group">
                <label for="email" class="col-form-label-lg">请输入电子邮箱：</label>
                <div class="input-group">
                    <div class="input-group-append">
                        <span class="input-group-text">@</span>
                    </div>
                    <input type="email" id="email" class="form-control form-control-lg" />
                </div>
            </div>

范围选择

            <div class="form-group">
                <label for="range">请选择范围：</label>
                <input type="range" id="range" class="form-control-range" />
            </div>