BootStrap4 表单控件

一、水平表单

.form-horizontal

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<!-- 水平控件表单 -->
<form action="" class="form-horizontal">
    <legend>Bootstrap4 表单控件</legend>
    <!-- 输入框 -->
    <div class="form-group">
        <label  for="input01">请输入信息：</label>
        <div class="controls">
        <input type="text" class="form-control" id="input01" placeholder="请输入信息">
        <p class="text-muted small mt-1">除了自由格式文本，一些HTML5基于文本的输入像这样呈现</p>
    </div>
    
    </div>
    <!-- 多选框 -->
    <div class="form-group">
        <label  for="optionsCheckbox">确认框：</label>
        <label class="checkbox">
            <input type="checkbox" id="optionsCheckbox" value="option1">
            香蕉
        </label>
        <label class="checkbox">
            <input type="checkbox" id="optionsCheckbox" value="option1">
            苹果
        </label>
        <label class="checkbox">
            <input type="checkbox" id="optionsCheckbox" value="option1">
            梨子
        </label>
    </div>
        
        <!-- 单选框 -->
    <div class="form-group">
        <label for="s" class="radio-line">
            <input type="radio" name="sex" id="s">&nbsp;男
        </label>&nbsp;&nbsp;&nbsp;&nbsp;
        <label for="x" class="radio-line">
            <input type="radio" name="sex" id="x">&nbsp;女
        </label>
    </div>
    
    <!-- 下拉框 -->
    <div class="form-group">
        <label for="se1">下拉选项框：</label>
        <select class="form-control" id="se1">
            <option>PHP</option>
            <option>Vue</option>
            <option>MySQL</option>
            <option>CentOS</option>
        </select>
    </div>
    
    <!-- 分割线-->
    <div class="form-group">
      <div class="border-top my-3"></div>
    </div>
    
    <!-- 文件上传 -->
    <div class="form-group">
        <label  for="fileInput">文件上传：</label>
        <input  id="fileInput" type="file">
    </div>
    
    <!-- 多选框 -->
    <div class="form-group">
        <label for="sel2">多选下拉菜单：</label>
        <select multiple class="form-control" id="sel2">
            <option>篮球</option>
            <option>足球</option>
            <option>乒乓球</option>
            <option>打游戏</option>
            <option>骑车</option>
        </select>
    <!-- <p class="text-muted small mt-1"">We'll never share your email with anyone else.</p> -->
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    
    <!-- 文本区域 -->
    <div class="form-group">
      <label for="comment">评论:</label>
      <textarea class="form-control" rows="5" id="comment" placeholder="留下你的言论"></textarea>
    </div>
    
    <!-- 提交按钮 -->
    <div class="form-group">
         <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>