Css样式表单

Css样式在表单中的应该:

CSS层叠样式单,它可以定义页面元素的外观,包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等等。

1.  字体样式的应用:
字体样式包括:字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font)

►   文本框里的文字是加粗的,大小是9pt,字体是宋体,代码:
<input type="text" name="formExam"size="10" maxlength="10" style="font-family:宋体; font-size: 12px; font-weight: bold" value="加粗">

►   口令框文字是红色的,代码:
<input type="password"name="formExam3" style="font-size: 9pt; color: #FF0000"size="8" maxlength="8">

►   下拉框文字颜色是红色的,字体是Verdana,大小是9pt,代码:
<select name="select" size="1"style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000">
<option value="2" selected>yesky.com</option>
<option value="1">redidea.net</option>
</select>

►   多行文本框了的字体是Verdana,有下划线,大小是9pt,代码:
<TEXTAREA name="formExam2"cols="30" rows="3" style="font-family:Verdana, Arial;font-size: 9pt; color: #000099; text-decoration: underline" align=right>underline css style</TEXTAREA>

2.   背景颜色和图像样式的应用

背景颜色利用background-color属性,背景图像利用background-image属性

►   文本框背景是黑色的,字体是白色的,代码:
<input type="text" name="RedFld"size="10" maxlength="10" style="color: #FFFFFF;background-color: #000000">

►   口令框背景是灰色的,代码:
<input type="password"name="RedFld3" size="10" maxlength="10"style="background-color: #999999">

►   单选和复选按钮的背景是红色的,代码:
<input type="checkbox"name="checkbox" value="checkbox"style="background-color: #FF0000">
<input type="radio"name="radiobutton" value="radiobutton"style="background-color: #FF0000">

►   下拉选择框的选项是丰富多彩的背景,代码:
<select name="select2" size="1">
<option selected style="background-color:#FF0000">yesky.com</option>
<option style="background-color: #0000CC">redidea.com</option>
<option style="background-color: #009900">chinabyte.com</option>
<option style="background-color: #ff33cc">sina.com</option>
<option style="background-color: #999999">sohu.com</option>
</select>

►   多行文本框的背景是一个图像,代码:
<TEXTAREA name="RedFld2" cols="25"rows="3" wrap="VIRTUAL" style="background-image:url(back.gif)"></TEXTAREA>

►   submit1按钮的背景是黄色的,代码:
<input type="submit" name="Submit3"value="Submit1" style="background-color: #FF9900">

►   submit2按钮的背景是一个图像,代码:
<input type="submit"name="Submit22" value="Submit2"style="background-image: url(back.gif)">

3.   边框样式的应用

和边框有关的属性有:
边框式样border-style、上边框border-top、右边框border-right、下边框border-bottom、左边框border-left、边框颜色border-color、边框宽度 border-width、上边框宽度border-top-width、右边框宽度border-right-width、下边框宽度border-bottom-width、左边框宽度border-left-width、边框 border

►   文本框有8种类型边框样式,即border-style:
none :无边框,与任何指定的border-width值无关;dotted :点线; dashed :虚线;solid :实线边框; double :双线边框,两条单线与其间隔的和等于指定的border-width值; groove :3D凹槽; ridge :边框突起; inset :3D凹边;outset :3D凸边
边框宽度的设置有一个规律:
border-width: [ thin | medium | thick | <长度> ]{1,4}
边框宽度用一到四个值来设置元素的边框宽度,它们分别被应用于上、右、下和左边框宽度。如果只给出一个值,它被应用于所有边框宽度。如果两个或三个值给出了,省略了的值与对边相等

例如:<input type="text" name="RedF"style="border-color: #006600; border-style: dotted; border-width:1px">
边框颜色的设置有一个规律:
border-colr: <颜色>{1,4}
边框颜色用一到四个值来设置元素的边框颜色。如果四个值都给出了,它们分别被应用于上、右、下和左边框颜色。如果只给出一个值,它被应用于所有边框颜色。如果两个或三个值给出了,省略了的值与对边相等。

►   对于多行文本框以及按钮,设置边框的方法和文本框一样;

