APP下载

浅谈网页制作中表单的教学

2018-05-14李彩萍

现代职业教育·职业培训 2018年1期
关键词:表单文本框视图

李彩萍

[摘 要] 关于表单,不能只要求学生会做,还要让他们理解表单及表单元素的属性,会进行基本的表单验证,为学习网页的后续课程打下坚实的基础。

[关 键 词] 表单;表单元素;属性;表单验证

[中图分类号] G712 [文献标志码] A [文章编号] 2096-0603(2018)03-0073-01

表单在网页中应用非常广泛,网站邮箱的注册、登录,网上订单,调查问卷都离不开它,是学习网页制作必须熟练掌握的内容之一。

一、用表格布局表单

制作表单应当用表格布局。插入表格首先要根据表单的要求设定表格行数、列数、表格宽度,并将边框粗细、单元格边框、单元格间距三项的值均设为0,再从表单美观的角度出发,设定每一列单元格的宽度、单元格的高度,并将单元格内容居中显示,然后在相应单元格中放置表单内容。

以上对表格的设定均是表格最基础的操作,学生完成基本没有难度。

二、表单元素属性

学生在经过一段时间的学习后,完成一个使用表格布局的表单是没有问题的,但仅能够完成表单是不够的,还需要对表单元素的属性有一定的认识。表单元素属性很多,为了不让学生有畏难情绪,开始只要求他们掌握最基本的属性。

学生在设计视图中完成一个表单后,引导学生查看代码视图。在表单的代码视图中,出现最多的就是标签,比如,文本框、单选按钮、复选框等都对应标签。这些标签的type属性是不同的,学生通过比较设计视图和代码视图,可以总结出文本框type属性为text,密码文本框也是一个文本框,不过是将文本框的类型由默认的单行改为密码,对应的type属性为password,单选按钮的type属性为radio,复选框的type属性为checkbox,按钮的type属性为button,提交和重置按钮的type属性分别为submit和reset。此处可以让学生进行这样的练习,如将复选框的type属性在代码视图下直接改为radio,查看页面的变化,进而让学生明白标签的type属性的作用。

另外,很多表单元素都有value属性,教师可针对按钮进行直观的演示,在设计视图时将提交按钮的值改为“点击提交”,让学生查找对应代码发生的变化,从而理解按钮value属性的作用。在表单中,不仅按钮有value属性,文本框也有value属性,学生可以尝试在代码视图中给文本框直接添加value属性,再到设计视图查看页面的变化,就很容易理解文本框value属性的作用。单选按钮、复选框当然也有value属性,但由于不是很直观,所以只要求学生会设定既可,至于value属性的使用,那是后续课程的范畴。

对所有表单元素,要让学生发现均有name属性,name属性就是表单元素的名称。

以上表单元素都是最常用的,学生熟练掌握之后,可以再学习其他的表单元素,如下拉列表、文件域和多行文本框等,这些表单元素同样也要掌握它们的常用属性。

三、表单属性

在能清楚认识表单元素的基础上,让学生观察表单标签,学生会看到表单有name属性、method属性和action属性。表单name属性很好理解,action属性规定提交表单信息时,向何处发送表单数据,即处理表单数据的目标地址,如不填,则默认为当前页面。method属性规定提交方式,取值为“get”或“post”,默认为“post”。对method为get的表单,单击提交按钮后在地址栏可以看到以“键名=键值”形式提交的数据,而以post形式提交的表单,在地址栏没有像get形式那样以明文的形式进行传输的数据,用户不会看到所提交的数据,所以相对于get,post形式比较安全。以上两个属性较难理解,一定要进行案例演示。

有的老师认为学生只要会完成表单就可以了,再了解那么多属性是给学生增加负担,但是如果不会这些,学习网页制作的后续内容,比如,表单验证会遇到很多问题。

四、表单验证

表单验证是使用验证函数,在表单中的数据被送往服务器前检查其是否是无效或错误数据。表单验证包括的内容非常多,例如,检查表单元素是否为空、验证Email地址是否正確等。此处以对文本框、单选按钮、复选框进行非空验证为例。

无论进行什么样的验证,都要先找到表单元素,可以使用前面提过的name属性,也可以使用id属性,分别对应get Elements By Name( )和get Element By Id( )方法。

获取输入文本框的值,即获取文本框的value属性值,该值是字符串。文本框非空验证,就是判断字符串是否为空,可以通过比较字符串与空字符串是否相等进行判断,也可以通过字符串length属性是否为0来判断,学生掌握一种即可。

对单选按钮,非空验证就是判断单选按钮是否被选中,即判断单选按钮的checked属性是否为true。如果是单选按钮组,可以使用for循环逐个判断单选按钮的checked属性。

复选框的非空验证和单选按钮的非空验证很相似,只要理解其中之一,另一个就可举一反三了。

从以上内容可以看出,对文本框、单选按钮、复选框进行非空验证无一例外都离不开表单元素的属性,当然对其他表单元素情况也一样。

综上所述,对表单,不只要让学生在设计视图熟悉它,也要在代码视图熟悉它;不但要会制作表单,还要理解其属性,理解表单元素的属性,这样才能在今后的工作中自如地应用表单。

猜你喜欢

表单文本框视图
巧用文本框实现PPT多图片排版
VFP教学的探讨与实践
PPT文本框的另类应用
Y—20重型运输机多视图
SA2型76毫米车载高炮多视图
《投影与视图》单元测试题
图片动画玩异样
使用智能表单提高工作效率
Django 框架中通用类视图的用法
员工信息网络化收集