python測試開發django -142.Bootstrap 表單(form）

前言

HTML 表單用於收集不同類型的用戶輸入。boostrap中表單有幾種樣式

• 基本垂直表單
• 內聯表單 form-inline
• 水平排列表單 form-horizontal

基本表單實例

單獨的表單控件會被自動賦予一些全局樣式。在輸入框外面定義一個div標簽，class屬性設置.form-group
<input>、<textarea> 和 <select> 元素設置 .form-control 類，將被默認設置寬度屬性為 width: 100%;。
將 label 元素綁定 input 輸入框

  <div class="container">
      <div role="form">
          <div class="form-group">
              <label for="Email1">郵箱地址</label>
              <input type="email" class="form-control" id="Email1" placeholder="Email">
          </div>
          <div class="form-group">
              <label for="Password1">密碼</label>
              <input type="password" class="form-control" id="Password1" placeholder="Password">
          </div>
          <div class="form-group">
              <label for="File">文件上傳</label>
              <input type="file" id="File">
              <p class="help-block">請選擇本地文件上傳.</p>
          </div>
          <div class="checkbox">
              <label><input type="checkbox"> Check box 復選框</label>
          </div>
          <button type="submit" class="btn btn-default btn-info">提交按鈕</button>
      </div>

  </div>

顯示效果

label 的 for 屬性總結

• for屬性規定 label 與哪個表單元素綁定。
• <label>是專門為<input>元素服務的，為其定義標記。

label 和表單控件綁定方式有兩種：

方法一：將表單控件作為label的內容，這種就是隱士綁定。
此時不需要for屬性，綁定的控件也不需要id屬性。

隱式綁定：
<label>用戶名: <input type="text" name="username"></label>

方法二：為label標簽下的for屬性命名一個目標表單的id，這種就是顯示綁定。

顯式綁定：
<label for="name">用戶名:</label>
<input type="text" name="username" id="name">

內聯表單 form-inline

為

元素添加 .form-inline 類可使其內容左對齊並且表現為 inline-block 級別的控件。

  <div class="container">
      <div class="form-inline" role="form">
          <div class="form-group">
              <label for="Email1">郵箱地址</label>
              <input type="email" class="form-control" id="Email1" placeholder="Email">
          </div>
          <div class="form-group">
              <label for="Password1">密碼</label>
              <input type="password" class="form-control" id="Password1" placeholder="Password">
          </div>
          <button type="submit" class="btn btn-default btn-info">提交按鈕</button>
      </div>

  </div>

顯示效果

只適用於窗口（viewport）至少在 768px 寬度時（窗口寬度再小的話就會使表單折疊）。

水平排列表單 form-horizontal

通過為表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，可以將 label 標簽和控件組水平並排布局。
這樣做將改變 .form-group 的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加 .row 了。

  <div class="container">
      <div class="form-horizontal" role="form">
          <div class="form-group">
              <label for="Email1" class="col-md-2">郵箱地址</label>
              <div class="col-md-10">
                  <input type="email" class="form-control" id="Email1" placeholder="Email">
              </div>
          </div>
          <div class="form-group">
              <label for="Password1" class="col-md-2">密碼</label>
              <div class="col-md-10">
                  <input type="password" class="form-control" id="Password1" placeholder="Password">
              </div>
          </div>
          <div class="form-group">
              <div class="col-md-offset-2 col-md-10">
                  <button type="submit" class="btn btn-default btn-info">提交按鈕</button>
              </div>
          </div>
      </div>
  </div>

form-group 大小設置

form-group 可以設置3種大小樣式

• form-group 默認大小輸入框
• form-group-lg 大號輸入框
• form-group-sm 小號輸入框

在div這一層添加form-group-lg 或 form-group-sm屬性

<div class="form-group">
              <label for="Email1" class="col-md-2">郵箱地址</label>
              <div class="col-md-10">
                  <input type="email" class="form-control" id="Email1" placeholder="Email">
              </div>
          </div>
          <div class="form-group form-group-lg">
              <label for="Email2" class="col-md-2">郵箱地址</label>
              <div class="col-md-10">
                  <input type="email" class="form-control" id="Email2" placeholder="Email">
              </div>
          </div>
          <div class="form-group form-group-sm">
              <label for="Email3" class="col-md-2">郵箱地址</label>
              <div class="col-md-10">
                  <input type="email" class="form-control" id="Email3" placeholder="Email">
              </div>
          </div>

顯示效果

參考資料:https://v3.bootcss.com/css/#forms