# 網頁技術速學筆記 (四) : 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 用法還是要會啦.
沒有留言 :
張貼留言