前言
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
為