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