Java Script HTMLFormElement类中常用属性和方法

表单在DOM中由HTMLFormElement对象表示,该对象除了可以调用之前介绍的基本属性和方法外,还有几个常用属性和方法:

1、elements 集合:返回包含表单中所有元素的数组。

说明:(1)元素在数组中出现的顺序和它们在表单的HTML 源代码中出现的顺序相同。

(2)每个元素都有一个 type 属性,其字符串值说明了元素的类型。

(3)如果 elements[] 数组具有名称(input 标签的 id 或 name 属性),那么该元素的名称就是 formObject 的一个属性,因此可以使用名称而不是数字来引用 input 对象。

举例,假设 x 是一个 form 对象,其中的一个 input 对象的名称是 fname,则可以使用 x.fname 来引用该对象。

示例:

结果:

2、submit() :把表单数据提交到 Web 服务器。

示例:

有一点需要特别注意:使用getElementById或者节点关系获取到的节点,都是某个对应类的实例,所以该实例(对象)即可使用该类中的属性或者方法,比如通过document.forms[]或者getElementById(“formId”)获取一个form对象,该对象就是HTMLFormElement的实例,它当然可以使用该类中的属性和方法。

以下是不同类型的节点对应的类:DOM Body (对应body)、DOM Form (对应form)、DOM Frameset (frameset)、DOM IFrame (iFrame)、DOM Image (image)、DOM Input Button (button)、DOM Input Checkbox (checkbox)、DOM Input File(file)、DOM Input Hidden (hidden)、DOM Input Password (password)、DOM Input Radio (radio)、DOM Input Reset (reset)、DOM Input Submit (submit)、DOM Input Text(cell)、DOM TableRow (row)、DOM Textarea (textarea)。

上面的类在js手册或者W3School文档

上都有较详细解释,此处无法一一详解,用到的同学可以去查。右边是W3School文档菜单中列出的:

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在 Vue3 中,如果出现 “无法读取未定义的属性” 的错误提示,一般是因为你在组件中使用了未定义的变量或属性。在你的问题中,错误提示是 “正在读取‘refLoginFrom’”,说明你在组件中使用了一个名为 “refLoginFrom” 的变量或属性,但是它并没有在组件的 setup 方法中进行定义。 解决这个问题,你需要在组件的 setup 方法中定义 “refLoginFrom” 变量或属性,并且使用 ref() 函数或 reactive() 函数进行响应式处理。例如: ```html <template> <form ref="refLoginFrom"> <!-- 表单内容 --> </form> </template> <script> import { ref } from 'vue' export default { setup() { const refLoginForm = ref(null) // 其他代码 return { refLoginForm, // 其他返回值 } } } </script> ``` 这里通过 ref() 函数创建了一个名为 “refLoginForm” 的 ref 对象,然后将其添加到组件的返回值中。在模板中使用时,需要将 ref 对象绑定到表单的 ref 属性上,例如:`<form ref="refLoginForm">`。 另外,如果你使用了 TypeScript,还需要在组件的类型声明中定义 “refLoginForm” 变量或属性的类型。例如: ```typescript <script lang="ts"> import { ref } from 'vue' export default { setup() { const refLoginForm = ref(null) // 其他代码 return { refLoginForm, // 其他返回值 } } } interface ComponentProps { refLoginForm: Ref<HTMLFormElement | null> } export default defineComponent({ name: 'MyComponent', props: { refLoginForm: { type: Object as PropType<ComponentProps['refLoginForm']>, required: true } }, // 其他代码 }) </script> ``` 这里通过 interface 定义了组件的 Props 类型,并且在 defineComponent 中进行了声明。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李传海

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值