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!也可以。