HTML DOM Form 对象

HTML 中的 <form> 元素用于创建一个包含各种表单元素的表单,用户可以在这个表单中输入数据并提交给服务器进行处理。在前端开发中,我们经常需要使用 <form> 元素来收集用户输入的数据,并进行相应的处理。

属性

  • action:指定表单数据提交的目标 URL。
  • method:指定表单数据提交的方式,可以是 GET 或 POST。
  • enctype:指定表单数据的编码类型,常见的有 application/x-www-form-urlencodedmultipart/form-data

表单元素

<form> 元素内部,可以包含各种表单元素,如文本框、下拉框、复选框、单选框等,用于收集用户输入的数据。以下是一些常见的表单元素:

  • <input type="text">:用于输入文本。
  • <input type="password">:用于输入密码。
  • <input type="checkbox">:用于选择多个选项。
  • <input type="radio">:用于选择单个选项。
  • <select>:下拉框,用户可以从预定义的选项中选择一个。
  • <textarea>:多行文本框。

示例代码

-- -------------------- ---- -------
----- ---------------- --------------
  ------ ---------------------------
  ------ ----------- ------------- ------------------------
  
  ------ --------------------------
  ------ --------------- ------------- ------------------------
  
  ------------------
  ------ ------------ ------------- --------------
  ------ ------------ ------------- ------------------------
  
  ------ ----------------------
  ------- --------- ------------
    ------- ---------------------------
    ------- ----------------------------
    ------- -----------------------------
  -----------------
  
  ------ -----------------------------
  --------- ------------ -------------- -------- -----------------------------
  
  ------ ------------- -----------
-------

以上是一个简单的表单示例,包含了文本框、密码框、单选框、下拉框和多行文本框等表单元素,用户可以填写相应的信息并点击提交按钮进行数据提交。在实际开发中,我们可以通过 JavaScript 来对表单进行验证和处理,以提升用户体验和数据的准确性。

集合 描述 W3C
elements[] 包含表单中所有元素的数组。 Yes
属性 描述 W3C
acceptCharset 服务器可接受的字符集。 Yes
action 设置或返回表单的 action 属性。 Yes
enctype 设置或返回表单用来编码内容的 MIME 类型。 Yes
length 返回表单中的元素数目。 Yes
method 设置或返回将数据发送到服务器的 HTTP 方法。 Yes
name 设置或返回表单的名称。 Yes
target 设置或返回表单提交结果的 Frame 或 Window 名。 Yes
方法 描述 W3C
reset() 重置一个表单 Yes
submit() 提交一个表单 Yes
事件 描述 W3C
onreset 在重置表单元素之前调用。 Yes
onsubmit 在提交表单之前调用。 Yes
上一篇: HTML 对象 <fieldset>
下一篇: HTML 对象 <iframe>
纠错
反馈