2019年11月25日 星期一

Bootstrap 4 學習筆記 (六) : 表單樣式

網頁設計中最重要的元件為表單元件, 這是客戶端與伺服端溝通的主要介面. 原始的 HTML5 表單元件較不美觀, 且可能受到瀏覽器實作差異的影響, 使得視覺上有些微不同. 關於 HTML 表單參考 :

網頁技術速學筆記 (四) : HTML 表單

Bootstrap 設計了以 form- 開頭的表單樣式類別, 套用後可讓網頁在不同瀏覽器維持較一致之外觀. 本系列之前的測試文章參考 :

Bootstrap 4 學習筆記 (一) : 環境配置
Bootstrap 4 學習筆記 (二) : 網格與容器
Bootstrap 4 學習筆記 (三) : 表格
Bootstrap 4 學習筆記 (四) : 圖示與按鈕
Bootstrap 4 學習筆記 (五) : 文字與圖片效果

Bootstrap 教學文件參考 :

第 10 堂課 - 初探 bootstrap 網頁製作
Bootstrap 初學介紹 #靜態篇


Bootstrap 的表單樣式有四個, 分成三種, 一種是套用到表單元素 form 本身, 主要用來控制表單內 label 與各元件之間排列方式的 form-inline 與 form-horizontal; 一種是套用到表單元件的 form-control; 另外一種則是套用到 div 元素用來使 label 與控制項形成群組的 form-group.


一. 表單相關之樣式類別 : 


1. 套用於表單本身 form 元素之樣式類別 :

表單 form 元素若未套用下列兩個樣式類別的話, 預設 label 元素與其對應之元件是分成兩列上下排列, 若要讓它們呈水平排列, 則需套用如下兩個樣式類別之一, 其中 form-horizontal 需配合網格設定 :


 表單樣式類別 說明
 form-inline 套用於 form 元素, 瀏覽器寬度大於 768px 時 label 與控制項由左向右排成一列
 form-horizontal 套用於 form 元素, 配合網格設置使表單元件與其對應之 label 元素做水平排列


2. 套用於 div 容器之樣式類別 :

每一個表單元件 (控制項) 與其搭配的 label 元素要用 div 包起來形成一個表單群組, 並在 div 元素上套用 form-group 類別,


 表單樣式類別 說明
 form-group 套用於包覆控制項之 div 元素, 表示此為一個 label+控制項組成之群組
 has-feedback 套用於包覆控制項之 div 元素, 表示有一個文字圖示將回應嵌入至此控制項


此處 has-feedback 用來搭配文字圖示中的 form-control-feedback 類別, 以便將文字圖示回應 (嵌入) 到控制項內, 例如 search 文字欄位.


3. 套用於表單元件 (控制項) 之樣式類別 :

每一個表單元件 (控制項) 必須套用下列樣式類別 (但按鈕不需要) :


 表單樣式類別 說明
 form-control 套用於表單元件 (控制項) 的類別 (按鈕不需要)


4. 套用於 label 元素之樣式類別 :

在 form 元素套用 form-horizontal 類別時, 將此類別套用在 label 元素上可使其向右與控制項對齊 :


 表單樣式類別 說明
 control-label 套用於 label 元素, 使標籤文字靠右與控制項對齊


以下為測試範例, 為了跟 Bootstrap 的美化效果做個對照, 先看看原始 HTML5 表單的 UI 效果 :


範例 1 : 表單樣式測試 (1) HTML5 原始表單 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <form>
      <label for="account">帳號</label>
      <input type="text" id="account" name="account" class="form-control"><br>
      <label for="pwd">密碼</label>
      <input type="password" id="pwd" name="pwd" class="form-control"><br>
      <button type="submit" class="btn btn-default">登入</button>
    </form>
  </body>
</html>


瀏覽結果如下 :



可見原始的 HTML5 表單真的很陽春, 就只是堪用而已, 而且整個靠左對齊, 如果要擺放在中間, 必須用表格或 CSS 樣式去調整.


範例 2 : 表單樣式測試 (2) 預設排列 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="account">帳號</label>
          <input type="text" id="account" name="account" class="form-control">
        </div>
        <div class="form-group">
          <label for="pwd">密碼</label>
          <input type="password" id="pwd" name="pwd" class="form-control">
        </div>
        <button type="submit" class="btn btn-default">登入</button>
      </form>
    </div> 
    <script>
      $(document).ready(function(){
          $("#ok").on("click", function(){
            account=$("#account").val();
            pwd=$("#pwd").val();
            alert(account + "," + pwd);
            });
          });
    </script>
  </body>
</html>


此例中 form 元素沒有套用 form-inline 或 form-horizontal 類別, 因此表單內的元件就以預設的 label 與控制項各占一列的方式擺放, 不管瀏覽器如何縮放都是如此, 瀏覽結果如下 :




如果給 form 元素套用 form-inline 類別, 則當瀏覽器寬度大於 768px 時, 同一表單群組的 label 與其對應控制項會放在同一列, 例如 :


範例 3 : 表單樣式測試 (3) 套用 form-inline 樣式類別 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form class="form-inline">
        <div class="form-group">
          <label for="account">帳號</label>
          <input type="text" id="account" name="account" class="form-control">
        </div>
        <div class="form-group">
          <label for="pwd">密碼</label>
          <input type="password" id="pwd" name="pwd" class="form-control">
        </div>
        <button type="submit" class="btn btn-default">登入</button>
      </form>
    </div>
  </body>
</html>


此例與上面的那個唯一的差異就是 form 元素套用了 form-inline 樣式類別, 在大於 768px 的筆電瀏覽器瀏覽結果如下 :




可見同一群組內的 label 與其控制項都排成一列了, 但如果將瀏覽器寬度縮小至低於 768px 寬度, 則又會恢復成預設的 label 一列, 控制項一列的配置了.

從上面範例可知, 預設表單的排版法是每一個表單元件都占用一列; form-inline 類別的排版法是將表單內元件全部一字排開, label 與控制項之間是緊鄰無空隙的.

另外一個表單樣式類別 form-horizontal 的排版法較細緻些, 需搭配網格系統讓每個表單群組占用一列, 一般左邊是 label, 右邊是控制項, 例如下面範例所示 :


範例 4 : 表單樣式測試 (4) 套用 form-horizontal 樣式類別 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form class="form-horizontal">
        <div class="form-group">
          <label for="account" class="col-sm-2 control-label">帳號</label>
          <div class="col-sm-10">
            <input type="text" id="account" name="account" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <label for="pwd" class="col-sm-2 control-label">密碼</label>
          <div class="col-sm-10">
            <input type="password" id="pwd" name="pwd" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登入</button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>


此例的 form 元素特用了 form-horizontal, 設定每一個表單群組以水平式版面擺放 label 與其控制項, 但光這樣並無效果, 需將所有控制項 (含按鈕) 用 div 包起來, 與 label 分別用網格系統設定占用欄位. 最後, 如果要讓 label 靠右, 則每一個 label 必須添加 control-label 類別 (否則靠左), 瀏覽結果如下 :




注意, 網格設定直接做在 label 中即可, label 不需要用 div 包裹, 下面範例將 label 包在 div 中, 然後將網格設在 div, 結果並無靠右對齊效果 :


