本文实例讲述了JS模拟并美化的表单控件效果实例。分享给大家供大家参考。具体如下：

这里演示使用JS美化并模拟网页表单控件，十分漂亮的表单效果，使用时可以将代码内的JS保存为文件, 方便调用，使用方法：WellForm(element) //element 为表单元素。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

模拟表单控件

/* ----表单控件CSS开始---- ↓ */

.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结束---- ↑ */

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;}

window.onload = function ()

{

var aForm = document.getElementsByTagName("form");

//多个表单

for (var i = 0; i < aForm.length; i++) WellForm(aForm[i]);

};

/*------------------------------------------------- +

可以将以下JS保存为文件, 方便调用

使用方法：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, "");

}

}

// 上一个元素

function prevElement(obj)

{

return obj.previousSibling || obj.previousElementSibling || null

}

// 下一个元素

function nextElement(obj)

{

return obj.nextSibling || obj.nextElementSibling || null

}

// 自定义表单函数

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]));

//获取焦点

aText[i].onfocus = function ()

{

addClass(this, "WellTextH");

addClass(prevElement(this), "TextLH");

addClass(nextElement(this), "TextRH")

};

//失去焦点

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);

//插入结构

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";

//获取焦点

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

}

}

/* 复选框 */

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]));

//鼠标移入

aButton[i].onmouseover = function ()

{

addClass(this, "WellButtonH");

addClass(prevElement(this), "ButtonLH");

addClass(nextElement(this), "ButtonRH");

};

//鼠标移出

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";

//插入结构

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"

}

}

}

}

已婚

未婚

吃饭

睡觉

上网

打游戏

希望本文所述对大家的javascript程序设计有所帮助。