<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模擬表單控件</title>
<style type="text/css"> 
/* ----表單控件CSS開(kāi)始---- ↓ */
.WellForm *{margin:0;padding:0;}
.WellForm{font-size:12px;font-family:arial;line-height:21px;}
.WellForm pre{float:left;margin-right:10px;}
/*background*/
.WellForm .TextL,.WellForm .TextR,.WellForm .WellText,
.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect,
.WellForm .WellTextArea .T,
.WellForm .WellTextArea .T .TL,
.WellForm .WellTextArea .T .TM,
.WellForm .WellTextArea .B,
.WellForm .WellTextArea .B .BL,
.WellForm .WellTextArea .B .BM,
.WellForm .WellRadio,
.WellForm .WellCheckBox,
.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton
{background:url(images/WellForm.gif) no-repeat;}
/*WellText*/
.WellForm .TextL,.WellForm .TextR,.WellForm .WellText{float:left;width:5px;height:21px;}
.WellForm .TextL{background-position:0 0;}.WellForm .TextR{background-position:right 0;}
.WellForm .TextLH{background-position:0 -21px;}.WellForm .TextRH{background-position:right -21px;}
.WellForm .WellText{border:0;width:auto;height:17px;padding:2px 0;padding:3px 0 1px\9;*padding:3px 0 1px;font-family:arial;background-repeat:repeat-x;background-position:0 -42px;}
.WellForm .WellTextH{background-position:0 -63px;}
/*WellSelect*/
.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect{float:left;height:21px;}
.WellForm .SelectL{width:3px;background-position:0 -84px;}
.WellForm .SelectR{width:16px;cursor:pointer;background-position:right -84px;margin-right:5px;}
.WellForm .WellSelect{position:relative;cursor:pointer;background-repeat:repeat-x;background-position:0 -105px;}
.WellForm .WellSelect select{display:none;}
.WellForm .WellSelect em{position:absolute;top:0;left:3px;color:#fff;height:21px;display:block;line-height:21px;font-style:normal;}
.WellForm .WellSelect ul{list-style-type:none;position:absolute;top:18px;left:0;z-index:1000;display:none;background:#6C6D70;}
.WellForm .WellSelect ul li {color:#fff;height:20px;cursor:pointer;line-height:20px;padding-left:3px;}
.WellForm .WellSelect ul li.hover{background:#333;}
/*WellTextArea*/
.WellForm .WellTextArea{float:left;}
.WellForm .WellTextArea .T,
.WellForm .WellTextArea .T .TL,
.WellForm .WellTextArea .T .TM,
.WellForm .WellTextArea .B,
.WellForm .WellTextArea .B .BL,
.WellForm .WellTextArea .B .BM
{height:5px;overflow:hidden;}
.WellForm .WellTextArea .T{float:left;width:100%;background-position:right -126px;}
.WellForm .WellTextArea .TH{float:left;width:100%;background-position:right -131px;}
.WellForm .WellTextArea .T .TL{background-position:0 -126px;}
.WellForm .WellTextArea .TH .TL{background-position:0 -131px;}
.WellForm .WellTextArea .T .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -136px;}
.WellForm .WellTextArea .TH .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -141px;}
.WellForm .WellTextArea .B{float:left;width:100%;background-position:right -146px;}
.WellForm .WellTextArea .BH{float:left;width:100%;background-position:right -151px;}
.WellForm .WellTextArea .B .BL{background-position:0 -146px;}
.WellForm .WellTextArea .BH .BL{background-position:0 -151px;}
.WellForm .WellTextArea .B .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -156px;}
.WellForm .WellTextArea .BH .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -161px;}
.WellForm .WellTextArea .M,
.WellForm .WellTextArea .M .MR
{float:left;background:url(images/TextArea-1.gif) repeat-y;}
.WellForm .WellTextArea .M{background-position:0 0;}
.WellForm .WellTextArea .M .MR{background-position:right 0;}
.WellForm .WellTextArea .MH,
.WellForm .WellTextArea .MH .MR
{float:left;background:url(images/TextArea-2.gif) repeat-y;}
.WellForm .WellTextArea .MH{background-position:0 0;}
.WellForm .WellTextArea .MH .MR{background-position:right 0;}
.WellForm .WellTextArea textarea{float:left;border:0;margin:0 5px;overflow:auto;background:url(images/TextArea.gif);font-family:arial;font-size:12px;resize:none;}
/*WellRadio*/
.WellForm .WellRadio{float:left;width:13px;height:13px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:-15px -270px;}
.WellForm .WellRadioH{background-position:-15px -284px;}
.WellForm .WellRadio input{margin-top:13px;display:none;}
/*WellCheckBox*/
.WellForm .WellCheckBox{float:left; width:12px;height:12px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:0 -270px;}
.WellForm .WellCheckBoxH{background-position:0 -283px;}
.WellForm .WellCheckBox input{margin-top:12px;display:none;}
/*WellButton*/
.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton{cursor:pointer;float:left;width:5px;height:26px;}
.WellForm .ButtonL{background-position:0 -166px;}.WellForm .ButtonR{background-position:right -166px;margin-right:10px;}
.WellForm .ButtonLH{background-position:0 -192px;}.WellForm .ButtonRH{background-position:right -192px;}
.WellForm .WellButton{border:0;width:auto;font-size:12px;color:#fff!important;height:26px;padding:0 10px 3px;*padding-bottom:0;padding-bottom:0\9;font-family:arial;background-repeat:repeat-x;background-position:0 -218px;}
.WellForm .WellButtonH{background-position:0 -244px;}
/* ----表單控件CSS結(jié)束---- ↑ */
form{float:left;padding:20px;border:2px dashed #ccc;margin:20px 0 0 40px;width:380px;}
form .item{float:left;clear:both;width:100%;margin-bottom:10px;}
.WellForm label{float:left;width:4em;height:21px;text-align:right;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{
 var aForm = document.getElementsByTagName("form");
 //多個(gè)表單
 for (var i = 0; i < aForm.length; i++) WellForm(aForm[i]);
};
/*------------------------------------------------- +
 可以將以下JS保存為文件, 方便調(diào)用
 使用方法：WellForm(element) //element 為表單元素
 +------------------------------------------------- */
// 獲取class
function getClass(sClass, oParent)
{
 var aClass = []; 
 var reClass = new RegExp("(^| )" + sClass + "( |$)");
 var aElem = (oParent || document).getElementsByTagName("*");
 for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
 return aClass
}
// class是否存在
function hasClass(obj, sClass)
{
 var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
 return reg.test(obj.className)
}
// 添加class
function addClass(obj, sClass)
{
 hasClass(obj, sClass) || (obj.className += " "+sClass)
}
// 刪除class
function removeClass(obj, sClass)
{
 if (hasClass(obj, sClass))
 {
  var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
  obj.className = obj.className.replace(reg, "");
 }
}
// 上一個(gè)元素
function prevElement(obj)
{
 return obj.previousSibling || obj.previousElementSibling || null 
}
// 下一個(gè)元素
function nextElement(obj)
{
 return obj.nextSibling || obj.nextElementSibling || null 
}
// 自定義表單函數(shù)
function WellForm(form)
{
 var i = 0;
 var zIndex = 1;
 var aInput = form.getElementsByTagName("input"); 
 var aSelect = form.getElementsByTagName("select");
 var aTextArea = form.getElementsByTagName("textarea");
 form.className = "WellForm";
 /* 單行文本框 */
 var aText = [];
 for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "text" || aInput[i]["type"] == "password") && aText.push(aInput[i]);
 for (i = 0; i < aText.length; i++)
 {
  var oTextL = document.createElement("div");
  var oTextR = document.createElement("div"); 
  oTextL.className = "TextL";
  oTextR.className = "TextR";
  aText[i].className = "WellText";
  aText[i].parentNode.insertBefore(oTextL, aText[i]);  
  aText[i].parentNode.insertBefore(oTextR, nextElement(aText[i]));
  //獲取焦點(diǎn)
  aText[i].onfocus = function ()
  {
   addClass(this, "WellTextH");
   addClass(prevElement(this), "TextLH");
   addClass(nextElement(this), "TextRH")
  };
  //失去焦點(diǎn)
  aText[i].onblur = function ()
  {
   removeClass(this, "WellTextH");
   removeClass(prevElement(this), "TextLH");
   removeClass(nextElement(this), "TextRH")
  }
 }
 /* 多行文本框 */ 
 for (i = 0; i < aTextArea.length; i++)
 {
  var oTextArea = document.createElement("div");
  oTextArea.className = "WellTextArea";
  //上邊框
  var oT = document.createElement("div");
  var oTL = document.createElement("div");
  var oTM = document.createElement("div");  
  oT.className = "T";
  oTL.className = "TL";
  oTM.className = "TM";  
  oTL.appendChild(oTM);
  oT.appendChild(oTL);
  //中間邊框
  var oM = document.createElement("div");
  var oMR = document.createElement("div");  
  oM.className = "M";
  oMR.className = "MR";  
  oM.appendChild(oMR);
  //下邊框
  var oB = document.createElement("div");
  var oBL = document.createElement("div");
  var oBM = document.createElement("div");  
  oB.className = "B";
  oBL.className = "BL";
  oBM.className = "BM";  
  oBL.appendChild(oBM);
  oB.appendChild(oBL);  
  //插入結(jié)構(gòu)
  aTextArea[i].parentNode.insertBefore(oTextArea, aTextArea[i]);  
  oMR.appendChild(aTextArea[i]);
  oTextArea.appendChild(oT);  
  oTextArea.appendChild(oM);
  oTextArea.appendChild(oB);  
  oTextArea.style.width = oMR.offsetWidth + "px";
  //獲取焦點(diǎn)
  aTextArea[i].onfocus = function ()
  {
   var M = this.parentNode.parentNode;
   addClass(M, "MH");
   addClass(prevElement(M), "TH");
   addClass(nextElement(M), "BH")
  };
  aTextArea[i].onblur = function ()
  {
   var M = this.parentNode.parentNode;
   removeClass(M, "MH");
   removeClass(prevElement(M), "TH");
   removeClass(nextElement(M), "BH")
  }
 }
 /* 單選框 */
 var aRadio = [];
 for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "radio" && aRadio.push(aInput[i]);
 for (i = 0; i < aRadio.length; i++)
 {
  var oRadio = document.createElement("div");
  oRadio.className = "WellRadio"; 
  aRadio[i].parentNode.insertBefore(oRadio, aRadio[i]);
  oRadio.appendChild(aRadio[i]);
  aRadio[i].checked && addClass(aRadio[i].parentNode, "WellRadioH");
  oRadio.onclick = function ()
  {
   var siblings = getClass("WellRadio", this.parentNode);
   for (i = 0; i < siblings.length; i++)
   {
    removeClass(siblings[i], "WellRadioH");
    siblings[i].children[0].checked = false;
   }
   addClass(this, "WellRadioH");
   this.children[0].checked = true
  }
 }
 /* 復(fù)選框 */
 var aCheckBox = [];
 for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "checkbox" && aCheckBox.push(aInput[i]);
 for (i = 0; i < aCheckBox.length; i++)
 {
  var oCheckBox = document.createElement("div");
  oCheckBox.className = "WellCheckBox"; 
  aCheckBox[i].parentNode.insertBefore(oCheckBox, aCheckBox[i]);
  oCheckBox.appendChild(aCheckBox[i]);
  aCheckBox[i].checked && addClass(aCheckBox[i].parentNode, "WellCheckBoxH");
  oCheckBox.onclick = function ()
  {   
   this.children[0].checked = !this.children[0].checked;
   this.children[0].checked ? addClass(this, "WellCheckBoxH") : removeClass(this, "WellCheckBoxH")
  }
 }
 /* 按鈕 */
 var aButton = [];
 for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "button" || aInput[i]["type"] == "submit") && aButton.push(aInput[i]);
 for (i = 0; i < aButton.length; i++)
 {
  var oBtnL = document.createElement("div");
  var oBtnR = document.createElement("div");  
  oBtnL.className = "ButtonL";
  oBtnR.className = "ButtonR";  
  aButton[i].className = "WellButton";
  aButton[i].parentNode.insertBefore(oBtnL, aButton[i]);
  aButton[i].parentNode.insertBefore(oBtnR, nextElement(aButton[i]));
  //鼠標(biāo)移入
  aButton[i].onmouseover = function ()
  {
   addClass(this, "WellButtonH");
   addClass(prevElement(this), "ButtonLH");
   addClass(nextElement(this), "ButtonRH"); 
  };
  //鼠標(biāo)移出
  aButton[i].onmouseout = function ()
  {
   removeClass(this, "WellButtonH");
   removeClass(prevElement(this), "ButtonLH");
   removeClass(nextElement(this), "ButtonRH"); 
  }
 }
 /* 下拉菜單 */
 for (i = 0; i < aSelect.length; i++)
 {
  var oFragment = document.createDocumentFragment();
  var oSelectL = document.createElement("div");
  var oSelectR = document.createElement("div");
  var oWellSelect = document.createElement("div");
  var oEm = document.createElement("em");
  var oUl = document.createElement("ul");
  oSelectL.className = "SelectL";
  oSelectR.className = "SelectR";
  oWellSelect.className = "WellSelect";  
  //插入結(jié)構(gòu)
  aSelect[i].parentNode.insertBefore(oSelectL, aSelect[i]);
  aSelect[i].parentNode.insertBefore(oSelectR, nextElement(aSelect[i]));
  oUl.style.width = oWellSelect.style.width = aSelect[i].offsetWidth - oSelectR.offsetWidth / 2 + "px";  
  for (var j = 0; j < aSelect[i].options.length; j++)
  {
   var oLi = document.createElement("li");
   oLi.innerHTML = aSelect[i].options[j].text;
   oLi["sValue"] = aSelect[i].options[j].value;
   oFragment.appendChild(oLi);
   aSelect[i].options[j].selected && (oEm.innerHTML = aSelect[i].options[j].text)
  }
  oUl.appendChild(oFragment);
  oWellSelect.appendChild(oEm);
  oWellSelect.appendChild(oUl);
  aSelect[i].parentNode.insertBefore(oWellSelect, aSelect[i]);
  oWellSelect.appendChild(aSelect[i]);
  oWellSelect.onclick = oSelectR.onclick = function (event)
  {
   var o = this.getElementsByTagName("ul")[0] || prevElement(this).getElementsByTagName("ul")[0];
   var aUl = form.getElementsByTagName("ul");
   this.parentNode.style.position = "relative";
   this.parentNode.style.zIndex = zIndex++;
   o.style.display = o.style.display == "block" ? "none" : "block";
   for (i = 0; i < aUl.length; i++)
   {
    if (o == aUl[i]) continue;
    aUl[i].style.display = "none";
   }
   var aLi = o.getElementsByTagName("li");
   for (i = 0; i < aLi.length; i++)
   {
    aLi[i].onmouseover = function ()
    {
     this.className = "hover" 
    };
    aLi[i].onmouseout = function ()
    {
     this.className = "" 
    };
    aLi[i].onclick = function ()
    {
     prevElement(this.parentNode).innerHTML = this.innerHTML;
     nextElement(this.parentNode).value = this.sValue
    }
   }
   (event || window.event).cancelBubble = true;
   document.onclick = function ()
   {
    o.style.display = "none" 
   }
  }
 }
}
</script>
</head>
<body>
<form>
 <div class="item"><label>姓名：</label><input type="text" name="name" /></div>
 <div class="item"><label>電話：</label><input type="text" name="tel" /></div>
 <div class="item">
  <label>性別：</label>
  <select name="sex">
   <option value="男孩">男孩</option>
   <option value="女孩" selected="selected">女孩</option>
   <option value="人妖">人妖</option>
  </select>
 </div>
 <div class="item">
  <label>生日：</label>
  <select name="month">
   <option value="1">1月</option>
   <option value="2">2月</option>
   <option value="3">3月</option>
   <option value="4">4月</option>
   <option value="5">5月</option>
   <option value="6">6月</option>
   <option value="7" selected="selected">7月</option>
   <option value="8">8月</option>
   <option value="9">9月</option>
   <option value="10">10月</option>
  </select>
  <select name="day">
   <option value="1">1號(hào)</option>
   <option value="2">2號(hào)</option>
   <option value="3">3號(hào)</option>
   <option value="4">4號(hào)</option>
   <option value="5">5號(hào)</option>
   <option value="6" selected="selected">6號(hào)</option>
   <option value="7">7號(hào)</option>
   <option value="8">8號(hào)</option>
   <option value="9">9號(hào)</option>
   <option value="10">10號(hào)</option>
   <option value="11">11號(hào)</option>
   <option value="12">12號(hào)</option>
   <option value="13">13號(hào)</option>
   <option value="14">14號(hào)</option>
   <option value="15">15號(hào)</option>
   <option value="16">16號(hào)</option>
  </select>
  <select name="year">
   <option value="2000">2000年</option>
   <option value="2001">2001年</option>
   <option value="2002">2002年</option>
   <option value="2003">2003年</option>
   <option value="2004">2004年</option>
   <option value="2005">2005年</option>
   <option value="2006">2006年</option>
   <option value="2007">2007年</option>
   <option value="2008">2008年</option>
   <option value="2009">2009年</option>
   <option value="2010" selected="selected">2010年</option>
   <option value="2011">2011年</option>
   <option value="2012">2012年</option>
   <option value="2013">2013年</option>
  </select>
 </div>
 <div class="item">
  <label>婚姻：</label>
  <input type="radio" name="marry" value="已婚" /><pre>已婚</pre>
  <input type="radio" name="marry" value="未婚" checked="checked" /><pre>未婚</pre>
 </div>
 <div class="item">
  <label>愛(ài)好：</label>
  <input type="checkbox" name="like" value="吃飯" /><pre>吃飯</pre>
  <input type="checkbox" name="like" value="睡覺(jué)" /><pre>睡覺(jué)</pre>
  <input type="checkbox" name="like" value="上網(wǎng)" checked="checked" /><pre>上網(wǎng)</pre>
  <input type="checkbox" name="like" value="打游戲" checked="checked" /><pre>打游戲</pre>
 </div>
 <div class="item"><label>地址：</label><input type="text" style="width:300px;" name="address" /></div>
 <div class="item"><label>備注：</label><textarea cols="50" rows="5" style="width:300px;" name="remark"></textarea></div>
 <div class="item"><label>說(shuō)明：</label><textarea cols="50" rows="5" style="width:300px;" name="desc"></textarea></div>
 <div class="item"><label></label><input type="submit" value="提交" /></div>
</form>
<form>
 <div class="item"><label>用戶名：</label><input type="text" name="username" /></div>
 <div class="item"><label>密碼：</label><input type="password" name="pwd" /></div>
 <div class="item"><label>驗(yàn)證碼：</label><input type="text" name="code" style="width:60px;" /></div>
 <div class="item"><label></label><input type="submit" value="提交" /></div>
</form>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章: