1顶

漂亮提交信息表单

稿源：互联网 2022-07-29 13:41:39 点击： 3221 撤稿纠错

精美表单样式，符合web标准，你也可以自定义。

以下讨论的是和表单相关的漂亮提交信息表单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 漂亮提交信息表单 站长特效网欢迎您。</title>
<style type="text/css">
form{
margin: 0px auto;
width: 450px;
border: solid 1px #CCCCCC;
}
.bo{
border-bottom: solid 1px #CCCCCC;
}
label{
float: left;
padding: 10px 0px 4px 30px;
}
input{
padding: 1px;
}
input,textarea{
border: 1px solid #CCCCCC;
margin: 5px 0px;
}
textarea{
padding: 2px;
}
.bt{
width: 38px;
height: 20px;
font-size: 11px;
border: solid 1px #CCCCCC;
background: #FBFBFB;
text-align: center;
}
.btcenter{
text-align: center;
clear: left;
padding: 4px 0px 0px;
}
.sffocus {
background: #F0F9FB; /*----for IE----*/
border: 1px solid #1D95C7;
}
textarea:focus, input:focus {
background: #F0F9FB; /*----for firefox......----*/
border: 1px solid #1D95C7;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
margin-top: 20px;
}
</style>
<script  type="text/javascript">
function suckerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
sfHover = function(sfEls) {
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
sfFocus = function(sfEls) {
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onfocus=function() {
this.className+=" sffocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\b"), "");
}
}
}
sfActive = function(sfEls) {
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmousedown=function() {
this.className+=" sfactive";
}
sfEls[i].onmouseup=function() {
this.className=this.className.replace(new RegExp(" sfactive\b"), "");
}
}
}
sfTarget = function(sfEls) {
var aEls = document.getElementsByTagName("A");
document.lastTarget = null;
for (var i=0; i<sfEls.length; i++) {
if (sfEls[i].id) {
if (location.hash==("#" + sfEls[i].id)) {
sfEls[i].className+=" sftarget";
document.lastTarget=sfEls[i];
}
for (var j=0; j<aEls.length; j++) {
if (aEls[j].hash==("#" + sfEls[i].id)) aEls[j].targetEl = sfEls[i];
aEls[j].onclick = function() {
if (document.lastTarget) document.lastTarget.className = document.lastTarget.className.replace(new RegExp(" sftarget\b"), "");
if (this.targetEl) this.targetEl.className+=" sftarget";
document.lastTarget=this.targetEl;
return true;
}
}
}
}
}
suckerfish(sfHover, "p");
suckerfish(sfActive, "p");
suckerfish(sfHover, "INPUT");
suckerfish(sfActive, "TEXTAREA");
suckerfish(sfFocus, "INPUT");
suckerfish(sfFocus, "TEXTAREA");
suckerfish(sfTarget, "H5");
suckerfish(sfHover, "pre");
suckerfish(sfActive, "pre");
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<form action="#" method="post" name="myform" id="myform">
<div class="bo"><label for="name">姓名：</label>
<input type="text"size="20" name="name" id="name" maxlength="10" /></div>
<div class="bo"><label for="tel">电话：</label>
<input type="text" size="20" name="tel" id="tel" maxlength="16" /></div>
<div class="bo"><label for="mo">主题：</label>
<input type="text" size="30" name="mo" id="mo" maxlength="20" /></div>
<div class="bo"><label for="con">内容：</label>
<textarea cols="40" rows="8" name="con" id="con">站长特效网，打造国内最帅的网页特效站@
</textarea>.
</div>
</form>
</body>
</html>

关于漂亮提交信息表单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010090764510.shtml方便下次再访问哦。

·上一篇： css实现按钮背景图片
·下一篇： 圆角按钮自适应宽度css代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

漂亮提交信息表单

文章分类LIST >>返回首页

最新游戏

最新新闻