HTML DOM Form 对象

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

属性

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

表单元素

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

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

示例代码

// www.javascriptcn.com code example
<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br><br>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br><br>
  
  <label>性别：</label>
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女<br><br>
  
  <label for="city">城市：</label>
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select><br><br>
  
  <label for="message">留言：</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
  
  <input type="submit" value="提交">
</form>

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