範例 5 表單樣式測試 (5) 套用 form-horizontal 樣式類別 (NG)  [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-2">
            <label for="account" class="control-label">帳號</label>
          </div>
          <div class="col-sm-10">
            <input type="text" id="account" name="account" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-2">
            <label for="pwd" class="control-label">帳號</label>
          </div>
          <div class="col-sm-10">
            <input type="password" id="pwd" name="pwd" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登入</button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>


此例只是在 label 外包一層 div 並將網格設定移到 div 去而已, 證明這只是多此一舉而已.


二. 表單元件 (控制項) : 

Bootstrap 支援 HTML5 的各種表單元件美化效果, 前面已測試過按鈕元件, 底下將測試 input, textarea, select 等三大類控制項.


1. input 元件 :


文字輸入欄位的 text 與 password 已在上面測試過, 下面範例針對


範例 6 : 表單控制項測試 (1) 單行文字輸入元件 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group has-feedback">
          <label for="telephone">電話</label>
          <input type="tel" id="telephone" name="telephone" class="form-control">
          <span class="glyphicon glyphicon-phone form-control-feedback"></span>
        </div>
        <div class="form-group">
          <label for="email">E-mail</label>
          <input type="email" id="email" name="email" class="form-control">
        </div>
        <div class="form-group">
          <label for="url">URL</label>
          <input type="url" id="url" name="url" class="form-control">
        </div>
        <div class="form-group has-feedback">
          <label for="search">搜尋</label>
          <input type="search" id="search" name="search" class="form-control">
          <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>
      </form>
    </div>
  </body>
</html>


此例的電話與搜尋利用 has-feedback 與 form-control-feedback 將文字圖示嵌入到控制項內, 瀏覽結果如下 :




可見電話與搜尋這兩項右側都嵌入了文字圖示.


範例 7 : 表單控制項測試 (3) 多行文字元件 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="remark">備註</label>
          <textarea id="remark" name="remark" class="form-control" rows="10"></textarea>
        </div>
      </form>
      <button id="ok" type="submit" class="btn btn-default">確定</button>
    </div>
    <script>
      $(document).ready(function(){
          $("#ok").on("click", function(){
            alert($("#remark").val());
            });
          });
    </script>
  </body>
</html>


此例使用 jQuery 存取 DOM 元素方法給按鈕加上 click 事件監聽器, 當按鈕背按下時取得 textarea 物件並呼叫其 val() 方法取得其值, 瀏覽結果如下 :




接下來是選項元件測試, 包括單選圓鈕, 核取方塊, 以及下拉式選單.


範例 8 : 表單控制項測試 (4) 單選圓鈕 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="diploma">學歷</label>
          <div id="diploma" class="radio">
            <label>
              <input type="radio" name="diploma" value="國中" disabled>國中
            </label>
            <label>
              <input type="radio" name="diploma" value="高中">高中
            </label>
            <label>
              <input type="radio" name="diploma" value="大學" checked>大學
            </label>
            <label>
              <input type="radio" name="diploma" value="研究所">研究所
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="gender">性別</label>
          <div id="gender">
            <div class=radio>
              <label>
                <input type="radio" name="gender" value="男生">男生
              </label>
            </div>
            <div class=radio>
              <label>
                <input type="radio" name="gender" value="女生">女生
              </label>
            </div>
          </div>
        </div>
        <button id="ok" type="submit" class="btn btn-default">確定</button>
      </form>
    </div>
    <script>
      $(document).ready(function(){
          $("#ok").on("click", function(){
            diploma=$("[name=diploma]:checked").val()
            gender=$("[name=gender]:checked").val()
            alert(diploma + "," + gender);
            });
          });
    </script>
  </body>
</html>


每一個選項 input 控制項都包在 label 裡面, 然後外面再套一層 class=radio 的 div. 此例使用兩種選項排列方式, 學歷選項為水平排列, 全部選項只用一個 div 包起來; 而性別選項為垂直排列, 視覺上似乎各選項分離較不容易選錯, 但這樣要多套一層 div 元素, 並將 class=radio 放到內層 div 上, 結果如下 :




此例使用 jQuery 的屬性選擇器 [name=gender]:checked 選出被選擇之選項, 呼叫 val() 即可取得其值. 注意, 每一個選項必須要設定 value 屬性, 否則會取得 "on" 而非選項值.

核取方塊 checkbox 作法與單選圓鈕 radio 類似, 但因為它是複選, 因此在使用 jQuery 取得選取值時要改呼叫 each() 方法將被選取之項目值放到陣列中, 例如 :


範例 9 : 表單控制項測試 (5) 核取方塊 (複選) [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="language">常用程式語言</label>
          <div id="language" class="checkbox">
            <label>
              <input type="checkbox" name="language" value="Python">Python
            </label>
            <label>
              <input type="checkbox" name="language" value="Javascript">Javascript
            </label>
            <label>
              <input type="checkbox" name="language" value="PHP">PHP
            </label>
            <label>
              <input type="checkbox" name="language" value="VBA">VBA
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="hobby">興趣</label>
          <div id="hobby">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="hobby" value="看電影">看電影
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" name="hobby" value="運動">運動
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" name="hobby" value="旅遊">旅遊
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" name="hobby" value="音樂">音樂
              </label>
            </div>
          </div>
        </div>
        <button id="ok" type="submit" class="btn btn-default">確定</button>
      </form>
    </div>
    <script>
      $(document).ready(function(){
          $("#ok").on("click", function(){
            var language=new Array();
            var hobby=new Array();
            $("[name=language]:checked").each(function(){
              if (this.checked){language.push(this.value);}
              });
            $("[name=hobby]:checked").each(function(){
              if (this.checked){hobby.push(this.value);}
              });
            alert("程式語言:" + language.join() + "\n興趣:" + hobby.join());
            });
          });
    </script>
  </body>
</html>


此例在 Bootstrap 部分與上面 radio 是一樣的, 只要將 radio 改成 checbox 而已, 差別在取得選取項目部分, 首先要設個陣列來儲存被選取項目值, 然後選取同名核取方塊, 呼叫 each() 方法迭代取出被選取值, 再放進陣列中即可, 瀏覽結果如下 :




參考 :

https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

接著測試下拉式選單, jQuery 使用 fins(":selected") 來取得被選取之選項, 也可以使用名稱呼叫 val() 來取得, 參考 :

使用jQuery對 select 的操作


範例 10 : 表單控制項測試 (6) 下拉式選單 (單選) [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="diploma">學歷</label>
          <select id="diploma" name="diploma" class="form-control">
            <option value="國中" disabled>國中
            <option value="高中">高中
            <option value="大學" selected>大學
            <option value="研究所">研究所
          </select>
        </div>
        <div class="form-group">
          <label for="gender">性別</label>
          <select id="gender" name="gender" class="form-control">
            <option value="男生">男生
            <option value="女生">女生
          </select>
        </div>
        <button id="ok" type="submit" class="btn btn-default">確定</button>
      </form>
    </div>
    <script>
      $(document).ready(function(){
        $("#ok").on("click", function(){
          //diploma=$("#diploma").find(":selected").val();
          diploma=$("[name=diploma]").val();
          //gender=$("#gender").find(":selected").val();
          gender=$("[name=gender]").val();
          alert(diploma + "," + gender);
          });
        });
    </script>
  </body>
</html>


下拉式選單的 Bootstrap 結構較簡單, 不像 radio/checkbox 那樣要套上 div, 另外在用 jQuery 取得選取值方式上也不同, 可呼叫 find() 找尋被選取項目, 也可以用 name 直接取值, 瀏覽結果如下 :




上例中 select 控制項預設為單選, 下拉式選單若要能複選需加上 multiple 屬性, 如下面範例所示 :


範例 11 : 表單控制項測試 (7) 下拉式選單 (複選) [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="language">常用程式語言</label>
          <select id="language" name="language" class="form-control" multiple>
            <option value="Python">Python
            <option value="Javascript">Javascript
            <option value="PHP">PHP
            <option value="VBA">VBA
          </select>
        </div>
        <div class="form-group">
          <label for="hobby">興趣</label>
          <select id="hobby" name="hobby" class="form-control" multiple>
            <option value="看電影">看電影
            <option value="運動">運動
            <option value="旅遊">旅遊
            <option value="音樂">音樂
          </select>
        </div>
        <button id="ok" type="submit" class="btn btn-default">確定</button>
      </form>
    </div>
    <script>
      $(document).ready(function(){
          $("#ok").on("click", function(){
            var language=new Array();
            var hobby=new Array();
            $("#language").find(":selected").each(function(){
              language.push(this.value);
              });
            $("#hobby").find(":selected").each(function(){
              hobby.push(this.value);
              });
            alert("程式語言:" + language.join() + "\n興趣:" + hobby.join());
            });
          });
    </script>
  </body>
</html>


此例因為是複選, 因此需利用 each() 方法迭代取出被選取項目, 放入預先準備的陣列中, 瀏覽結果如下 :




接下來是 HTML5 新增的日期時間控制項測試, 它們都是特製的 input 文字輸入欄位, 不能直接輸入, 而是透過按鈕或選單選取時間或日期.


範例 12 : 表單控制項測試 (8) 時間日期元件 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="telephone">time</label>
          <input type="time" id="time" class="form-control" onchange="show_value(this)">
        </div>
        <div class="form-group">
          <label for="date">date</label>
          <input type="date" id="date" class="form-control" onchange="show_value(this)">
        </div>
        <div class="form-group">
          <label for="week">week</label>
          <input type="week" id="week" class="form-control" onchange="show_value(this)">
        </div>
        <div class="form-group">
          <label for="month">month</label>
          <input type="month" id="month" class="form-control" onchange="show_value(this)">
        </div>
        <div class="form-group">
          <label for="datetime-local">datetime-local</label>
          <input type="datetime-local" id="datetime-local" class="form-control" onchange="show_value(this)">
        </div>
      </form>
    </div>
    <script>
      function show_value(obj) {
        var span=document.getElementById("display");
        span.innerHTML=obj.value;
        }
    </script>
  </body>
</html>


瀏覽結果如下 :




接下來是色彩選擇元件 :


範例 13 : 表單控制項測試 (9) 色彩選擇元件 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="color_sel">顏色設定</label>
          <input type="color" id="color_sel" name="color_sel" class="form-control">
        </div>
        <div class="form-group">
          <label for="color_code">設定值</label>
          <input type="text" id="color_code" name="color_code" class="form-control">
        </div>
      </form>
    </div>
    <script>
      $(document).ready(function(){
          $("#color_sel").on("change", function(){
            var color_code=$("#color_sel").val();
            $("#color_code").val(color_code);
            });
          });
    </script>
  </body>
</html>


此例的 type=color 的 input 控制項外觀是一個長條形按鈕, 按下去會出現顏色選擇對話框, 挑選後透過 jQuery 程式碼呼叫 val() 取得顏色碼顯示在底下的文字欄位中, 瀏覽結果如下 :





以上便是 Bootstrap 的表單美化大作戰, 其實只要會 HTML, Javascript, jQuery, 以及 Bootstrap 就能輕輕鬆鬆設計出專業感十足的網頁了, 不用為了美化版面與 CSS 奮戰, 但基本的 CSS 用法還是要會啦.

沒有留言:

張貼留言