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) {

图片[1]-HTML表单-唐朝资源网

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.标签

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

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




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


    
账号注册
性别:
爱好:
请选择城市 广州 上海 深圳 北京

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

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

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

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

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




    
    
    
    Test


    
        
        
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() //点语法

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

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

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

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

总结:

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞80 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片