标题 | 浅谈网页制作中表单的教学 |
范文 | 李彩萍 [摘 要] 关于表单,不能只要求学生会做,还要让他们理解表单及表单元素的属性,会进行基本的表单验证,为学习网页的后续课程打下坚实的基础。 [关 键 词] 表单;表单元素;属性;表单验证 [中图分类号] 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属性。 复选框的非空验证和单选按钮的非空验证很相似,只要理解其中之一,另一个就可举一反三了。 从以上内容可以看出,对文本框、单选按钮、复选框进行非空验证无一例外都离不开表单元素的属性,当然对其他表单元素情况也一样。 综上所述,对表单,不只要让学生在设计视图熟悉它,也要在代码视图熟悉它;不但要会制作表单,还要理解其属性,理解表单元素的属性,这样才能在今后的工作中自如地应用表单。 |
随便看 |
|
科学优质学术资源、百科知识分享平台,免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。