OIP-C.jfif

Form表单

1、Form表单的属性

Form表单有跟其他元素一样的默认人属性像id、class等

当然他也有自己的属性和方法
1、accepCharset:服务器可以接受的字符集
2、action:请求的url
3、elements:表单中所有控件的HTMLCollection
4、enctype:请求的编码类型
5、length:表单中控件的数量
6、method:HTTP请求的方法类型，通常是‘get’或者‘post’,等价于HTML的method属性
7、name:表单的名字
8、submit:提交表单
target:用于发送数据和接受响应的窗口的名字。

2、提交表单

表单可以通过用户点击提交按钮或者图片按钮的方式来提交。

//通用提交按钮
<input type="submit" value="submit from">
//图片按钮
<input type="image" src='graphic.gif'>
//自定义提交按钮
<button type="submit">submit form</button>

在提交表单向服务器发送请求之前触发submit事件。可以通过这个事件来定义一个预验证表单数据的事件处理程序。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <form action="#;" method="post" id="myform">
            <input id="hah" type="text" name="username" placeholder="请输入姓名">
            <br>
            <input type="password" name="password" placeholder="请输入密码">
            <br>
            <input type="submit" value="submit from">
        </form>
        <!-- 以这种方式点击按钮给服务器提交表单数据之前，会先触发submit事件，可以利用这一点
        对数据进行预校验，如果可以就发送数据，如果不符合就不发送数据 -->
        <script>
            let form = document.getElementById('myform')
            form.addEventListener('submit',(event)=>{
                let p =document.getElementById('hah') 
                if(p.value!=='xiaoming'){
                    event.preventDefault();
                }
            })
        </script>
    </body>
    </html>

也可以在js中通过submit()方法来提交表单。但是不会触发submit事件。因此调用这个方法之前要对表单数据进行数据验证。

表单字段，可以利用给表单的字段添加属性来实现避免二次提交的功能，也就在第一次点击提交之后，给提交按钮添加禁用的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <form action="#;" method="POST" id="myForm">
            <input type="text" name='username' placeholder="输入名字">
            <br>
            <input type="password" name="password" placeholder="输入密码">
            <br>
            <input type="radio" name='color' value="red">RED
            <br>    
            <input type="radio" name="color" value="green">GREEN
            <br>
            <input type="submit" value="submit" name="btn">
        </form>
    </div>
    <script>
        let p = document.getElementById('myForm')
        p.addEventListener('submit',(event)=>{
            let btn = event.target.elements['btn']
            btn.disabled=true
        })
    </script>
</body>
</html>

不能通过监听input框的点击事件(onclick事件)来实现防止二次点击的功能，因为在不同的服务器中，click事件的触发时机是不一样的，有的是在触发表单提交之前，有的是在触发表单提交之后。如果在表单提交之前就触发了click事件，给这个提交按钮的click事件处理程序设置禁用按钮的话，那么第一次表单的提交也实现不了了。

form表单

Form表单

1、Form表单的属性

2、提交表单