首页 理论教育 读取表单元素数据:基于JavaScript网页编程指导

读取表单元素数据:基于JavaScript网页编程指导

时间:2023-10-18 理论教育 版权反馈
【摘要】:完成本任务所用到的主要知识点:访问表单对象和表单元素对象文本元素的value属性单选按钮的checked属性列表框的selectedIndex属性和options集合属性表单提交时,通常需要对表单实行数据有效性验证,验证数据的前提是读取表单元素的数据。编写HTML代码,实现表单,代码如下:在区创建标签,并编写读取表单数据的函数代码,如下:修改“提交”按钮的HTML代码,如下:运行页面。图上机6.8填写表单数据单击“提交”按钮,弹出如图上机6.9所示的信息对话框。

读取表单元素数据:基于JavaScript网页编程指导

完成本任务所用到的主要知识点:

➢访问表单对象和表单元素对象

➢文本元素的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 成功提示

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