HTML | DOM 输入提交表单属性

HTML的<form>标签提供了一个机制来向服务器发送数据，以便进行响应处理。表单数据是通过使用HTTP协议的POST或GET请求发送的。

在HTML中，有一些属性可用于定制表单提交行为，这些属性使得在提交表单时可以从文本框，单选框，多选框等看的到的HTML控件中检索值。下面是一些常用的输入提交表单属性：

method 属性

• 描述：规定form提交时所使用的HTTP方法。该属性取值为 "get" 或 "post"。
• 代码片段：

<form method="get" action="/search">
  <input type="search" name="q">
  <input type="submit" value="Search">
</form>

action 属性

• 描述：规定在提交表单时向何处发送表单数据。该属性值为URL。
• 代码片段：

<form method="get" action="/register">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Register">
</form>

name 属性

• 描述：规定表单控件的名称。该名称可供表单的后端处理程序使用。
• 代码片段：

<form action="/login">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Log In">
</form>

value 属性

• 描述：规定表单控件的默认值。
• 代码片段：

<form action="/subscribe">
  <input type="email" name="email" placeholder="Enter your email" required>
  <input type="submit" value="Subscribe">
</form>

placeholder 属性

• 描述：规定在表单控件为空时显示的文本。
• 代码片段：

<form action="/contact">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <input type="submit" value="Send">
</form>

required 属性

• 描述：规定表单控件是否必填项。用户需要填写确保表单完整并提交。
• 代码片段：

<form action="/checkout">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <input type="tel" name="phone" placeholder="Your Phone" required>
  <input type="submit" value="Check Out">
</form>

在JavaScript中，可以通过访问表单的DOM文档对象模型（DOM）属性来操纵表单控件，并在表单提交时发送表单数据。例如：

document.querySelector('form').submit();

这个代码片段将提交包含在第一个表单元素中的表单数据。

总之，在HTML和JavaScript中，表单控件具有多种属性，使得在提交表单时可以操纵和定制表单控件的行为。