阅读 347

JavaScript表单基础

这是我参与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库,大家可以配套使用。

文章分类
前端
文章标签