《浅谈网页制作中表单的教学》-教育论文，职业教育论文-论文范文参考-科学狗论文网

网站首页词典首页

标题

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

范文

李彩萍

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

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

[中图分类号] 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下载服务。