HTML表单

1.单选按钮类型=”radio”

同组的单选按钮的name属性的值必须相同，因为单选按钮的排他性取决于这个名字

英雄联盟
红色警戒2
男
女

设置默认选中：添加属性

男
女

JS获取当前选中单选按钮的值

var radios = document.querySelectorAll('input[name=sex]')
function getVal(){
    radios.forEach(item => {
        if(item.checked){
            console.log(item.value)
        }
    })
}

2.检查按钮类型=””

请为同一组按钮设置相同的名称

英雄联盟
红色警戒2
拳皇

设置默认选中：添加属性

英雄联盟
红色警戒2
拳皇

JS获取当前选中复选框的值

var checks = document.querySelectorAll('input[name=game]')
function getVal(){
    var  arr = []
    checks.forEach(item => {
        if(item.checked) {

            arr.push(item.value)
        }
    })
    console.log(arr)
}

表单提交时，或者使用()方法时，数据如下

game=LOL&game=ra2

3.下拉菜单

    Volvo
    Saab
    Fiat
    Audi

第一个会默认选中，也可以自己设置默认选中

方法：给要选择的标签添加一个属性

    Volvo
    Saab
    Fiat
    Audi

js获取下拉菜单的值，选择哪一个，它的值就是

var select = document.querySelector('#car')
console.log(select.value)

4.表单中默认选中的注释

男
女
英雄联盟
红色警戒2
拳皇

其实标签中的/属性只是页面渲染时内存的初始化。真正生效的是内存中对应的值

以单选按钮的性别为例，默认为“男”，然后手动选择切换为“女”，Dom结构如下

男
女

这说明Dom中的标签所显示的属性不会随着操作而改变，总是和页面加载时一样。这也意味着查看Dom标签显示的相关属性来判断单选/多选框是不准确的。总是和页面初始化的时候一样（也就是没用）

要获取表单的选中状态，只能使用点语法（不推荐）

document.querySelector('input').checked;

5.标签

标签在相关的表单元素周围绘制边框。

提示：标签定义元素的标题。

    
    
    
        .wrap{width:600px;margin:20px auto;}
    


    

        
            

                
账号注册
                
                    用户名：
                
                

                
                    设置密码：
                
                

                    性别：
                    男
                    女
                
                

                    爱好：
                    打球

                    听歌
                    看电影
                
                

                    
                        请选择城市
                        广州
                        上海
                        深圳
                        北京
                    
                
            
        
    

6.文件上传类型=”文件”

上传文件的表单项时，必须设置form标签设置属性和value=”/form-data”，否则提交会是字符串（文件名）而不是文件，必须设置为“邮政”

属性：指定可以通过文件上传提交的文件类型，只有默认，不强制

属性：指定输入字段可以选择多个值，即可以选择多个文件

单击该控件时，会弹出一个控件用于浏览和选择文件

    
    
    
    


    
        
        

            
            
Test
            

            
文件:
            

                
            
        
    



    var submit = document.querySelector("[type=submit]")
    // 监听表单提交
    submit.onclick = function(e){
        e = e || event
        var file = document.querySelector("[type=file]")
        // value属性值为第一个文件的文件路径（字符串）
        console.log(file.value)
        // files属性值为文件列表(数组)
        console.log(file.files)
        // 阻止默认事件
        e.preventDefault()
    }

可以看出，文件控件的value属性值只是一个虚拟路径，而files属性值是一个文件列表（数组）。在这个文件列表的元素中，只能获取选中文件的文件名（files[i].name）、文件大小（files[i].size）和文件类型（files[i].type）。知道文件的具体路径。

PS：浏览器是从安全角度设计的，不允许读写本地文件。因此，我们只能通过file元素获取选中文件的文件名，无法知道具体的路径，所以无法直接访问这个文件。要访问选定的文件，要么前端和后端交互，要么上传文件，然后从后端取回，要么使用对象——允许 Web 应用程序异步读取文件的对象（或原始数据缓冲区）存储在用户的计算机上。内容; 该方法可以优化图片加载速度，减少方法一占用带宽的问题；

美化按钮文件控件：设置文件控件隐藏，点击其他按钮触发文件控件的点击事件。

    

        
美化后的file控件
        
        
        
        上传图片
    
    

    

    

    

        
原生的file控件

        
    


    // 获取隐藏的file控件
    var virtual = document.querySelector("#virtual")
    // 获取按钮
    var btn = document.querySelector("#btn")
    //监听按钮点击
    btn.onclick = function(){
        //触发隐藏的file控件的点击事件
        virtual.click()
    }

7.属性

该属性指定表单数据在发送到服务器之前应如何编码。

值 描述

/x-www-form-

发送前对所有字符进行编码（默认），例如 key1=a&key2=b

/表格数据

不编码字符。使用包含文件上传控件的表单时需要此值。

文本/纯文本

空格转换为“+”加号，但不编码特殊字符。

8.关于修改文本输入框值的一些注意事项

一般来说，文本输入框的值取决于value属性的值，通常是通过设置label属性或者点语法，例如

text.setAttribute('value',new Date().getTime()) //setAttribute方法
text.value = new Date().getTime() //点语法

但是使用点语法时，输入框的值可以改变，但是标签中的属性值不能更新，例如

如果添加属性，该方法不能改变输入框的值（但可以改变标签中的属性值）

点语法可以忽略属性直接修改输入框的值

手动修改标签中的属性值不会改变输入框的值

总结：

文本输入框的值与内存直接相关。当标签中属性值的值没有属性时，无论是手动修改还是通过方法修改，都可以将值同步到输入框。如果有属性，则此同步将被阻止。

点语法操作的值与文本输入框的值直接相关，但是修改它不会改变标签中属性值的值