►   由于下拉选择框Select不支持边框的设置,所以对其设置无效;

►   单选按钮和复选按钮的边框,设置的效果不十分协调,所以建议不要对它们设置;

★   表单的提交

表单是用来采集用户输入的数据,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以后,还要保证用户的数据提交到特定的程序。

1.   数据的检验

数据的检验,通常有两种程序:客户端检验和服务器端检验。客户端检验,比较快,服务器端检验,相对来说比较慢,为了确保安全,通常同时采用,这样就可以避免用户刻意破坏。不管采用什么方式,数据检验的原理都是一样的,一旦用户输入的数据不符合规定,就报错,要求用户重新输入,客户端检验常使用Javascrip脚本,服务器端的视系统而定。下面举个简单例子说明一下:

►   给表单添加了onSubmit事件,通过onSubmit="returnCheckDate()"指定提交前,必须通过函数CheckDate()来检验,如果不合格,返回输入数据;

►   数据检验的函数如下:
<script>
function CheckDate(){
//
取得输入的数据
userName = document.RedForm.userName.value;
userEmail = document.RedForm.userEmail.value;
//
如果没有输入姓名
if (userName=="") {
alert("
请输入姓名");
document.RedForm.userName.focus();
return false;
}else{
//如果没有输入Email,或者Email地址错误(不含
@)
if ((userEmail=="")||(userEmail.indexOf("@")==-1)) {
alert("请重新输入Email地址
");
document.RedForm.userEmail.focus();
return false;
}else return true;
}
}
</script>

 

2.   表单的分支提交

有些情况,表单需要根据用户的选择,提交到不同的程序,需要通过脚本来检测用户的选择分支,从而向不同的程序提交表单,如下面的例子:

►   这里首先用到的是form的onSubmit="TwoSubmit(this)"然后根据选择的分支,来分别递交到不同的程序,TwoSubmit()函数如下:

►   <script>
function TwoSubmit(form){
if (form.Ref[0].checked){
form.action = "cop.asp";//
这里是分之一
}else{
form.action = "ind.asp";//
这里是分之二
}
form.submit();
}
</script>

3.   用任何元素提交表单

除了用按钮或者图片按钮提交表单,其实任何页面元素都可以提交表单,不过都是通过脚本来完成的。

例如用链接来代替Submit按钮:
通过onClick="document.form.submit()"来提交表单;用onClick="document.form.reset()"来复位表单,这样一来,任何一个元素都可以实现提交表单了。

★   表单的常用技巧

下面这些常用的技巧,基本上都是和事件以及脚本联系在一起,注重功能,对脚本不加细述。常见的技巧有:下拉跳转菜单,表单内容的聚焦。

1.   下拉跳转菜单

例如:基于表单的下拉跳转菜单

►   这里用到了一个函数,用于向选择的地址跳转,
<script language="JavaScript">
function FormMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>

►   然后,给下拉选择框赋予一个事件onChange="FormMenu('parent',this,0)",就可以了。

2.   表单内容的聚焦

常用的是:点击之后默认值自动消失onFocus="this.value=''",自动选择的是onMouseOver="this.select()"

3.  去掉表格和表单间的空隙
把<form>标签放到<tr>和<td>中间,对应的</form>放在</td>和</tr>中间!

示例代码:
<table width="100%"border="1" cellspacing="1" cellpadding="1">
<tr>
<form name="form3" method="post"action="">
<td> <input type="text"name="textfield2"><br>
<input type="submit" name="Submit22"value="Submit">
这里没有空隙</td>
</form>
</tr>
</table>

4.   用Email提交表单(只适合Outlook用户,不适合Foxmail用户)

格式如下:
form name="..." action="mailto:xxxxx@xxx.xxx?Subject=表单反馈" enctype="text/plain"method="post".../form
这里的mailto:后面加上要接受信息的地址,?Subject是设置默认的Email标题,enctype="text/plain"是必要的,表示信息以文本方式提交,没有任何加密,所以这种方法常用于没有Asp/Php/cgi支持的空间,也只是一个代用的方法,用户必须安装Outlook,并且是默认的邮件程序,才能顺利执行提交,据说TheBat!也可以。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值