番禺网站优化平台,福州专业做网站的公司,全网营销型的网站,logo设计公司北京用JavaScript操作表单和操作DOM是类似的#xff0c;因为表单本身也是DOM树。
不过表单的输入框、下拉框等可以接收用户输入#xff0c;所以用JavaScript来操作表单#xff0c;可以获得用户输入的内容#xff0c;或者对一个输入框设置新的内容。 一、HTML表单的输入控件
H…用JavaScript操作表单和操作DOM是类似的因为表单本身也是DOM树。
不过表单的输入框、下拉框等可以接收用户输入所以用JavaScript来操作表单可以获得用户输入的内容或者对一个输入框设置新的内容。 一、HTML表单的输入控件
HTML表单的输入控件主要有以下几种 文本框对应的input typetext用于输入文本 口令框对应的input typepassword用于输入口令 单选框对应的input typeradio用于选择一项 复选框对应的input typecheckbox用于选择多项 下拉框对应的select用于选择一项 隐藏文本对应的input typehidden用户不可见但表单提交时会把隐藏文本发送到服务器。 二、操作表单
2-1、获取值
如果我们获得了一个input节点的引用就可以直接调用value获得对应的用户输入值
// input typetext idemail
var input document.getElementById(email);
input.value; // 用户输入的值
这种方式可以应用于text、password、hidden以及select。
但是对于单选框、复选框value属性返回的永远是HTML预设的值而我们需要获得的实际是用户是否“勾上了”选项所以应该用checked判断
// labelinput typeradio nameweekday idmonday value1 Monday/label
// labelinput typeradio nameweekday idtuesday value2 Tuesday/label
var mon document.getElementById(monday);
var tue document.getElementById(tuesday);
mon.value; // 1
tue.value; // 2
mon.checked; // true或者false
tue.checked; // true或者false 2-2、设置值
设置值和获取值类似对于text、password、hidden以及select直接设置value就可以
// input typetext idemail
var input document.getElementById(email);
input.value testexample.com; // 文本框的内容已更新
对于单选框和复选框设置checked为true或false即可。 2-3、HTML5控件
HTML5新增了大量标准控件常用的包括date、datetime、datetime-local、color等它们都使用input标签
input typedate value2021-12-02 input typedatetime-local value2021-12-02T20:21:12 input typecolor value#ff0000 不支持HTML5的浏览器无法识别新的控件会把它们当做typetext来显示。 2-4、提交表单
JavaScript可以以两种方式来处理表单的提交
1、通过form元素的submit()方法提交一个表单
2、AJAX方式 1、通过form元素的submit()方法
方式一是通过form元素的submit()方法提交一个表单例如响应一个button的click事件在JavaScript代码中提交表单
!-- HTML --
form idtest-forminput typetext nametestbutton typebutton onclickdoSubmitForm()Submit/button
/formscript
function doSubmitForm() {var form document.getElementById(test-form);// 可以在此修改form的input...// 提交form:form.submit();
}
/script
这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击button typesubmit时提交表单或者用户在最后一个输入框按回车键。 2、响应form本身的onsubmit事件
第二种方式是响应form本身的onsubmit事件在提交form时作修改
!-- HTML --
form idtest-form onsubmitreturn checkForm()input typetext nametestbutton typesubmitSubmit/button
/formscript
function checkForm() {var form document.getElementById(test-form);// 可以在此修改form的input...// 继续下一步:return true;
}
/script
注意要return true来告诉浏览器继续提交如果return false浏览器将不会继续提交form这种情况通常对应用户输入有误提示用户错误信息后终止提交form。
在检查和修改input时要充分利用input typehidden来传递数据。
例如很多登录表单希望用户输入用户名和口令但是安全考虑提交表单时不传输明文口令而是口令的MD5。普通JavaScript开发人员会直接修改input
!-- HTML --
form idlogin-form methodpost onsubmitreturn checkForm()input typetext idusername nameusernameinput typepassword idpassword namepasswordbutton typesubmitSubmit/button
/formscript
function checkForm() {var pwd document.getElementById(password);// 把用户输入的明文变为MD5:pwd.value toMD5(pwd.value);// 继续下一步:return true;
}
/script
这个做法看上去没啥问题但用户输入了口令提交时口令框的显示会突然从几个*变成32个*因为MD5有32个字符。
要想不改变用户的输入可以利用input typehidden实现 form idlogin-form methodpost onsubmitreturn checkForm()username: input typetext idusername nameusername/br!--没有name属性没有name属性的input的数据不会被提交--input-password: input typepassword idinput-password/brmd5-password: input typehidden idmd5-password namepasswordbutton typesubmitSubmit/button/formscriptfunction checkForm() {var input_pwd document.getElementById(input-password);var md5_pwd document.getElementById(md5-password);// 把用户输入的明文变为MD5:md5_pwd.value toMD5(input_pwd.value);// 继续下一步:return true;}/script
注意到id为md5-password的input标记了namepassword而用户输入的id为input-password的input没有name属性。没有name属性的input的数据不会被提交。
