demo下載鏈接http://pan.baidu.com/s/1hrDCC3y
/*
Jquery 表單驗證插件
janchie 2010.1 janchie@163.com
1.01版
*/
(function($){
$.fn.extend({
valid:function(){
if( ! $(this).is("form") ) return;
//獲取參數
var items = $.isArray(arguments[0]) ? arguments[0] : [],
isBindSubmit = typeof arguments[1] ==="boolean" ? arguments[1] :true,
isAlert = typeof arguments[2] ==="boolean" ? arguments[2] :false,
//驗證規則
rule = {
// 正則規則
"eng" : /^[A-Za-z]+$/,
"chn" :/^[u0391-uFFE5]+$/,
"mail" : /w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*/,
"url" : /^http[s]?://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]\':+!]*([^<>""])*$/,
"currency" : /^d+(.d+)?$/,
"number" : /^d+$/,
"int" : /^[0-9]{1,30}$/,
"double" : /^[-+]?d+(.d+)?$/,
"username" : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/,
"password" : /^(w){6,20}$/,
"safe" : />|<|,|[|]|{|}|?|/|+|=|||\'|\|"|:|;|~|!|@|#|*|$|%|^|&|(|)|`/i,
"dbc" : /[ａ-ｚＡ-Ｚ０-９！＠＃￥％＾＆＊（）＿＋｛｝［］｜：＂＇；．，／？＜＞｀～ ]/,
"qq" : /[1-9][0-9]{4,}/,
"date" : /^((((1[6-9]|[2-9]d)d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]d|3[01]))|(((1[6-9]|[2-9]d)d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]d|30))|(((1[6-9]|[2-9]d)d{2})-0?2-(0?[1-9]|1d|2[0-8]))|(((1[6-9]|[2-9]d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/,
"year" : /^(19|20)[0-9]{2}$/,
"month" : /^(0?[1-9]|1[0-2])$/,
"day" : /^((0?[1-9])|((1|2)[0-9])|30|31)$/,
"hour" : /^((0?[1-9])|((1|2)[0-3]))$/,
"minute" : /^((0?[1-9])|((1|5)[0-9]))$/,
"second" : /^((0?[1-9])|((1|5)[0-9]))$/,
"mobile" : /^(((d{2,3}))|(d{3}-))?13d{9}$/,
"phone" : /^[+]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1,12})+$/,
"zipcode" : /^[1-9]d{5}$/,
"bodycard" : /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)d{4}((19d{2}(0[13-9]|1[012])(0[1-9]|[12]d|30))|(19d{2}(0[13578]|1[02])31)|(19d{2}02(0[1-9]|1d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))d{3}(d|X|x)?$/,
"ip" : /^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/,
"file": /^[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/,
"image" : /.+.(jpg|gif|png|bmp)$/i,
"word" : /.+.(doc|rtf|pdf)$/i,
// 函數規則
"eq": function(arg1,arg2){ return arg1==arg2 ? true:false;},
"gt": function(arg1,arg2){ return arg1>arg2 ? true:false;},
"gte": function(arg1,arg2){ return arg1>=arg2 ? true:false;},
"lt": function(arg1,arg2){ return arg1<arg2 ? true:false;},
"lte": function(arg1,arg2){ return arg1<=arg2 ? true:false;}
},
//簡單驗證提示信息后綴
msgSuffix = {
"eng" : "只能輸入英文" ,
"chn" : "只能輸入漢字",
"mail" : "格式不正確",
"url" : "格式不正確",
"currency" : "數字格式有誤",
"number" : "只能為數字",
"int" : "只能為整數",
"double" : "只能為帶小數的數字",
"username" :"只能為數字和英文及下划線和.的組合，開頭為字母，4-20個字符",
"password" : "只能為數字和英文及下划線的組合，6-20個字符",
"safe" : "不能有特殊字符",
"dbc" : "不能有全角字符",
"qq" : "格式不正確",
"date" : "格式不正確",
"year" : "不正確",
"month" :"不正確",
"day" : "不正確",
"hour" : "不正確",
"minute" :"不正確",
"second" :"不正確",
"mobile" : "格式不正確",
"phone" : "格式不正確",
"zipcode" : "格式不正確",
"bodycard" : "格式不正確",
"ip" : "IP不正確",
"file": "類型不正確",
"image" : "類型不正確",
"word" : "類型不正確",
"eq": "不等於",
"gt": "不大於",
"gte": "不大於或等於",
"lt": "不小於",
"lte": "不小於或等於"
},
msg = "", formObj = $(this) , checkRet = true, isAll,
tipname = function(namestr){ return "tip_" + namestr.replace(/([a-zA-Z0-9])/g,"-$1"); },
//規則類型匹配檢測
typeTest = function(){
var result = true,args = arguments;
if(rule.hasOwnProperty(args[0])){
var t = rule[args[0]], v = args[1];
result = args.length>2 ? t.apply(arguments,[].slice.call(args,1)):($.isFunction(t) ? t(v) :t.test(v));
}
return result;
},
//錯誤信息提示 ****** 自定義修改 ******
showError = function(fieldObj,filedName,warnInfo){
checkRet = false;
fieldObj.css("background","#FFDFDD");
var tipObj = $("#"+tipname(filedName));
if(tipObj.length>0) tipObj.remove();
var tipPosition = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1);
tipPosition.after("<span style='color:#F06' id='"+tipname(filedName)+"'> "+warnInfo+" </span>");
if(isAlert && isAll) msg += "n" + warnInfo;
//if(isAlert && !isAll) alert(warnInfo);
},
//正確信息提示 ****** 自定義修改 ******
showRight = function(fieldObj,filedName){
fieldObj.css("background","#CCFFCC");
var tipObj = $("#"+tipname(filedName));
if(tipObj.length>0) tipObj.remove();
var tipPosition = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1);
tipPosition.after("<span style='color:#0C0' id='"+tipname(filedName)+"'> 正確 </span>");
},
//匹配對比值的提示名
findTo = function(objName){
var find;
$.each(items, function(){
if(this.name == objName && this.simple){
find = this.simple; return false;
}
});
if(!find) find = $("[name='"+objName+"']")[0].name;
return find;
},
//單元素驗證
fieldCheck = function(item){
var i = item, field = $("[name='"+i.name+"']",formObj[0]);
if(!field[0]) return;
var warnMsg,fv = $.trim(field.val()),isRq = typeof i.require ==="boolean" ? i.require : true;
if( isRq && ((field.is(":radio")|| field.is(":checkbox")) && !field.is(":checked"))){
warnMsg = i.message|| i.simple + "沒有選擇";
showError(field ,i.name, warnMsg);
}else if (isRq && fv == "" ){
warnMsg = i.message|| i.simple + ( field.is("select") ? "沒有選擇" :"不能為空" );
showError(field ,i.name, warnMsg);
}else if(fv != ""){
if(i.min || i.max){
var len = fv.length, min = i.min || 0, max = i.max;
warnMsg = i.message || (max? i.simple + "長度范圍應在"+min+"~"+max+"之間":i.simple + "長度應大於"+min);
if( (max && (len>max || len<min)) || (!max && len<min) ){
showError(field ,i.name, warnMsg); return;
}
}
if(i.type){
var matchVal = i.to ? $.trim($("[name='"+i.to+"']").val()) :i.value;
var matchRet = matchVal ? typeTest(i.type,fv,matchVal) :typeTest(i.type,fv);
warnMsg = i.message|| i.simple + msgSuffix[i.type];
if(matchVal && i.simple) warnMsg += (i.to ? findTo(i.to) +"的值" :i.value);
if(!matchRet) showError(field ,i.name, warnMsg);
else showRight(field,i.name);
}else{
showRight(field,i.name);
}
}else if (isRq){
showRight(field,i.name);
}
},
//元素組驗證
validate = function(){
$.each(items, function(){isAll=true; fieldCheck(this);});
if(isAlert && msg != ""){
alert(msg); msg = "";
}
return checkRet;
};
//單元素事件綁定
$.each(items, function(){
var field = $("[name='"+this.name+"']",formObj[0]);
if(field.is(":hidden")) return;
var obj = this,toCheck = function(){ isAll=false; fieldCheck(obj);};
if(field.is(":file") || field.is("select")){
field.change(toCheck);
}else{
field.blur(toCheck);
}
});
//提交事件綁定
if(isBindSubmit) {
$(this).submit(validate);
}else{
return validate();
}
}
});
})(jQuery);
Jquery 表單驗證插件
janchie 2010.1 janchie@163.com
1.01版
*/
(function($){
$.fn.extend({
valid:function(){
if( ! $(this).is("form") ) return;
//獲取參數
var items = $.isArray(arguments[0]) ? arguments[0] : [],
isBindSubmit = typeof arguments[1] ==="boolean" ? arguments[1] :true,
isAlert = typeof arguments[2] ==="boolean" ? arguments[2] :false,
//驗證規則
rule = {
// 正則規則
"eng" : /^[A-Za-z]+$/,
"chn" :/^[u0391-uFFE5]+$/,
"mail" : /w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*/,
"url" : /^http[s]?://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]\':+!]*([^<>""])*$/,
"currency" : /^d+(.d+)?$/,
"number" : /^d+$/,
"int" : /^[0-9]{1,30}$/,
"double" : /^[-+]?d+(.d+)?$/,
"username" : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/,
"password" : /^(w){6,20}$/,
"safe" : />|<|,|[|]|{|}|?|/|+|=|||\'|\|"|:|;|~|!|@|#|*|$|%|^|&|(|)|`/i,
"dbc" : /[ａ-ｚＡ-Ｚ０-９！＠＃￥％＾＆＊（）＿＋｛｝［］｜：＂＇；．，／？＜＞｀～ ]/,
"qq" : /[1-9][0-9]{4,}/,
"date" : /^((((1[6-9]|[2-9]d)d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]d|3[01]))|(((1[6-9]|[2-9]d)d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]d|30))|(((1[6-9]|[2-9]d)d{2})-0?2-(0?[1-9]|1d|2[0-8]))|(((1[6-9]|[2-9]d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/,
"year" : /^(19|20)[0-9]{2}$/,
"month" : /^(0?[1-9]|1[0-2])$/,
"day" : /^((0?[1-9])|((1|2)[0-9])|30|31)$/,
"hour" : /^((0?[1-9])|((1|2)[0-3]))$/,
"minute" : /^((0?[1-9])|((1|5)[0-9]))$/,
"second" : /^((0?[1-9])|((1|5)[0-9]))$/,
"mobile" : /^(((d{2,3}))|(d{3}-))?13d{9}$/,
"phone" : /^[+]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1,12})+$/,
"zipcode" : /^[1-9]d{5}$/,
"bodycard" : /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)d{4}((19d{2}(0[13-9]|1[012])(0[1-9]|[12]d|30))|(19d{2}(0[13578]|1[02])31)|(19d{2}02(0[1-9]|1d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))d{3}(d|X|x)?$/,
"ip" : /^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/,
"file": /^[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/,
"image" : /.+.(jpg|gif|png|bmp)$/i,
"word" : /.+.(doc|rtf|pdf)$/i,
// 函數規則
"eq": function(arg1,arg2){ return arg1==arg2 ? true:false;},
"gt": function(arg1,arg2){ return arg1>arg2 ? true:false;},
"gte": function(arg1,arg2){ return arg1>=arg2 ? true:false;},
"lt": function(arg1,arg2){ return arg1<arg2 ? true:false;},
"lte": function(arg1,arg2){ return arg1<=arg2 ? true:false;}
},
//簡單驗證提示信息后綴
msgSuffix = {
"eng" : "只能輸入英文" ,
"chn" : "只能輸入漢字",
"mail" : "格式不正確",
"url" : "格式不正確",
"currency" : "數字格式有誤",
"number" : "只能為數字",
"int" : "只能為整數",
"double" : "只能為帶小數的數字",
"username" :"只能為數字和英文及下划線和.的組合，開頭為字母，4-20個字符",
"password" : "只能為數字和英文及下划線的組合，6-20個字符",
"safe" : "不能有特殊字符",
"dbc" : "不能有全角字符",
"qq" : "格式不正確",
"date" : "格式不正確",
"year" : "不正確",
"month" :"不正確",
"day" : "不正確",
"hour" : "不正確",
"minute" :"不正確",
"second" :"不正確",
"mobile" : "格式不正確",
"phone" : "格式不正確",
"zipcode" : "格式不正確",
"bodycard" : "格式不正確",
"ip" : "IP不正確",
"file": "類型不正確",
"image" : "類型不正確",
"word" : "類型不正確",
"eq": "不等於",
"gt": "不大於",
"gte": "不大於或等於",
"lt": "不小於",
"lte": "不小於或等於"
},
msg = "", formObj = $(this) , checkRet = true, isAll,
tipname = function(namestr){ return "tip_" + namestr.replace(/([a-zA-Z0-9])/g,"-$1"); },
//規則類型匹配檢測
typeTest = function(){
var result = true,args = arguments;
if(rule.hasOwnProperty(args[0])){
var t = rule[args[0]], v = args[1];
result = args.length>2 ? t.apply(arguments,[].slice.call(args,1)):($.isFunction(t) ? t(v) :t.test(v));
}
return result;
},
//錯誤信息提示 ****** 自定義修改 ******
showError = function(fieldObj,filedName,warnInfo){
checkRet = false;
fieldObj.css("background","#FFDFDD");
var tipObj = $("#"+tipname(filedName));
if(tipObj.length>0) tipObj.remove();
var tipPosition = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1);
tipPosition.after("<span style='color:#F06' id='"+tipname(filedName)+"'> "+warnInfo+" </span>");
if(isAlert && isAll) msg += "n" + warnInfo;
//if(isAlert && !isAll) alert(warnInfo);
},
//正確信息提示 ****** 自定義修改 ******
showRight = function(fieldObj,filedName){
fieldObj.css("background","#CCFFCC");
var tipObj = $("#"+tipname(filedName));
if(tipObj.length>0) tipObj.remove();
var tipPosition = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1);
tipPosition.after("<span style='color:#0C0' id='"+tipname(filedName)+"'> 正確 </span>");
},
//匹配對比值的提示名
findTo = function(objName){
var find;
$.each(items, function(){
if(this.name == objName && this.simple){
find = this.simple; return false;
}
});
if(!find) find = $("[name='"+objName+"']")[0].name;
return find;
},
//單元素驗證
fieldCheck = function(item){
var i = item, field = $("[name='"+i.name+"']",formObj[0]);
if(!field[0]) return;
var warnMsg,fv = $.trim(field.val()),isRq = typeof i.require ==="boolean" ? i.require : true;
if( isRq && ((field.is(":radio")|| field.is(":checkbox")) && !field.is(":checked"))){
warnMsg = i.message|| i.simple + "沒有選擇";
showError(field ,i.name, warnMsg);
}else if (isRq && fv == "" ){
warnMsg = i.message|| i.simple + ( field.is("select") ? "沒有選擇" :"不能為空" );
showError(field ,i.name, warnMsg);
}else if(fv != ""){
if(i.min || i.max){
var len = fv.length, min = i.min || 0, max = i.max;
warnMsg = i.message || (max? i.simple + "長度范圍應在"+min+"~"+max+"之間":i.simple + "長度應大於"+min);
if( (max && (len>max || len<min)) || (!max && len<min) ){
showError(field ,i.name, warnMsg); return;
}
}
if(i.type){
var matchVal = i.to ? $.trim($("[name='"+i.to+"']").val()) :i.value;
var matchRet = matchVal ? typeTest(i.type,fv,matchVal) :typeTest(i.type,fv);
warnMsg = i.message|| i.simple + msgSuffix[i.type];
if(matchVal && i.simple) warnMsg += (i.to ? findTo(i.to) +"的值" :i.value);
if(!matchRet) showError(field ,i.name, warnMsg);
else showRight(field,i.name);
}else{
showRight(field,i.name);
}
}else if (isRq){
showRight(field,i.name);
}
},
//元素組驗證
validate = function(){
$.each(items, function(){isAll=true; fieldCheck(this);});
if(isAlert && msg != ""){
alert(msg); msg = "";
}
return checkRet;
};
//單元素事件綁定
$.each(items, function(){
var field = $("[name='"+this.name+"']",formObj[0]);
if(field.is(":hidden")) return;
var obj = this,toCheck = function(){ isAll=false; fieldCheck(obj);};
if(field.is(":file") || field.is("select")){
field.change(toCheck);
}else{
field.blur(toCheck);
}
});
//提交事件綁定
if(isBindSubmit) {
$(this).submit(validate);
}else{
return validate();
}
}
});
})(jQuery);
參數及說明：
------------------- 配置參數:----------------------
-------- 表單 --------
valid(fileds,isBindSubmit,isAlert)
參數一為表單項數組（Json方式），必需
參數二為表單是否為手動調用驗證結果，默認為true，即為自動驗證submit事件，可選；
參數三為驗證信息采用Alert提示方式，默認為否，可選。
-------- 表單項數組 --------
name: 表單域的name，必需
type: 驗證類型，可選
simple: 簡單提示消息，只輸入域的中文名 [推薦]
message: 完整的提示消息，替代簡單提示消息
require:是否必填，默認為true，即必填，false為非必填，可選
to: 匹配值對比，對象的name，可選
value: 直接匹配值對比，有to則該值被忽略，可選
min:最小長度，可選
max:最大長度，可選
ajax: 為取得異步驗證的結果的地址，可選
****** type驗證類型如下： ******
eng: 英文
chn: 漢字
mail: 郵箱
url: 網址
currency: 貨幣
number: 數字
int: 整數
double: 浮點數
username:數字和英文及下划線和.的組合，開頭為字母，4-20個字符
password: 數字和英文及下划線的組合，6-20個字符
safe:不含特殊字符
dbc: 含全角字符(漢字除外)
qq: 5-9位數字
date: 時間
year: 年
month:月
day: 日
hour: 小時
minute:分
second 秒
mobile:手機
phone:電話
zipcode: 郵編
bodycard: 身份證，支持15位、18位，x字母
ip: IP
file: 文件類型
image: 圖片文件類型
word: 文檔文件類型
**** 以下類型，需要有匹配對象或值 ****
eq: =
gt: >
gte:>=
lt: <
lte:<=
怎么個簡單容易法？？？
看代碼：
復制代碼 代碼如下:
$(function(){
$("form").valid([
//驗證選擇
{ name:"checkbox",simple:"多選" },
//驗證必填,只要不為空
{ name:"username",simple:"用戶名" },
//非必填，郵箱類型
{ name:"email",type:"mail",simple:"郵箱",require:false }
]);
})
網摘示例代碼
<script language="javascript" src="jquery-1.4.min.js"></script> <script language="javascript" src="jquery.checkform.js"></script> <script language="javascript"> $(function(){ $("#form1").valid([ //{ name:"username",type:"ajax",message:"用戶名沒有注冊", url:"abc.asp" }, { name:"username",type:"username",simple:"用戶名"}, { name:"password",type:"password",simple:"密碼",min:8,max:16}, { name:"password2",type:"eq",simple:"重復密碼", to:"password" }, { name:"english",type:"eng",simple:"英文域", require:false }, { name:"chinese",type:"chn",simple:"中文域", require:false }, { name:"email",type:"mail",simple:"郵箱" }, { name:"url",type:"url",message:"地址信息不正確哦!" }, { name:"checkbox",simple:"多選" }, { name:"select",simple:"選擇框" }, ]); }) </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="760" border="0"> <tr> <td width="90" align="right">用戶名</td> <td><input type="text" name="username" id="username" /></td> </tr> <tr> <td align="right">密碼</td> <td><input type="password" name="password" id="password" /></td> </tr> <tr> <td align="right">重復密碼</td> <td><input type="password" name="password2" id="password2" /></td> </tr> <tr> <td align="right">英文</td> <td><input type="text" name="english" id="english" /></td> </tr> <tr> <td align="right">中文</td> <td><input type="text" name="chinese" id="chinese" /></td> </tr> <tr> <td align="right">郵箱</td> <td><input type="text" name="email" id="email" /></td> </tr> <tr> <td align="right">網址</td> <td><input type="text" name="url" id="url" /></td> </tr> <tr> <td align="right">金額</td> <td><input type="text" name="currency" id="currency" /></td> </tr> <tr> <td align="right">數字</td> <td><input type="text" name="number" id="number" /></td> </tr> <tr> <td align="right">整數</td> <td> <input type="text" name="int" id="int" /> </td> </tr> <tr> <td align="right">小數</td> <td><input type="text" name="double" id="double" /></td> </tr> <tr> <td align="right">QQ</td> <td><input type="text" name="qq" id="qq" /></td> </tr> <tr> <td align="right">時間</td> <td><input type="text" name="date" id="date" /></td> </tr> <tr> <td align="right">年</td> <td><input type="text" name="year" id="year" /></td> </tr> <tr> <td align="right">月</td> <td><input type="text" name="month" id="month" /></td> </tr> <tr> <td align="right">日</td> <td><input type="text" name="day" id="day" /></td> </tr> <tr> <td align="right">小時</td> <td><input type="text" name="hour" id="hour" /></td> </tr> <tr> <td align="right">分/秒</td> <td><input type="text" name="stime" id="stime" /></td> </tr> <tr> <td align="right">電話號碼</td> <td><input type="text" name="telphone" id="telphone" /></td> </tr> <tr> <td align="right">手機</td> <td><input type="text" name="mobile" id="mobile" /></td> </tr> <tr> <td align="right">身份證</td> <td><input type="text" name="idcard" id="idcard" /></td> </tr> <tr> <td align="right">郵編</td> <td><input type="text" name="zipcode" id="zipcode" /></td> </tr> <tr> <td align="right">IP</td> <td><input type="text" name="ip" id="ip" /></td> </tr> <tr> <td> </td> <td><input type="radio" name="radio" id="radio" value="1" /> <label>項1</label> <input type="radio" name="radio" id="radio2" value="2" /> <label>項2</label> <input type="radio" name="radio" id="radio3" value="3" /> <label>項3</label> </td> </tr> <tr> <td> </td> <td><input name="checkbox" type="checkbox" id="checkbox" value="1" /> <label>項1</label> <input name="checkbox" type="checkbox" id="checkbox2" value="2" /> <label>項2</label> <input name="checkbox" type="checkbox" id="checkbox3" value="3" /> <label>項3</label></td> </tr> <tr> <td> </td> <td><select name="select" id="select"> <option value="">請選擇</option> <option value="1">項一</option> <option value="2">項二</option> </select> </td> </tr> <tr> <td> </td> <td><textarea name="textarea" id="textarea" cols="40" rows="3"></textarea></td> </tr> <tr> <td> </td> <td><input type="submit" name="button" id="button" value="Submit" /> <input type="reset" name="button2" id="button2" value="Reset" /></td> </tr> </table> </form> </body> </html>