完成本任务所用到的主要知识点:
➢访问表单对象和表单元素对象
➢文本元素的value属性
➢单选按钮的checked属性
➢列表框的selectedIndex属性和options集合属性
表单提交时,通常需要对表单实行数据有效性验证,验证数据的前提是读取表单元素的数据。如图上机6.6所示的表单,在单击“提交”按钮时要读取登录名、密码、确认密码、性别、年龄等数据。
图上机6.6 会员注册
通过document对象的getElementById()方法或getElementsByName()方法可以访问页面内的表单元素;通过表单对象的elements集合属性也可访问特定表单内的表单元素。文本框、密码框的文本可以通过它们的value属性获得;单选按钮是否被选中可由它的checked属性获知,它的值可由value属性获取;由列表框的selectedIndex属性可知被选中的项的索引,用此索引可在列表框的options集合中查找到被选中的项,项有text属性表示它的文本,有value属性表示它的值。
(1)创建网页文档。
(2)编写HTML代码,实现表单,代码如下:(www.xing528.com)
(3)在<head></head>区创建<script></script>标签,并编写读取表单数据的函数代码,如下:
(4)修改“提交”按钮的HTML代码,如下:
(5)运行页面。在未输入任何数据时,单击“提交”按钮,弹出如图上机6.7所示的信息对话框。
图上机6.7 未输入任何数据
(6)填写表单数据,如图上机6.8所示。
图上机6.8 填写表单数据
(7)单击“提交”按钮,弹出如图上机6.9所示的信息对话框。
图上机6.9 成功提示
免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。