<!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"
>
.WellForm *{margin:0;padding:0;}
.WellForm{font-size:12px;font-family:arial;line-height:21px;}
.WellForm pre{float:left;margin-right:10px;}
.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;}
.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;}
.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;}
.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;}
.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;}
.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;}
.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;}
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"
);
for
(
var
i = 0; i < aForm.length; i++) WellForm(aForm[i]);
};
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
}
function
hasClass(obj, sClass)
{
var
reg =
new
RegExp(
"(^|\\s)"
+ sClass +
"(\\s|$)"
);
return
reg.test(obj.className)
}
function
addClass(obj, sClass)
{
hasClass(obj, sClass) || (obj.className +=
" "
+sClass)
}
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 &
#63; 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"
&
#63; "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号</option>
<option value=
"2"
>2号</option>
<option value=
"3"
>3号</option>
<option value=
"4"
>4号</option>
<option value=
"5"
>5号</option>
<option value=
"6"
selected=
"selected"
>6号</option>
<option value=
"7"
>7号</option>
<option value=
"8"
>8号</option>
<option value=
"9"
>9号</option>
<option value=
"10"
>10号</option>
<option value=
"11"
>11号</option>
<option value=
"12"
>12号</option>
<option value=
"13"
>13号</option>
<option value=
"14"
>14号</option>
<option value=
"15"
>15号</option>
<option value=
"16"
>16号</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 class=
"brush:php;toolbar:false"
>已婚