JavaScript操作form表单

1. 获取输入的值

        <input id="aa" /><input type="button" value="查询" onclick="t1()" /><script>document.getElementById("aa").focus();function t1() {var element = document.getElementById("aa");console.log(element.value);}</script>

结果如图：

2. 密码框

<html><head><meta charset="UTF-8"><title></title></head><body><input type="password" id="aa" /><input type="button" value="查询" onclick="t1()" /><script>document.getElementById("aa").focus();function t1() {var element = document.getElementById("aa");console.log(element.value);}document.getElementById("aa").readOnly = true;//将其设置为只读document.getElementById("aa").disabled = true;//将其设置为禁用document.getElementById("aa").focus();//将其设置为焦点</script></body>
</html>

图为disabled展示

3.文本域

<html><head><meta charset="UTF-8"><title></title></head><body><textarea id="aa"></textarea><input type="button" value="查询" onclick="t1()" /><script>document.getElementById("aa").focus();function t1() {var element = document.getElementById("aa");console.log(element.value);}document.getElementById("aa").readOnly = true;//将其设置为只读document.getElementById("aa").disabled = true;//将其设置为禁用document.getElementById("aa").focus();//将其设置为焦点</script></body>
</html>

注释掉readonly和禁用显示如图：

点击查询结果：

4. radio对象

<html><head><meta charset="UTF-8"><title></title></head><body><input type="radio" name="sex" value="1" />男<input type="radio" name="sex" value="2" />女<input type="button" value="查询" onclick="t2()" /><script>document.getElementsByName("sex")[0].checked = true;//默认选择function t2() {var elements = document.getElementsByName("sex");for(var i = 0; i < elements.length; i++) {var element = elements[i];console.log(element.value + "," + element.checked)}}</script></body>
</html>

查询结果：

5.checkbox对象

     <input type="checkbox" name="hobby" value="1" />lll<input type="checkbox" name="hobby" value="2" />aaa<input type="checkbox" name="hobby" value="3" />sss<input type="button" value="查询" onclick="t2()" /><script>document.getElementsByName("hobby")[0].disabled = true;//禁用document.getElementsByName("hobby")[0].checked = true;//默认选择function t2() {var elements = document.getElementsByName("hobby");for(var i = 0; i < elements.length; i++) {var element = elements[i];console.log(element.value + "," + element.checked)}}</script>

取消禁用，查询结果：

6.select对象

     <select id="ddd"><option value="">--请选择--</option><option value="1">北京</option><option value="2">河南</option><option value="3">河北</option></select><script>function t3() {var element = document.getElementById("ddd");var options = element.options;for(var i = 0; i < options.length; i++) {var option = options[i];console.log(option.value + "," + option.selected)}}</script><input type="button" value="查询" onclick="t3()" />

未选择时查询结果：

JavaScript操作form表单相关推荐

如何用JavaScript操作form表单组件？
一.用JavaScript操作按钮: <!DOCTYPE html> <html><head><meta charset="UTF-8"& ...
第83天：jQuery中操作form表单
操作form表单 1. 属性操作设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr("title", ...
第5节 Selenium 操作form表单
from表单是我们经常测试的用例,绝大多数web程序都有,例如:用户登录.注册 form表单的流程是这样的: 1.定位表单元素 2.输入测试值 3.判断表单元素属性 4.获取表单元素属性 5.提交表单 ...
jQuery操作Form表单元素
Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...
JavaScript的form表单提交
开发工具与关键技术: VS 与 JS 作者:摆烂小明撰写时间:2022 年 4 月 17 日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
JavaScript之form表单提交前验证的onSubmit事件
在前端使用JavaScript验证表单数据时,对验证不通过的form表单要阻止其提交到后台.这时,可以使用onSubmit事件来阻止其提交. <form method="post&qu ...
JavaScript基础-form表单验证
表单验证的两种方式: 一.使用alert提示框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
javascript中FORM表单的submit()方法经验教训.
@author songfeng 因为JS内对象的方法实际上是存储语句的一个类似于指针的东西. 其指向了内存的一个位置, 也就是其函数的位置,当然也可以让其指向一个变量值 ...
JavaScript的form表单验证中的身份证校验
前几天,在项目中遇到一个问题,就是这个身份证校验,一般普通人的身份证号是有18位,当时我只想到了限制长度来做验证,因为着急下班,哈哈哈哈哈直到昨天,才想到JavaScript中有个正则表达式,所以我 ...

JavaScript操作form表单

JavaScript操作form表单相关推荐

最新文章

热门文章