关于form表单的美化

dx_andy

UID: 2270
帖子: 131
积分: 242
在线时间: 98小时
注册时间: 2006-11-02
最后登录: 2015-12-08

1^# dx_andy 发表于2007-08-22

关于form表单的美化

//内容：关于form表单的美化
//作者：dx_andy
//时间：2007.8.19 早
//测试环境：apache2.2.4 php5.2.1 mysql5.0.27
//联系：QQ:45665758 E-mail:[email protected]

Form表单，不用多说，大家都应该知道。可以说Form表单是网页中一个不可缺少的元素。小到留言簿大到用户注册，调查系统，可以

说Form表单在网络中无处不在。
下面是本人对Form表单美化的一点个人见解，若还有其它美化的方案可以联系
QQ：495665758
E-mail:[email protected]
不甚感激！

1，下面看一下表单中都有哪些元素：
<form name=form>

Name:<input type=text><br>

Passwd:<input type=passwd><br>

:<input type=radio name= checked=checked>mail<input type=radio name=>femail<br>

Love:<br>
Banana:<input type=checkbox><br>
Apple:<input type=checkbox><br>
Orange:<input type=checkbox><br>

School:
<select>
<option>First school</option>
<option>Second school</option>
<option>Third school</option>
</select><br>

content:<br>
<textarea rows=4 cols=40></textarea><br>

<input type=submit value="submit"><br>

</form>

表单的元素大概就是这些，当然还有button,image那就要看大家的美工怎样了，图像做好看些，表单当然也就美观了。还是回到我们

的表单吧，上面的表单是最基本的了，在美观上当然也要逊色一些。下面说第一种美观方案。

2，为表单加上表格装饰

表格的制作相对要简单很多：

例：

<table width=100>
<tr>
<td height=30> </td>
</tr>
</table>

哈哈，表格就做好了，测试一下，表格又难看不少，再加上难看的表单，那更是不用说了，好了，我们给表格修饰一下，我对一般对表格是这

样修饰的！

例：
<table width=100 bgcolor=#2f4f4f cellspacing=1 cellspadding=0 border=1>
<tr bgcolor=#ffffff>
<td height=100> </td>
</tr>
</table>

这样这个表格就加上了个1像素的边框，看起来也就不太难看了，颜色可以自己选择。
表格还有其它加边框形状还有多种，可以用CSS来改变，不过加边框的方法就不能向上面这样写了！
然后把表单加到表格里去，

例：
<form>
<table width=400 bgcolor=#2f4f4f cellspacing=1 cellpadding=0 border=0 align=center>
<tr bgcolor=#ffffff>
<td height=30 width=100 align=right bgcolor=#dfdfdf>Name:</td><td> <input type=text size=12

height=10></td>
</tr>
<tr bgcolor=#ffffff>
<td height=30 bgcolor=#dfdfdf align=right>PassWord:</td><td> <input type=password size=12></td>
</tr>
<tr bgcolor=#ffffff>
<td height=30 bgcolor=#dfdfdf align=right>Love:</td><td> <input type=radio name=

checked=checked>Mail<input type=radio name=>Femail</td>
</tr>
<tr bgcolor=#ffffff>
<td height=30 bgcolor=#dfdfdf align=right>School:</td><td> <select><option>First

School</option><option>Second School</option><option>Third School</option></select></td>
</tr>
<tr bgcolor=#ffffff>
<td bgcolor=#dfdfdf height=70 align=right>Content:</td><td align=center><textarea rows=4

cols=45></textarea></td>
</tr>
<tr bgcolor=#ffffff>
<td height=30 bgcolor=#dfdfdf align=center colspan=2><input type=submit value='Submit'> <input

type=reset value='Reset'></td>
</tr>
</table>
</form>

表单就这样被加到表格里去了，可能简单的这样加进去也感觉不太美观，我看也是这样，呵呵，可能字体太大，有点不习惯吧，下面

修改一下字体。

<head>
<style type='text/css'>
td{font-size:13px;}
</style>
</head>

把下面代码加到网页里，修改一下网页中表单的字体大小，同时也可修改为font-size:10pt;

这样做出来的表单虽然规矩了不少，但是谈到美观还要要逊色很多。下面看一下怎么直接修改form表单吧，这就要就到CSS，就像上面

修改字体似的。
试着修改，在上面的<style>与</style>之间加入下面代码：

input,textarea,select
{
background-color:#dfdfdf;
font-size:12px;
color:#004080;
}
这些都是经常用到的CSS样式，这里也不在多说。这样一个像模像样的表单就做好了，怎么样，比一般是不是要好看些。其实表单制作

非常简单，只要大家想到，合理用学到的语言基本上就可以做到了。

其中还有几种样式，只拿text表单为例，有兴趣的参考一下：

1，平面的text表单：

<input type=text style='border:1px #000000 solid'>

2,改变text表单的边框样式:

<input type=text style='border:1px #000000 dotted'>

其中dotted可以换为:
dotted:点线
dashed:虚线
solid:实线
double:双线
还有groove,ridge,inset,outset一般用处不太大，不在多说！

3,改变text表单的背景颜色

<input type=text style='background-color:#dfdfdf'>

4,改变text表单的字体大小

<input type=text style='font-size:12px'>

实在想不赶来了，就写到这吧，基本用到的就是这些，如果还有好的方案大家联系我！

hehe888

UID: 18180
帖子: 5
积分: 0
在线时间: 1小时
注册时间: 2007-08-23
最后登录: 2007-08-23

2^# hehe888 发表于2007-08-23

ding o 1!!!

sgfire

UID: 18449
帖子: 5
积分: 5
在线时间: 1小时
注册时间: 2007-09-05
最后登录: 2007-09-05

3^# sgfire 发表于2007-09-05

学习下

会飞的老鼠

UID: 11595
帖子: 60
积分: 50
在线时间: 123小时
注册时间: 2007-01-28
最后登录: 2009-05-06

4^# 会飞的老鼠发表于2007-09-07

学习！！！！！！！！！11

goter

UID: 17121
帖子: 24
积分: 12
在线时间: 17小时
注册时间: 2007-06-24
最后登录: 2009-07-15

5^# goter 发表于2007-09-15

必须顶！谢谢楼主！

manx00

UID: 21893
帖子: 99
积分: 170
在线时间: 122小时
注册时间: 2008-03-22
最后登录: 2015-12-04

6^# manx00 发表于2008-03-23

学习中,谢谢