用户体验之表单结构

在用css写表单结构的时候,添加一些属性,可以让极大地改善用户体验。

1,使用value属性为输入型表单域设置默认值。

2,使用title属性帮助屏幕阅读器用户获得足够的提示信息。

3,当标签(label元素)没有包含所关联的表单域时,可使用for属性来匹配和关联菜单域(绑定id值)。

4,为每个表单域设置tabindex属性。方便用户用tab切换

5,对于复选框和单选按钮来说。将label置于表单域前面,可便于用户先阅读标签说明,再执行操作。

6,使用optgroup元素来组织select列表框中的众多选项,让下拉列表项目一目了然。

7,为表单域定义accesskey属性,方便用户用快捷键快速访问。

8,使用checked属性,把常用的复选框和单选框定义为默认值,避免用户重复操作。

9,使用selected属性,在列表框中把常用选项定义为默认值,同样可以避免用户重复操作。

时间: 2024-10-17 16:59:26

用户体验之表单结构的相关文章

php防止用户重复提交表单

我们提交表单的时候,不能忽视的一个限制是防止用户重复提交表单,因为有可能用户连续点击了提交按钮或者是攻击者恶意提交数据,那么我们在提交数据后的处理如修改或添加数据到数据库时就会惹上麻烦. 效果图: 那么如何规避这中重复提交表单的现象出现呢?我们可以从很多方面入手: 首先从前端做限制.前端JavaScript在按钮被点击一次后禁用,即disabled,这个方法简单的防止了多次点击提交按钮,但是缺点是如果用户禁用了javascript脚本则失效. 第二,我们可以在提交后做redirect页面重定向,

创建供用户输入的表单

利用相关的表单元素,创建供用户输入的表单,获取用户的输入. 代码如下: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>taobaodenglvyemian</title></head><body><form action="http://www.taobao.com&

js页面用户信息填写表单

在网页中我们会经常看见各色的用户信息填写表单,其中会包括各种输入框.按钮.单复选框和下拉式菜单,今天的我们就以最简单的为例做一个简易版的用户信息填写表单(此处使用html文本),仅供初学者参考,也请各位前辈多多指教! 在这个范例当中,我们将对用户输入的信息做简易验证.主要判读那用户名.密码.确认密码不能为空,密码和确认密码要保持一致. 注意点: 1.用户信息的填写如果是在一张form表单中,则只能出现一个submit按钮提交,这种情况比较简易,只需要在body模块<form>中添加onSubm

JS采用ActiveXObject实现用户在提交表单时屏蔽敏感词的功能

本例中敏感词ciku.txt放在C盘根目录下,采用的ActiveXObject插件获取本地文件内容.使用此插件不需网上下插件,直接用如下js代码即可. 浏览器需修改interner安全选项的级别,启用ActiveX才能获取到代码中的ActiveXObject插件.如下图所示: js代码实现如下: 1 <script type="text/javascript"> 2 // -------------- 全局变量,用来判断文本域中是否包含脏词,默认为false,即不包含脏词-

HTML与用户的交互 表单

使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据. 语法: <form method="传送方式" action="服务器文件"> 讲解: 1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束. 2.action :浏览者输入的数据被传送到的地方,

APache PDFbox API使用(3)----如何得到一个带表单的PDF文件的表单结构

我们知道,在PDF文件中不但可以保存图片和文字,而且我们还可以在PDF文件里面建立表单.比如,下面的图1就是一个PDF文件里面建立了一些表单. 其实PDF文件是一个有特殊结构的文件,那么,如果我们需要通过PDFBox API去往这些表单上面填值的时候,我们需要知道这些表单在PDF文件里面是如何定义的, 名称是什么. 一般的情况下,我们直接用PDFBox的API,那么有没有另外一种更为简单的方法呢? 当然有,那就是http://support.persits.com/pdf/demo_formfi

YII用户注冊表单的实现熟悉前台各个表单元素操作方式

模还是必须定义两个基本方法.还有部分label标签映射为汉字,假设进行表单验证,还要定义一些验证规则: <? php /* * 用户模型 * */ class user extends CActiveRecord{ //获得数据模型 public static function model($classname = __CLASS__){ return parent::model($classname); } //定义数据表名字 public function tableName(){ retu

yii初体验(3)表单提交

初体验 model层 控制层调用 浏览器显示信息: 实战 http://yiitest:7888/index.php?r=site/entry 方法 view 视图使用了一个功能强大的小部件 yii\widgets\ActiveForm 去生成 HTML 表单.其中的 begin() 和 end() 分别用来渲染表单的开始和关闭标签.在这两个方法之间使用了 yii\widgets\ActiveForm::field() 方法去创建输入框.第一个输入框用于 “name”,第二个输入框用于 “ema

重新理解了重定向,利用重定向可以防止用户重复提交表单(兼谈springmvc重定向操作)

自己用springmvc框架有一段时间了,但是都还一直分不清楚什么时候应该用转发,什么时候应该用重定向.可能用转发的情形太多了,以致于自己都忘记了还有重定向. 当用户提交post请求之后,刷新页面就会造成数据的再一次提交,也就是常说的重复提交.在网上查阅了相关资料,发现利用重定向可以有效防止重复提交数据. 重定向即客户端向服务器发送一个请求后,由服务端将请求按照程序里编码指定的请求方向再请求一次,在springmvc的开发中,返回一个重定向视图只需要在视图名称前加上"redirect:"