js个人信息提交表单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js个人信息提交表单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>js个人信息提交表单代码</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<dl class="formbox">
	<form action="#" method="get">
		<dt>填写基本信息</dt>
		<dd><input id="name" name="name" type="text" class="text" value="尊姓大名" /></dd>
		<dd><input id="contact" name="contact" type="text" class="text" value="联系QQ或MSN" /></dd>
		<dd style="z-index: 2;">
			<div id="btn_come_from_drop_down" class="select_normal"></div>
			<input id="come_from" name="come_from" type="text" class="text" value="你来自哪里？" />
			<ul id="come_from_drop_down" class="area">
				<li class="active">北京</li>
				<li>上海</li>
				<li>杭州</li>
				<li>深圳</li>
				<li>妙味课堂</li>
				<li>乌鲁木奇</li>
				<li>哈尔滨</li>
				<li>天津</li>
				<li>湖北</li>
				<li>海南</li>
			</ul>
		</dd>
		<dd class="clear">
			<input id="gender" name="gender" type="hidden" />
			<h2>性别</h2>
			<ul class="sex">
				<li id="gender_man" title="男" class="men_active"></li>
				<li id="gender_woman" title="女" class="woman_normal"></li>
			</ul>
		</dd>
		<dd class="clear">
			<input id="hobby" name="hobby" type="hidden" />
			<h2>爱好</h2>
			<ul id="hobby_drop_down" class="hobby">
				<li>上网</li>
				<li>看电影</li>
				<li>游泳</li>
				<li>打篮球</li>
				<li>唱歌</li>
				<li>旅游</li>
			</ul>
		</dd>
		<dd>
			<h2>就这样！</h2>
			<div class="btn"><input type="submit" value="提交" /></div>
		</dd>
	</form>
</dl>
</body>
</html>

JS代码(script.js):

//璁剧疆鎻愮ず鏂囨湰var g_aDefaultText=[];
	var g_aDefaultTextColor=[];
	var g_aNormalTextColor=[];
	var g_iDefaultTextMaxIndex=0;
	function setDefaultText(oInputElement,sDefaultText,sDefaultTextColor,sNormalTextColor){
	//灏嗕俊鎭繚瀛樿捣鏉ワ紝浠ュ悗浣跨敤g_aDefaultText.push(sDefaultText);
	g_aDefaultTextColor.push(sDefaultTextColor);
	g_aNormalTextColor.push(sNormalTextColor);
	//鍒濆鍖栦负鎻愮ず鏂囨湰oInputElement.value=sDefaultText;
	oInputElement.style.color=sDefaultTextColor;
	//璁剧疆鈥滄槸鍚︽鍦ㄦ樉绀烘彁绀烘枃鏈€濅俊鎭?oInputElement.isDefault=true;
	oInputElement.index=g_iDefaultTextMaxIndex++;
	//娣诲姞浜嬩欢oInputElement.onfocus=__defaultTextOnFocusHandler__;
	oInputElement.onblur=__defaultTextOnBlurHandler__;
}
function defaultTextSetText(oInputElement,sText){
	oInputElement.isDefault=false;
	oInputElement.value=sText;
	oInputElement.style.color=g_aNormalTextColor[oInputElement.index];
}
function __defaultTextOnFocusHandler__(ev){
	if(this.isDefault){
	this.value='';
	this.style.color=g_aNormalTextColor[this.index];
}
}
function __defaultTextOnBlurHandler__(ev){
	if(this.value.length){
	this.isDefault=false;
}
else{
	this.isDefault=true;
	this.value=g_aDefaultText[this.index];
	this.style.color=g_aDefaultTextColor[this.index];
}
}
//涓嬫媺鍒楄〃var g_aUl=[];
	var g_aFnOnItemSelect=[];
	var g_iDropDownMaxIndex=0;
	function setDropDown(oUl,fnOnItemSelect){
	var aLis=oUl.getElementsByTagName('li');
	var i;
	//g_aUl.push(oUl);
	g_aFnOnItemSelect.push(fnOnItemSelect);
	//oUl.style.display='none';
	for(i=0;
	i<aLis.length;
	i++){
	aLis[i].className='';
	aLis[i].index=g_iDropDownMaxIndex;
	aLis[i].onmouseover=__dropDownOnMouseOverHandler__;
	aLis[i].onmouseout=__dropDownOnMouseOutHandler__;
	aLis[i].onmousedown=__dropDownOnMouseDownHandler__;
}
g_iDropDownMaxIndex++;
}
function __dropDownOnMouseOverHandler__(ev){
	this.className='active';
}
function __dropDownOnMouseOutHandler__(ev){
	this.className='';
}
function __dropDownOnMouseDownHandler__(ev){
	g_aFnOnItemSelect[this.index](this.innerHTML);
	g_aUl[this.index].style.display='none';
}
//鎬у埆var g_aGenderManBtn=[];
	var g_aGenderWomanBtn=[];
	var g_aInputGender=[];
	var g_iGenderMaxIndex=0;
	function setGenderSelector(oGenderManElement,oGenderWomanElement,oInputGender){
	g_aGenderManBtn.push(oGenderManElement);
	g_aGenderWomanBtn.push(oGenderWomanElement);
	g_aInputGender.push(oInputGender);
	oInputGender.value='male';
	//femaleoGenderManElement.className='men_active';
	oGenderWomanElement.className='woman_normal';
	oGenderManElement.index=g_iGenderMaxIndex;
	oGenderWomanElement.index=g_iGenderMaxIndex;
	g_iGenderMaxIndex++;
	oGenderManElement.onmousedown=__genderManBtnClickHandler__;
	oGenderWomanElement.onmousedown=__genderWomanBtnClickHandler__;
}
function __genderManBtnClickHandler__(ev){
	if(this.className === 'men_normal'){
	this.className='men_active';
	g_aGenderWomanBtn[this.index].className='woman_normal';
	g_aInputGender[this.index].value='male';
}
}
function __genderWomanBtnClickHandler__(ev){
	if(this.className === 'woman_normal'){
	this.className='woman_active';
	g_aGenderManBtn[this.index].className='men_normal';
	g_aInputGender[this.index].value='female';
}
}
//鍏磋叮function setHobby(oUl,oInput){
	var aLis=oUl.getElementsByTagName('li');
	var aSelectedValue=[];
	var i=0;
	oInput.value=aLis[0].innerHTML;
	for(i=0;
	i<aLis.length;
	i++){
	aLis[i].onmousedown=function (){
	if(this.className=='active'){
	for(i=0;
	i<aSelectedValue.length;
	i++){
	if(aSelectedValue[i]==this.innerHTML){
	aSelectedValue.splice(i,1);
	break;
}
}
this.className='';
}
else{
	aSelectedValue.push(this.innerHTML);
	this.className='active';
}
oInput.value=aSelectedValue.join(',');
}
;
}
}
window.onload=function (){
	var oInputName=document.getElementById('name');
	var oInputContact=document.getElementById('contact');
	var oInputComeFrom=document.getElementById('come_from');
	var oUlDropDown=document.getElementById('come_from_drop_down');
	var oBtnComeFromDropDown=document.getElementById('btn_come_from_drop_down');
	var oBtnGenderMan=document.getElementById('gender_man');
	var oBtnGenderWoman=document.getElementById('gender_woman');
	var oInputGender=document.getElementById('gender');
	var oInputHobby=document.getElementById('hobby');
	var oUlHobbyDropDown=document.getElementById('hobby_drop_down');
	setDefaultText(oInputName,'灏婂澶у悕','#777777','black');
	setDefaultText(oInputContact,'鑱旂郴QQ鎴朚SN','#777777','black');
	setDefaultText(oInputComeFrom,'浣犳潵鑷摢閲岋紵','#777777','black');
	setDropDown(oUlDropDown,function (sText){
	defaultTextSetText(oInputComeFrom,sText);
}
);
	oBtnComeFromDropDown.onmousedown=function (ev){
	var oEvent=window.event||ev;
	oEvent.cancelBubble=true;
	if(oUlDropDown.style.display === 'none'){
	this.className='select_active';
	oUlDropDown.style.display='block';
}
else{
	this.className='select_normal';
	oUlDropDown.style.display='none';
}
}
;
	document.onmousedown=function (){
	oBtnComeFromDropDown.className='select_normal';
	oUlDropDown.style.display='none';
}
;
	setGenderSelector(oBtnGenderMan,oBtnGenderWoman,oInputGender);
	setHobby(oUlHobbyDropDown,oInputHobby);
}

CSS代码(style.css):

@charset "utf-8";*{padding:0;margin:0;}
li{list-style:none;}
.clear{zoom:1;}
.clear:after{content:'\20';display:block;clear:both;}
/* formbox */
.formbox{width:350px;height:460px;padding:25px;margin:20px auto 0;background:url(images/dl_bg.gif) no-repeat;font-family:Microsoft YaHei;}
.formbox dt{font-size:22px;color:#6699cc;font-weight:bold;margin-bottom:10px;}
.formbox dd{width:350px;position:relative;margin-bottom:20px;}
.formbox dd h2{float:left;width:90px;padding-top:10px;color:#999999;font-size:14px;}
.text{border:none;width:340px;height:42px;line-height:42px;padding:0 10px;background:url(images/ico.gif) no-repeat;color:#777777;font-size:16px;font-weight:bold;}
.select_normal{background:url(images/ico.gif) no-repeat -199px -53px;position:absolute;top:2px;left:300px;width:50px;height:40px;cursor:pointer;}
.select_active{background:url(images/ico.gif) no-repeat -256px -53px;position:absolute;top:2px;left:300px;width:50px;height:40px;cursor:pointer;}
.area{width:300px;border:1px solid #bababa;background:#fff;position:absolute;top:42px;left:0;display:none;}
.area li{width:140px;line-height:30px;float:left;padding-left:10px;cursor:pointer;}
.area .active{background:#ffccff;}
.sex{float:left;width:83px;height:35px;background:url(images/ico.gif-) no-repeat 0 -53px;cursor:pointer;}
.sex li{float:left;width:41px;height:35px;}
.men_normal{background:url(images/ico.gif) no-repeat -92px -53px;}
.men_active{background:url(images/ico.gif) no-repeat 0 -53px;}
.woman_normal{background:url(images/ico.gif) no-repeat -42px -53px;}
.woman_active{background:url(images/ico.gif) no-repeat -134px -53px;}
.hobby{width:250px;overflow:hidden;}
.hobby li{float:left;width:52px;height:42px;line-height:42px;padding-left:30px;background:url(images/ico.gif) no-repeat -326px -50px;color:#666666;cursor:pointer;}
.hobby .active{background:url(images/ico.gif) no-repeat -70px -100px;}
.btn input{border:none;width:54px;height:43px;background:url(images/ico.gif) no-repeat 0 -100px;color:#fff;font-family:Microsoft YaHei;font-weight:bold;}

附件:下载该文件资源,减少时间成本(增值服务)