如何用JavaScript操作form表单组件？

一、用JavaScript操作按钮：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JavaScript操作form表单组件</title></head><body><span>····································</span><br /><!--用JavaScript操作按钮--><form action="https://www.baidu.com/s" id = "login" ><input type="text" name="wd"/><input type="password" name="wd" /><input type="button" value="提交" onclick="login()" /></form><script>function login(){//通过document.getElementById("login")获取到id为login的HTML元素var element = document.getElementById("login");//将调用该方法的按钮变为提交功能element.submit();//将调用该方法的按钮变为重置功能//element.reset();}</script></body>
</html>

二、用JavaScript操作文本框、密码框、文本域、隐藏框：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JavaScript操作form表单组件</title></head><body><span>····································</span><!--用JavaScript操作文本框、密码框、文本域、隐藏框--><br /><!--文本框--><input type="text" id="test" /><input type="button" value="测试" onclick="test()" /><!--密码框--><input type="password" id="password" /><input type="button" value="测试" onclick="password()" /><!--文本域--><textarea id="textarea"></textarea><input type="button" value="测试" onclick="textarea()" /><!--隐藏框：没有readonly属性和focus方法--><input type="hidden" id="hidden" /><input type="button" value="测试" onclick="hidden()" /><script>document.getElementById("test").focus();//使其获取焦点function test(){var element = document.getElementById("test");console.log(element.value);//获取value值element.value="Tom";//value值console.log(element.value);element.readOnly=true;//设置只读element.disabled=true;//设置禁用}document.getElementById("password").focus();//使其获取焦点function password(){var element = document.getElementById("password");console.log(element.value);//获取value值element.value="121556";//value值element.readOnly=true;//设置只读element.disabled=true;//设置禁用   }document.getElementById("textarea").focus();//使其获取焦点function textarea(){var element = document.getElementById("textarea");console.log(element.value);//获取value值element.value="Tom";//value值element.readOnly=true;//设置只读element.disabled=true;//设置禁用}//没有focus方法 document.getElementById("hidden").focus();function hidden(){var element = document.getElementById("hidden");console.log(element.value);//获取value值element.value="Tom";//value值//没有readonly属性 element.readOnly=true;element.disabled=true;//设置禁用}</script></body>
</html>

三、用JavaScript操作单选：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JavaScript操作form表单组件</title></head><body><br /><span>····································</span><!--用JavaScript操作单选--><br /><span>单选</span><input type="radio" name="sex" value="0" />男<input type="radio" name="sex" value="1" />女<input type="button" value="测试" onclick="t3()" /><script>function t3(){//通过document.getElementsByName("sex")获取的是一个数组var elements = document.getElementsByName("sex");//JavaScript里的循环返回的是某个元素的下标而不是元素本身（这点和Java不同）for(var i = 0; i < elements.length; i++){var element = elements[i];//通过element.checked可以看出哪个选项被选中console.log(element.checked+","+element.value);}}document.getElementsByName("sex")[0].disabled=true;//设置禁用document.getElementsByName("sex")[1].checked=true;//设置默认选项</script></body>
</html>

四、用JavaScript操作多选：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JavaScript操作form表单组件</title></head><body><br /><span>····································</span><!--用JavaScript操作多选--><br  /><span>多选</span><input type="checkbox" name="hobby" value="0" />篮球<input type="checkbox" name="hobby" value="1" />足球<input type="checkbox" name="hobby" value="2" />橄榄球<input type="button" value="测试" onclick="t4()" /><script>function t4(){var elements = document.getElementsByName("hobby");for(var i = 0; i < elements.length; i++){var element = elements[i];//获取选项的选中状态和相应的value值console.log(element.checked+","+element.value);}}document.getElementsByName("hobby")[0].disabled=true;//设置禁用document.getElementsByName("hobby")[1].checked=true;//设置默认选项</script></body>
</html>

五、用JavaScript操作下拉列表：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JavaScript操作form表单组件</title></head><body><br /><span>····································</span><!--用JavaScript操作下拉列表--><br    /><span>下拉列表</span><br /><select id="province"><option value="">请选择</option><option value="001">北京市</option><option value="002">湖北省</option><option value="003">河南省</option></select><input type="button" value="测试" onclick="t5()" /><script>function t5(){//通过document.getElementById("province")获取到select里的所有选项var element = document.getElementById("province");var options = element.options;console.log(options);for(var i = 0; i < options.length; i++){var option = options[i];//获取选项的选中状态和相应的value值console.log(option.selected+","+option.value);}}document.getElementById("province")[1].selected=true;//设置默认选项document.getElementById("province")[2].disabled=true;//对某个选项设置禁用document.getElementById("province").disabled=true;//对整个select设置禁用</script></body>
</html>

如何用JavaScript操作form表单组件？相关推荐

JavaScript操作form表单
1. 获取输入的值 <input id="aa" /><input type="button" value="查询" on ...
第83天：jQuery中操作form表单
操作form表单 1. 属性操作设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr("title", ...
【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面
解决elementui多层dialog弹窗遮罩问题弹窗套娃出现了整个屏幕都是遮罩层的问题,需要鼠标点击一下才能正常. 在弹窗组件代码上加上 append-to-body 就可以了,表示这个弹窗是嵌在 ...
第5节 Selenium 操作form表单
from表单是我们经常测试的用例,绝大多数web程序都有,例如:用户登录.注册 form表单的流程是这样的: 1.定位表单元素 2.输入测试值 3.判断表单元素属性 4.获取表单元素属性 5.提交表单 ...
使用vue表单验证库async-validator封装Form表单组件
src/components/data/seller/create/contract.vue <template><create-portlet title="合同信息&q ...
Django之form表单组件、cookie与session
---恢复内容开始--- Form表单组件引例: 先来看一个注册的例子,全部用的是reg函数来实现的. views.py文件 def reg(request):errors = {'username ...
jQuery操作Form表单元素
Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...
JavaScript的form表单提交
开发工具与关键技术: VS 与 JS 作者:摆烂小明撰写时间:2022 年 4 月 17 日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
Django Form表单组件
Form介绍我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

如何用JavaScript操作form表单组件？

一、用JavaScript操作按钮：

二、用JavaScript操作文本框、密码框、文本域、隐藏框：

三、用JavaScript操作单选：

四、用JavaScript操作多选：

五、用JavaScript操作下拉列表：

如何用JavaScript操作form表单组件？相关推荐

最新文章

热门文章