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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM