js模拟表单html形式,JS模拟并美化的表单控件完整实例

最新推荐文章于 2023-05-10 09:32:31 发布
最新推荐文章于 2023-05-10 09:32:31 发布
阅读量244 收藏
点赞数
文章标签： js模拟表单html形式

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

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

运行效果截图如下：

e40093a2c08e7274af845967ca6b9e60.png

在线演示地址如下：

具体代码如下：

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

}

}

}

}

姓名：
电话：

性别：

男孩

女孩

人妖

生日：

1月

2月

3月

4月

5月

6月

7月

8月

9月

10月

1号

2号

3号

4号

5号

6号

7号

8号

9号

10号

11号

12号

13号

14号

15号

16号

2000年

2001年

2002年

2003年

2004年

2005年

2006年

2007年

2008年

2009年

2010年

2011年

2012年

2013年

婚姻：

已婚
未婚

爱好：

吃饭
睡觉
上网
打游戏
地址：
备注：
说明：
用户名：
密码：
验证码：

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

Ivankaswift
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript 自动填写表单的实现方法
01-19
本文没有什么技术上创新，只要会一点Javascript的技术就可以写了。 第一步： 在页面查看源代码，把Form中包含的需要填列的HTML控件找出来如： <form name=”mainfrm” action=”” method=”post”> <input type=”text” name=”username”/> <input type=”submit” value=”submit”/> </form> 第二步：编写代码 [removed]mainfrm.username.value=”stangray”;mainfrm.submit.focus(); 第三步： 打开浏览器的“收藏夹”
自定义表单js网页部件
ICode联盟
01-29 104
自定义表单js网页部件，可以用拖拽的方式生成表单样式，可以生成json代码。
js前端，一个漂亮的自写表格table
hwlll的博客
05-10 2447
将th的 position设置为sticky，固定首行，也就是top=0，为其设置为一个区分的颜色。由于上面的滚动效果不好，看起来很卡顿，下面优化了滚动效果，加入缓动。然后利用timer定时器和scrollTop 属性设置滚动效果，table里的数据在data里返回，以下是实例数据。这样我们就拥有了一个没有样式的基础表格。
使用js模拟表单上传
weixin_43831905的博客
08-23 389
1、前端js写法 //构建表单参数 var formData = new FormData(); formData.append("id", "${enterprise.id }"); formData.append("enterpriseName", enterpriseName); var logo = document.getElementById("logo").files[0];//logo文件 ...
js模拟form表单提交Http请求，并实现跳转到新窗口打开页面
美奇软件开发工作室
01-06 6205
导读： 一些特殊的应用场景，需要在jquery里实现对后端的访问请求，同时在新窗口中打开页面。一般情况下我们在jquery里请求后端业务都是用会ajax，但ajax是会返回数据的，并且不会打开新页面窗口，所以ajax并不符合我们的场景需求。因此我们需要用另一种方式，也就是模拟form表单，实现post提交，并打开新窗口。 代码如下： /** *模拟form表单，实现post提交，并打开新窗口 * url：请求链接 * postData：json格式的post参数 */ function po
JS模拟并美化的表单控件完整实例
10-23
主要介绍了JS模拟并美化的表单控件实现方法,涉及javascript结合css样式美化表单的功能,非常美观实用,需要的朋友可以参考下
使用css美化html表单控件详细示例(表单美化)
09-28
主要介绍了使用css美化html表单控件详细示例(表单美化),需要的朋友可以参考下
javascript表单控件实例讲解
10-21
主要为大家详细介绍了javascript表单控件实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS动态模拟Form表单提交数据
旷野历程
08-25 2312
分享知识 传递快乐 JS动态模拟Form表单提交数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick="subForm()">提交</button> </body> &..
纯js+css自定义form表单美化控件
01-06
这是一款纯js和css制作的一个用户注册界面的美化表单空间，将文本框和单选框、复选框等空间全部从新设计美化。效果演示地址：http://www.xwcms.net/js/bddm/55798.html
js，模拟表单提交
08-02
再有一些时候我们不得不[removed] = url带参进行一些数据的传递，这时我们又不想将参数就这样放在链接中时，就可以用到这个js。
textarea无边框文本透明背景文本样式
热门推荐
自由空间
02-28 2万+
textarea{ border:0; background-color:transparent; /*scrollbar-arrow-color:yellow; scrollbar-base-color:lightsalmon; overflow: hidden;*/ color: #666464; height: auto; }
js模拟表单html形式,js模拟点击以提交表单为例兼容主流浏览器
weixin_29679557的博客
06-10 275
在实际的应用开发中，我们会常常用到JS的模事件，但有时会遇到一些问题，比如说点击事件，举个简单的例子，点击表单外的“提交”按钮来提交表单。上代码吧。Html:请单击“提交”，测试提交按钮的单击事件也被触发了。提交Javscript:var sub = document.getElementById("subbtn");var btn = document.getElementById("btn")...
js模拟表单提交数据..
愿世界和平
04-08 1820
var form = $('&lt;form&gt;&lt;/form&gt;'); form.attr('method','post') form.attr('action','/manage/index') var input1 = $('&lt;input name...
分享98个JS表单脚本，总有一款适合您
zy0412326的专栏
02-06 603
js
表单控件美化：自定义表单控件的显示效果
fylxy000的博客
07-10 258
原理：隐藏input元素，通过其他标签定义自己想要的样子 input{ display: none; } input[type="file"] + div{ background: fuchsia; color: #fff; width: 200px; padding: 10px 30px; text-align: center; border-radius: 10px; letter-spacing: 5px; } <form
JS:表单案例（效果图及代码）
weixin_59519449的博客
10-07 531
图上为效果图 以下为代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box>div{ border: 1px solid red; margin: 10px; padding: 10px; } </sty...
html如何把素材做成按钮,html botton html submit按钮表单控件与CSS美化
最新发布
06-12
要将素材做成按钮，可以使用HTML中的button标签或者input标签的type属性设置为button或submit。...使用以上代码可以创建一个绿色的按钮，并设置了圆角、字体大小、内边距等样式。可以根据实际需求修改样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值