【JS】【客户端】脚本化Web文档 —— HTML表单
2014-11-30 14:25
225 查看
HTML表单元素
HTNL元素 | 类型属性 | 事件处理程序 | 描述和事件 |
<input type="button">或 <button type="button"> | "button" | onclick | 按钮 |
<input type="checkbox"> | "checkbox" | onchange | 复选按钮 |
<input type="file"> | "file" | onchange | 载入web服务器的文件的文件名输入域; 它的value属性是只读的 |
<input type="hidden"> | "hidden" | none | 数据由表单提交,但对用户不可见 |
<option> | none | none | select对象中的单个选项, 事件处理程序在select对象上, 而非单独的option对象 |
<input type="password"> | "password" | onchange | 密码输入框,输入的字符不可见 |
<input type="radio"> | "radio" | onchange | 单选按钮,同时只能设定一个 |
<input type="reset">或 <button type="reset"> | "reset" | onclick | 重置表单的按钮 |
<select> | "select-one" | onchange | 选项只能单选的列表或下拉菜单 |
<select multiple> | "select-multiple" | onchange | 选项可以多选的列表 |
<input type="submit">或 <button type="submit"> | "submit" | onclick | 表单提交按钮 |
<input type="text"> | "text" | onchange | 单行文本输入域 |
<textarea> | "textarea" | onchange | 多行文本输入域 |
选取表单和表单元素
表单和它们所包含的元素可以用如 getElementById() 和 getElementsByTagName() 等标准的方法从文档中来选取。表单和元素的属性
在JS产生之前,要用一个专用的”提交“按钮来提交表单,用一个专用的”重置“按钮来充值个表单元素的值。JavaScript的Form对象支持两个方法: submit() 和 reset() ,它们完成同样的目的。调用 Form 对象的 submit()方法来提交表单,调用 reset() 方法来重置表单元素的值。
所有表单元素通常都有一下属性:
type —— 标识表单元素类型的只读的字符串。
form —— 对包含元素的Form对象的只读引用
name —— 只读的字符串,由HTML属性name指定
value —— 可读写的字符串,指定了表单元素包含或代表的值。它就是当提交表单时发送到web服务器的字符串,也就是JS程序会感兴趣的内容。针对Text和Textarea元素,该属性值包含了用户输入的文本。
表单和元素的事件处理程序
每个Form元素都有一个 onsubmit 事件处理程序来侦测表单提交,还有一个 onreset 事件处理程序来侦测表单重置。表单提交前调用onsubmit程序,它通过返回 false 能够取消提交动作,这给JS程序一个机会来检查用户的输入错误,onsubmit事件处理程序只能通过单击”提交“按钮来触发。直接调用表单的submit()方法不触发 onsubmit 事件处理程序。
onreset事件处理程序和 onsubmit是类似的。它在表单重置之前调用,通过返回 false 能够阻止表单元素重置。类似 onsubmit 事件处理程序, onreset只能通过单击”重置“按钮来触发。直接调用表单的reset()方法不触发 onreset事件处理程序。
当用户与表单元素交互时它们往往会触发 click 或
change 事件,通过定义 onclick 或 onchange 事件处理程序可以处理这些事件。
当按钮表单元素激活时它们会触发 click 事件,当用户改变其他表单元素所代表的值时它们会触发 change 事件。在一个文本域中该事件不是每次用于输入一个键值时才会触发,它仅当用户改变了元素的值然后将焦点移到其他元素上时才会触发。
表单元素在收到键盘的焦点时也会触发 focus 事件,失去焦点时会触发
blur 事件。
按钮
按钮本身没有默认行为,触发它有onclick事件处理程序,否则它并没有什么用处。提交和重置元素本就是按钮,不同的是它们有与之关联的默认动作,如果onclick事件处理程序返回false,这些按钮的默认动作就不在执行了,但是更为常用的是使用Form对象本身的 onsbumit事件处理程序来执行表单的校验。
开关按钮 —— 复选框/单选元素
单选元素为整组有相关性的元素而设计的,组内所有按钮的HTML属性和name的值都相同,按这种方式创建的单选按钮是互斥的:选中其一,之前选中的即变成未选中。复选框通常也整组使用并共享name属性,必须注意的是当利用作为表单属性的名字来选中这些元素时,它返回一个类数组对象而不是单个元素。
单选和复选框元素都定义了 checked 属性,该属性是可读写的布尔值,它指定了元素当前是否选中。defaultChecked属性也是布尔值,指定元素在第一次加载页面时是否选中。
单选和复选框元素本身不显示任何文本,它们通常和相邻的HTML文本一起显示。
当用户单击或复选开关按钮,单选或复选框元素触发 onclick 事件,如果由于单击开关按钮改变了它的状态,也触发 onchange 事件。
文本域
文本输入域的onchange事件处理程序是在用户输入新的文本或编辑已存在的文本时触发,它表明用户完成了编辑并将焦点移出了文本域。不同的文本输入元素定义 onkeypress, onkeydown 和 onkeyup 事件处理程序。可以从 onkeypress 或 onkeydown事件处理程序返回 false,防止记录用户的按键。
选项框和选项元素
Select元素表示用户可以做出选择的一组选项,用Option元素表示。浏览器通常将其渲染为下拉菜单的形式,但当其指定size属性大于1时,它将显示为列表中的选项。
Select元素能以两种不同的方式运作,这取决与它的type属性值是如何设置的。如果<select>元素有multiple属性,也就是select对象的type属性为”select-multiple“,那就允许用户选取多个选项。否则,如果没有多选属性,那只能选取单个选项,它的type属性值为”select-one“。
当用户选取或取消一个选项时,Select元素触发onchange事件处理程序:
针对”select-one“Select元素,它的可读写属性selectedIndex指定了哪个选项当前被选中。
针对”select-multiple“元素,单个selectedIndex属性不足以表示被选中的一组元素,在这种情况下,要判定哪些选中被选中,就必须遍历 options[] 数组的元素,并检测每个Option对象的selected属性值。
相关文章推荐
- 【JS】【客户端】脚本化Web文档 —— DOM
- JavaScript权威指南_138_第15章_脚本化文档_15.9-HTML表单-概述
- JavaScript权威指南_143_第15章_脚本化文档_15.9-HTML表单-开关按钮
- JavaScript权威指南_139_第15章_脚本化文档_15.9-HTML表单-选取表单和表单元素
- JavaScript权威指南_141_第15章_脚本化文档_15.9-HTML表单-表单和元素的的事件处理程序
- JavaScript权威指南_145_第15章_脚本化文档_15.9-HTML表单-选择框和选项元素
- JavaScript权威指南_142_第15章_脚本化文档_15.9-HTML表单-按钮
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- [web问题解决]本地服务器无法打开html文档 表单传入数据库报错
- JavaScript权威指南_140_第15章_脚本化文档_15.9-HTML表单-表单和元素的属性
- Web_JavaScript_JS客户端表单数据验证;
- WEB开发中HTML页面表单(FORM)域输入合法性的客户端验证
- JavaScript权威指南_144_第15章_脚本化文档_15.9-HTML表单-文本域
- Validator.js 很好用的客户端表单验证
- Get data from specified URI using WebRequest and WebResponse(读取网页数据并存入对应html文档)
- [转载][RFC文档]RFC1867 Form-based File Upload in Html(Html中基于表单的文件上传)
- Web服务配置错误: allowDefinition='MachineToApplication' 错误和 客户端发现响应内容类型为“text/html; charset=utf-8”...
- 【原创】cs+html+js+css模式(二):webconfig中的设置
- Asp.net中小技巧—服务器端Web控件与客户端Html控件交互
- js下利用userData实现客户端保存表单数据