form表单注意点合集（文本域、单选框、复选框、下拉框等）

.html

<form action="#" target="_blank">账号：<input type="text" name="user1"><br/>密码：<input type="password" name='pwd1'><br/>城市：<select name="city"><option value="">北京</option><option value="">上海</option><option value="">广州</option><option value="">深圳</option></select><br/><button>登录</button></form>
<button>点击</button>

1 对from表单的操作

forms：获取的是当前页面中所有表单，返回一个结果集

 console.log(frm=document.forms[0])

action：获取表单提交地址

var url=frm.action
console.log(url) 输出结果：file:///D:/BaiduNetdiskDownload/day17%20DOM%E9%AB%98%E7%BA
%A7-%E8%A1%A8%E8%BE%BE%E6%93%8D%E4%BD%9C-%E5%A4%9A%E5%B1%9E%E6%80%A7%E8%BF%
90%E5%8A%A8/01.DOM-%E8%A1%A8%E5%8D%95.html#//设置表单的提交地址
//frm.action="https://www.baidu.com"

.lenght:获取表单对象中元素的长度

var len=frm.length
console.log(len) //4  form表单里面有4个元素

elements:获取所有表单元素

var eles=frm.elements
console.log(eles)输出结果：HTMLFormControlsCollection(4)
[input, input, select, button, user1: input, pwd1: input, city: select]

target:获取表单提交时的窗口方式

var tar=frm.target
console.log(tar) //_blank 新窗口打开   在form里面设置过

重置和提交表单

frm.reset()
frm.submit()

2 下拉框的操作

.from：获取当前下拉框所在的表单

//获取下拉框对象
var sel=document.querySelector('[name="city"]')
//返回当前下拉框所在的表单
console.log(sel.form)

.length：获取下拉框中选项的个数

 console.log(sel.length) //4

.options：获取下拉框中所有的选项

console.log(sel.options)
输出结果：
HTMLOptionsCollection(4) [option, option, option, option, selectedIndex: 0]
0: option
1: option
2: option
3: option
length: 4
selectedIndex: 0
[[Prototype]]: HTMLOptionsCollection

.selectedIndex：获取被选中的选项索引

var index1=sel.selectedIndex
console.log(index1)  //返回数字，从0开始

.type：获取当前是下拉框还是列表框

var aa=sel.type
console.log(aa) //select-multiple  当前是下拉框

小操作系列

.defaultSelected:是否默认被选中；

.selected：是否被选中；

.index：获取当前选项的下标；

.value：获取当前选项的value属性值；

.text：获取当前选项的文本内容；

 //获取所有下拉框选项
var opts=sel.options
//判断第一个选项是否默认被选中
console.log(opts[0].defaultSelected)
//判断第二个选项是否被选中
console.log(opts[1].selected)
//获取当前选项的下标
console.log(opts[1].index)
//获取当前选项的value属性值console.log(opts[1].value)
//获取当前选项的文本内容console.log(opts[1].text)
//给第二个选项修改内容
opts[1].text="成都"

点击创建一个选项（2个方式）

btns[1].onclick=function(){
//方法1var opt=new Option('成都',"chengdu")
//把当前选项追加到下拉框中
sel.add(opt) //方法2
var opt=document.createElement("option")
//给当前选项添加内容
opt.value="chengdu"
opt.innerHTML="成都"
//把当前内容追加到下拉框中
sel.appendChild(opt)
}

点击删除某一个选项（2个方式）

