JavaScript表单基础

theme: channing-cyan

这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

了解表单

我们应该知道JavaScript设计的的初衷很大程度上是为了处理表单验证，因为在那个远古时代表单验证是通过后台来验证的，网速都比较慢，我们向后台发送数据都需要很长时间才能接收返回数据，动则几分钟少则几十秒，用户体验极其不佳。JavaScript在设计在网页校验，直接就能告诉用户结果，它还增加了很多表单控件的默认行为，这直接让这门语言火了起来。

表单基础

表单在html中以<form>标签元素展示，在js中它用HTMLFormElemnt类型表示。

介绍一下HTMLFormElement类型的属性和方法。

• acceptCharset：服务器可以接收的字符集，等价于 HTML 的 accept-charset 属性。
• action：请求的 URL，等价于 HTML 的 action 属性。
• elements：表单中所有控件的 HTMLCollection。
• enctype：请求的编码类型，等价于 HTML 的 enctype 属性。
• length：表单中控件的数量。
• method：HTTP 请求的方法类型，通常是"get"或"post"，等价于 HTML 的 method 属性。
• name：表单的名字，等价于 HTML 的 name 属性。
• reset()：把表单字段重置为各自的默认值。
• submit()：提交表单。
• target：用于发送请求和接收响应的窗口的名字，等价于 HTML 的 target 属性。

提交表单

只要有表单就肯定会有提交表单，提交表单的方法我们上面也有，就是submit方法。 一般我们都会写一个button按钮，给他设定type值为提交。

    <form action="./form.html" method="get" >
        <input type="text" value="">
        <button type="submit">提交</button>
    </form>

阻止提交

preventDefault()方法就是阻止表单提交，

 const form = document.getElementById("form");
    form.addEventListener("submit", (event) => {
        event.preventDefault();
        console.log('阻止成功');//阻止成功
    })

一般我们使用场景就是在提交且不跳转页面的时候，用户点击提交后其实是给服务器发送了表单，但是我们防止用户二次提交，会在提交后执行这个方法，阻止之后的提交。还有一种方法就是直接禁用提交按钮，给它设置一个disabled属性。

表单字段的公共属性

前面提到disabled属性，这个就是禁用。我们看一下表单里面都有什么公共属性。

• disabled：布尔值，表示表单字段是否禁用。
• form：指针，指向表单字段所属的表单。这个属性是只读的。
• name：字符串，这个字段的名字。
• readOnly：布尔值，表示这个字段是否只读。
• tabIndex：数值，表示这个字段在按 Tab 键时的切换顺序。
• type：字符串，表示字段类型，如"checkbox"、"radio"等。
• value：要提交给服务器的字段值。对文件输入字段来说，这个属性是只读的，仅包含计算机上 表单字段的公共方法 就俩个哈哈
• focus() 表示获取焦点
• blur() 失去焦点

我们可以根据需求在js中操作这些内容，反正我感觉是挺好玩的。现在好多开源的ui库，大家可以配套使用。