bootstrap 组件之表单 组件学习总结

   表单 form标签
        // 基本用法
        <div class="container">
            <div class="row">
                <div class="col">
                    <form action="#">
                        // 使用表单组的类名 form-group, 放置一组表单
                        <div class="form-group">
                            // label 用于放置文本类的标签， 一般与其他表单组件结合
                            <label for="username">用户名</label>
                            //form-control 表单控制的类名 id 和label里面的for是一样的
                            <input type="text" id='username' class='form-control' placeholder="请输入用户名">
                            // small 是用于提示用户的小字
                            <small class="from-text text-muted">用户名需要使用英文，符号组成</small>
                        </div>
                        // 密码框
                        <div class="form-group">
                            // label 用于放置文本类的标签， 一般与其他表单组件结合
                            <label for="password">用户名</label>
                            //form-control 表单控制的类名 id 和label里面的for是一样的 disabled 用于紧张用户输入
                            <input type="password" id='password' class='form-control' placeholder="请输入密码" disabled>
                        </div>
                        // 下拉框
                        <div class="form-group">
                            <label for="area">所在地</label>
                            //multiple 让下拉框变成多选
                            <select name="area" id="area" multiple>
                                <option value="">北京</option>
                                <option value="">上海</option>
                                <option value="">南京</option>
                            </select>
                        </div>
                        // 上传文件 兼容性不是很好
                        <div class="form-group">
                            <label for="file">上传文件</label>
                            <input type="file" class="form-control-file" id='file'>
                        </div>
                        // 滑块 h5新增
                        <div class="form-group">
                            <label for="range">滑块</label>
                            <input type="range" name="range" id="range" class="form-control-range">
                        </div>
                        // 复选框 单选框
                        <div class="form-group">
                            <label for="">兴趣爱好</label>
                            // 复选框
                            <div class="from-check form-check-inline"> // 选择框需要放在这个类里面 form-check-inline 让表单一行显示
                                <input class="from-check-input" type="checkbox" name="eat" id="eat">
                                <label class="form-check-label" for="eat">吃饭</label>
                            </div>
                            <div class="from-check form-check-inline"> // 选择框需要放在这个类里面
                                <input class="from-check-input" type="checkbox" name="sleep" id="sleep">
                                <label class="form-check-label" for="sleep">睡觉</label>
                            </div>
                            <div class="from-check"> // 选择框需要放在这个类里面
                                <input class="from-check-input" type="checkbox" name="doudou" id="doudou">
                                <label class="form-check-label" for="doudou">打豆豆</label>
                            </div>
                        </div>
                        // 单选框
                        <div class="form-group">
                            <label for="">性别</label>
                            <div class="form-check form-check-inline"> //form-check-inline 让表单一行显示
                                <input type="radio" name="sex" id="male" class="form-check-input">
                                <label for="male" class="form-check-label">男</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="radio" name="sex" id="female" class="form-check-input">
                                <label for="female" class="form-check-label">男</label>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        // 表单的尺寸 在from-control这里加上对应的类名
        form-control-lg 大尺寸
        col-form-label-lg 大尺寸
        form-control 正常尺寸
        form-conrol-sm 下尺寸
        col-form-label-sm 小尺寸
        // 只读属性
        加上 readonly 属性 或者 form-control-plaintext(没有边框的只读，类似p标签)
       // 表单栅格排列
       form 标签一定要放在行与列的外边
       // 表单表格式排列
       使用类名 form-row 
       使用方法：
        <form action="#">
          <div class="form-row">
            <div class="col">
                <input type="text" name="" id="" class="form-control">
            </div>
            <div class="col">
                <input type="text" name="" id="" class="form-control">
            </div>
          </div>
        </form>
    // 水平排列的表单
    使用类名 col-form-label 水平对齐
    使用方法：
    // 栅格系统的例子
     <form action="#">
        <div class="form-row mt-5">
            <div class="col-md-6 form-group">
                <label class="col-sm-2 col-form-label" for="email">Email</label>
                <input class="col-sm-10 form-control " type="email" class="form-control" name="email" id="email" placeholder="请输入邮箱">
            </div>
            <div class="col-md-6 form-group">
                <label class="col-sm-2 col-form-label" for="password">password</label>
                <input type="password" class="form-control col-sm-10" name="password" id="password" placeholder="请输入邮箱">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col">
                <label for="homeAddress">家庭地址</label>
                <input type="text" name="homeAddress" id="homeAddress" placeholder="请输入家庭地址">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col">
                <label for="companyAddress">公司地址</label>
                <input type="text" name="companyAddress" id="companyAddress" placeholder="请输入公司地址">
            </div>
        </div>
        <div class="form-row">
            <div class="col-md-6 form-group">
                <label for="city">city</label>
                <input type="text" class="form-control" name="city" id="email" placeholder="请输入您所在的城市">
            </div>
            <div class="col-md-3 form-group">
                <label for="marriage">婚姻状况</label>
                <select name="marriage" id="marriage" class="from-control">
                    <option value="">已婚</option>
                    <option value="">未婚</option>
                </select>
            </div>
            <div class="col-md-3 form-group">
                <label for="edcation">学历</label>
                <select name="edcation" id="edcation" class="from-control">
                    <option value="">大专</option>
                    <option value="">研究生</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="form-check">
                <input type="checkbox" name="grid" id="grid" class="form-check-input">
                <label for="grid">同意所读内容</label></div>
        </div>
        <input type="submit" class="btn btn-primary"></button>
    </form>
    // 内联表单
    使用类名 form-inline 不需要form放到最外面 效果是一行显示，写多少个都是一行显示
    使用方法：
     <div class="row mt-5">
     <div class="col">
         <form action="#" class="form-inline">
            <div class="form-group">
                <label for="password">password</label>
                <input type="password" class="form-control col-sm-10" name="password" id="password" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <label for="text">text</label>
                <input type="text" class="form-control col-sm-10" name="text" id="text" placeholder="请输入邮箱">
            </div>
         </form>
     </div>
     // 表单验证
     历史原因： js出现一开始是为了验证表单， 因为一开始是拨号上网，表单验证非常慢
     第一步： 给form标签添加一个类名 needs-validation, 
     第二部： 在from标签添加一个属性 novalidate(禁用浏览器默认验证反馈)
     第三步： 在需要验证的input 加上一个require
     第四步： 在验证后添加一个结果信息， 成功加上 valid-feedback  失败使用 invalid-feedback
     第五步： 使用js来执行验证
     // 自定义表单
     使用类名： custom-control
     复选框： custom-checkbox custom-control-input custom-control-label
     单选框：custom-control-inline(一行显示) custom-radio custom-control-input customm-control-label 
     下拉菜单： custom-select 
     滑块： custom-range min(最小值) max(最大值) step(步长)
     文件选取: custom-file custom-file-input custom-file-label