玩转表单之花样表单
作者:佚名 发布时间:2011-04-25 19:17:00
表单外观的美化
很多时候,我们仅仅为了实现数据采集这个功能来使用表单,常看到的表单都是“千人一面”、毫无生气,本专题尝试着来改变这一现象,试图赋予表单一个丰富多彩的面貌。
表单的外观,也是最为直接的花样,可以通过改变它来实现特效,本文分两个出发点来讲述:CSS魔法和图像魔法。
1、CSS魔法
CSS,就是大家知道的层叠样式单,它可以定义页面元素的外观,包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等等,下面就从这几个方面出发,讨论怎样将CSS应用到表单中,彻底美化它!
1.1 字体样式的应用
字体样式包括:字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font),具体的定义方法,在这里不详细讲述,可以参考它的资料。
也许你已经注意到,按钮上的文字不漂亮,其实可以通过CSS字体样式来解决,同样地,其它的几个涉及到文字的表单项,例如,文本框、多行文本框、口令框、下拉选择框都可以应用字体样式。
为了充分展示这些应用,下例特别设计了几种样式,在实际应用中,不必这么凌乱,灵活运用:
样例12:表单元素的字体样式展示
分析:
文本框里的文字是加粗的,大小是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>aspxhome.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>发送1和发送2按钮的文字不同,是因为发送1按钮使用了9pt的宋体文字,所以比较美观,发送1按钮的代码:
<input type="submit" name="Submit" value="发送1" style="font-family:宋体; font-size: 9pt;">
小结:只要我们对字体的样式熟悉了,就可以灵活多变,不一定要在标签里面使用style来定义,完全可以在<head>里定义,或者外部引用CSS文件,用到的时候引用一下就能达到预期的效果。


猜你喜欢
- 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍。加深对DOM的理解,从而对
- 名词解释断号:比如,连续生成的编号,由于某种操作(通常为删除)后,产生不连续的编号,我们将这种不连续的编号称为断号。例如,数据库中有一个字段
- python 文件操作seek() 和 telll() 自我解释file.seek()方法格式: seek(offset,whence=0)
- 一、介绍Python远程调试,即在远程机器上运行python代码在本地进行调试,之前文章里的方式方法已经out,现在更新为当前版本已经成功实
- 一、动机(Motivate)“观察者模式”在现实生活中,实例其实是很多的,比如:八九十年代我们订阅的
- 本文实例讲述了Python延时操作实现方法。分享给大家供大家参考,具体如下:在日常的开发中,往往会遇到这样的需求,需要某一个函数在一段时间之
- 本文实例讲述了python用来获得图片exif信息的库用法。分享给大家供大家参考。具体分析如下:exif-py是一个纯python实现的获取
- 总有一些程序在windows平台表现不稳定,动不动一段时间就无响应,但又不得不用,每次都是发现问题了手动重启,现在写个脚本定时检测进程是否正
- 你可能会遇到这样的要求,一个脚本,只允许有一个实例。在python中,为了实现这个需求,可以引入fcntl模块对文件加一个排他锁,这样一来,
- 1、ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-chang
- 深度学习网络通常具有很深的层次结构,而且层与层之间通常会有并联、串联等连接方式。当使用PyTorch建立一个深度学习网络并输出文本向读者展示
- 目录抽象和复用串行分段串行,段中并行总结前言:JS 天然支持并行请求,但与此同时会带来一些问题,比如会造成目标服务器压力过大,所以本文引入“
- golang常用库:gorilla/mux-http路由库使用golang常用库:配置文件解析库-viper使用golang常用库:操作数据
- 前言闲暇时间抽个空写了个三国杀武将手册的小程序,中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码,然后提供保存图片到相册,最
- 不同类型的语言支持不同的数据类型,比如 Go 有 int32、int64、uint32、uint64 等不同的数据类型,这些类型占用的字节大
- 主键自增MySQL 提供了主键自增机制 AUTO_INCREMENT. 对主键使用, 保证了主键的唯一性.注意:自增长必须与主键字段配合使用
- 测试靶机为DVWA,适合DVWA暴力破解模块的Low和Medium等级关键代码解释url指定url地址url = &qu
- 如下所示:>>> import numpy as np>>> a = np.arange(12).res
- (应一些初学者的要求,虽然本人也绝对称不上专业,但是想让一个人快速地走出初学的迷茫,需要这种精炼的集合)首先,阐明一下我的观点:不论是什么编
- 1 为什么要分库分表物理服务机的CPU、内存、存储设备、连接数等资源有限,某个时段大量连接同时执行操作,会导致数据库在处理上遇到性能瓶颈。为