表单和数据完整性
创建表单元素是为了满足用户向服务器发送数据的需求。
表单基础
HTML表单通过
元素来定义特性:
method 属性 设置或获取如何将表单数据发送到服务器
action 属性 设置或获取表单内容要发送处理的 URL
enctype 属性 设置或获取表单发送的编码方式。默认是application/x-www-form-urlencoded,如果要上传文件要设成multipart/form-data。
accept 属性 上传文件时,列出服务器能正确处理的mime类型
acceptCharset 属性 设置或获取处理表单的服务器必须接受的字符编码
输入元素:
元素 主要的HTML输入元素
通过type属性确定控件:
text radio checkbox file password button submit reset hidden image
元素 组合框或下拉框,值由元素定义
元素 多行文本,尺寸由rows和cols特性确定
元素 将标签绑定到特定的表单字段
for 属性 指定绑定的表单id
当鼠标点击label容器,焦点将移到指定表单上
例如:
无绑定
建议在每个表单字段都设置id和name属性,且值相等。(name用于数据提交,id用户客户端确定元素)
对
元素进行脚本编写
获取表单引用
1 用getElementById()
例如:var oForm = document.getElementById("form1");
2 用document的form集合,并通过位置或name属性引用
例如:var oForm = document.forms[0];
或者:var oForm = document.forms["form1"];
访问表单字段
1 通过表单的elements集合,并通过位置或name属性引用
例如:var oElm = oForm.elements[0];
或者:var oElm = oForm.elements["elm"];
2 直接通过name属性访问
例如:var oElm = oForm.elm;
如果名字中有空格可以用方括号:
var oElm = oForm["elm 1"];
3 用getElementById()
例如:var oElm = document.getElementById("elm1");
表单字段共性
所有表单字段(除隐藏字段):
disabled 属性 设置或获取控件是否被禁用
form 属性 获取对象所在表单的引用
blur() 方法 使元素失去焦点并触发onblur事件
focus() 方法 使元素得到焦点并触发onfocus事件
onblur 事件 元素失去焦点时触发
onfocus 事件 元素得到焦点时触发
注意:隐藏字段(hidden)只有form属性
提交表单
1 使用提交按钮或提交图象提交表单
例如:
当客户点击以上按钮将提交表单,如果按回车,并存在这些按钮,浏览器会认为点击了按钮
2 获取表单引用,再使用submit()方法
例如:
document.getElementById("form1").submit();
用button模拟submit:
onsubmit 事件 表单提交时触发
例如;
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。