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(){
//方法1
 var 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 = 1234445
    console.log(document.querySelector('#introduce').value); //1234445

    
    console.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>