btns[2].onclick=function(){方式1：根据索引删除//获取被选中的下拉选项索引// var opts=sel.selectedIndex//根据下标删除指定一个选项// sel.remove(opts)// sel.options[opts]=null//删除多个选项// sel.options.length=1方式2：核心DOM//使用核心DOM来进行删除//先获取被选中的下标var opts=sel.selectedIndex//获取该下标对应的选项var option1=sel.options[opts]// console.log(option1)sel.removeChild(option1)}

3 值的获取(文本域、下拉框、单选框、复选框)

注：select下拉框中，option的值，如果给value值，则返回value的值，而不是显示的文本。所以一般情况下，value值和文本内容是一致的。

.html

<form action=""><select name="pro" id="pro"><option value="bj">北京</option><option value="sz">深圳</option></select>爱好：唱 <input type="checkbox" class="like" value="c">跳<input type="checkbox" class="like" value="t">rap<input type="checkbox" class="like" value="r">篮球<input type="checkbox" class="like" value="l"><br>性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br>介绍：<textarea  id="introduce" cols="30" rows="10">00000</textarea><input type="submit" value="提交" id="sub"></form>

<script>document.querySelector('#sub').onclick = function(e){e = e || window.event;e.preventDefault();document.querySelector('#introduce').value = 1234445console.log(document.querySelector('#introduce').value); //1234445console.log(document.querySelector('#pro').value);let sex = document.querySelectorAll('input[name=sex]');for (let j = 0; j < sex.length; j++) {console.log(`${j}===>${sex[j].checked}====>${sex[j].value}`);      }let likes =  document.querySelectorAll(".like");let arr = []for (var i = 0; i < likes.length; i++) {if(likes[i].checked){console.log(likes[i].value);arr.push(likes[i].value)}}console.log(arr);}
</script>

form表单注意点合集（文本域、单选框、复选框、下拉框等）相关推荐

form提交后，jquery 显示文本框选择值和下拉框选中值
不用ajax ,而实现提交form后,页面刷新后,把原来的下拉框的值文本值赋值到对应项 window.load; function load(){ var monthN = docu ...
MFC_C++02_模态对话框，非模态对话框，StaticText静态文本，CEditCtrl控件，ComboBox下拉框，CListCtrl控件，CTreeCtrl 树控件，TabCtrl标签控件
01 模态对话框创建更改标题名: 菜单栏 --> 视图->工具箱 ,找到工具箱导入两个按钮: 准备对话框: 插入就可以了,更改名称双击按钮,可以进入点击事件创建控件的类:右击-&g ...
[ant design vue] 关于ant design vue 表单报错合集
情况一:当我点击新增时会报以下错误: 原因是我在使用v-decorator的同时使用了v-model,如下图: 解决方案就是:把v-model删掉,需要动态获取值,可以通过: this.form.ge ...
Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template> <div > <p>------- ...
JavaScript中自定义函数以及文本框、radio、下拉框的值的获取，结合淘宝竞拍案例来理解。。。...
淘宝竞拍案例: HTML部分代码: <form action="#" method="post"><h2>欢迎进入淘宝竞拍</h2 ...
野田SEO工具箱：集文章伪原创、百度网址URL下拉框采集、指数、权重、收录批量查询功能
做SEO的人多少会用到各种查询工具, 今天小编就来分享一些SEO常用工具包: 1.网址批量采集: 多线程换IP一分钟采集3000条,速度超快[突破百度验证码] 实测效率: 电脑配置(四核8G,win1 ...
诺诺SEO软件包：集文章伪原创、百度网址URL下拉框采集、指数、权重、收录批量查询功能
做SEO的人多少会用到各种查询工具, 今天小编就来分享一些SEO常用工具包: 1.网址批量采集: 多线程换IP一分钟采集3000条,速度超快[突破百度验证码] 实测效率: 电脑配置(四核8G,win1 ...
html隐藏form样式,form表单标签
Html form 表单区域标签元素一.Form表单区域标签语法与结构: �?br /> Method的值为get时,是通过URL传内容与参数,这个时候我们通过网址URL能看见自己填写内容提交 ...
form表单如何加css框架,如何写好CSS系列之表单(form)
表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置:二是表单元素,如:输入框.单选.复选.列表组件.搜索组件等,由于列表组件.搜索组件不是单纯的css组件,所以暂且没有实现. 一 ...

form表单注意点合集（文本域、单选框、复选框、下拉框等）

1 对from表单的操作

2 下拉框的操作

form表单注意点合集（文本域、单选框、复选框、下拉框等）相关推荐

最新文章

热门文章