关于form表单的美化方案讲解

最新推荐文章于 2022-10-19 10:07:06 发布

dx_andy

最新推荐文章于 2022-10-19 10:07:06 发布

阅读量3.1k

点赞数 1

文章标签： input border table css button apple

本文链接：https://blog.csdn.net/dx_andy/article/details/1754453

版权

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

Form表单，不用多说，大家都应该知道。可以说Form表单是网页中一个不可缺少的元素。小到留言簿大到用户注册，调查系统，可以说Form表单在网络中无处不在。
下面是本人对Form表单美化的一点个人见解，若还有其它美化的方案可以联系
QQ：495665758
E-mail:dx_andy@163.com
不甚感激！

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

Name:<input type=text><br>

Passwd:<input type=passwd><br>

Sex:<input type=radio name=sex checked=checked>mail<input type=radio name=sex>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>

</form>

表单的元素大概就是这些，当然还有button,image那就要看大家的美工怎样了，图像做好看些，表单当然也就美观了。还是回到我们的表单吧，上面的表单是最基本的了，在美观上当然也要逊色一些。下面说第一种美观方案。

2，为表单加上表格装饰

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

例：

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

例：
<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=sex checked=checked>Mail<input type=radio name=sex>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>

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

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

这样做出来的表单虽然规矩了不少，但是谈到美观还要要逊色很多。下面看一下怎么直接修改form表单吧，这就要就到CSS，就像上面修改字体似的。
试着修改，在上面的<style>与</style>之间加入下面代码：

   input,textarea,select
    {
     background-color:#dfdfdf;
     font-size:12px;
     color:#004080;
    }
这些都是经常用到的CSS样式，这里也不在多说。这样一个像模像样的表单就做好了，怎么样，比一般是不是要好看些。其实表单制作非常简单，只要大家想到，合理用学到的语言基本上就可以做到了。

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

1，平面的text表单：

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

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

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

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

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