你真的弄懂了html的form表单有哪些属性吗？-前后端技术分享

<form>

<form>：用于收集用户输入的表单

<form> 元素有多种属性，用于控制表单的行为、样式和交互方式。以下是常见的 <form> 属性：

name、action、method、enctype、target、autocomplete、novalidate、accept-charset、rel、onsubmit

接下来我会逐一介绍其作用和用法：

name：顾名思义，为表单命名，方便通过 js引用。

<form name="myForm">
  <!-- 表单内容 -->
</form>

通过document.forms["myForm"]可以访问这个form元素

action：定义表单提交的目标 URL，数据将发送到此 URL 进行处理。

 <form action="/submit">
    <!-- 表单内容 -->
  </form>

表单提交时，数据将发送到 /submit。

method：定义表单数据发送到服务器时使用的 HTTP 方法。常见的取值为：

"GET"：默认值，数据作为 URL 查询字符串发送，适用于不涉及敏感数据的请求。
"POST"：数据在请求体中发送，适用于敏感数据或大数据量的情况。

<form action="/submit" method="post">
  <!-- 表单内容 -->
</form>

表单将使用 POST 方法发送数据。

enctype：定义表单数据编码格式

application/x-www-form-urlencoded：默认值，键值对格式。

multipart/form-data：用于文件上传，必须在包含 <input type="file"> 时使用。

text/plain：以纯文本格式发送，常用于调试。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit">
</form>

表单将以 multipart/form-data 格式发送数据，适合文件上传。

target：指定表单提交后的目标窗口和框架，常见值如下：

_self：默认值，在当前页面打开。
_blank：在新窗口或标签页打开。
_parent：在父级框架中打开。
_top：在整个窗口中打开，覆盖所有框架。

<form action="/submit" target="_blank">
  <!-- 表单内容 -->
</form>

表单将在新窗口中提交。

autocomplete：控制表单的自动填充功能。常见值：

on：允许浏览器自动填充表单字段（默认）。
off：禁用自动填充。

<form action="/submit" autocomplete="off">
  <!-- 表单内容 -->
</form>

表单自动填充被禁用。

novalidate：禁用 HTML5 的内置表单验证。

<form action="/submit" novalidate>
  <input type="email" required>
  <input type="submit">
</form>

即使 <input> 元素是必填项，提交表单时不会触发 HTML5 验证。

accept-charset：定义服务器可以处理的字符编码集。常见值包括 "UTF-8"、"ISO-8859-1" 等。

<form action="/submit" accept-charset="UTF-8">
  <!-- 表单内容 -->
</form>

表单将使用 UTF-8 编码发送数据。

rel：用于指定提交时的关系类型，通常配合 target 属性使用。常见值：

noopener：在使用 target="_blank" 时防止新窗口获取对原始窗口的访问权限。
noreferrer：不发送 Referer 头信息。

<form action="/submit" target="_blank" rel="noopener noreferrer">
  <!-- 表单内容 -->
</form>

防止新窗口获得原窗口的访问权限。

onsubmit：绑定 js函数，在提交表单时触发。

<form action="/submit" onsubmit="return validateForm()">
  <!-- 表单内容 -->
</form>

<script>
function validateForm() {
  // 验证逻辑，返回 true 允许提交，返回 false 阻止提交
  return confirm("Are you sure you want to submit?");
}
</script>

在提交表单前，执行 validateForm()函数。

formnovalidate (用于 <input> 或 <button> 元素)：在某个提交按钮上禁用表单验证，即使表单本身启用了验证。只影响该按钮的行为。

<form action="/submit">
  <input type="text" required>
  <input type="submit" value="Submit">
  <button type="submit" formnovalidate>Submit Without Validation</button>
</form>

点击 Submit Without Validation 按钮时，不会触发验证。

formmethod (用于 <input> 或 <button> 元素)：覆盖 <form> 元素的 method 属性，指定某个按钮的提交方法。

<form action="/submit" method="get">
  <input type="submit" value="Submit GET">
  <button type="submit" formmethod="post">Submit POST</button>
</form>

点击 Submit POST 按钮时，将使用 POST 方法提交。

formenctype (用于 <input> 或 <button> 元素)：覆盖 <form> 元素的 enctype 属性，用于指定特定按钮的数据编码格式。

<form action="/submit" method="post">
  <input type="file" name="file">
  <button type="submit" formenctype="multipart/form-data">Upload File</button>
</form>

点击 Upload File 按钮时，将使用 multipart/form-data 格式提交。

button

<button> ：按钮

常见的<button>属性如下：

type，name，value，form，disabled，autofocus，formaction，formmethod，formtarget，formnovalidate

type ：标签类型

button：普通按钮（按钮形状）
submit：提交数据（默认值）
reset：重置数据（刷新）

name和value

name：指定按钮的名称，在表单提交时用作数据的键名。
value：指定按钮的值，在表单提交时作为数据的值。

<form action="/submit" method="post">
  <button type="submit" name="action" value="save">Save</button>
  <button type="submit" name="action" value="delete">Delete</button>
</form>

提交表单时，可以根据按钮的 name 和 value 确定用户点击的是哪个按钮。

form：用于将按钮与特定的 <form> 元素关联，即使按钮在表单之外。

<form id="myForm" action="/submit" method="post">
  <input type="text" name="username">
</form>
<button type="submit" form="myForm">Submit Form</button>

即使按钮在表单之外，点击它仍然会提交 id="myForm" 的表单。

disabled：禁用按钮，使其不可点击。

autofocus: 页面加载时自动聚焦到按钮。每个页面只能有一个元素带有 autofocus 属性。

<button type="button" autofocus>Focus on Me</button>

页面加载时按钮将自动获得焦点。

formaction:覆盖 <form> 元素的 action 属性，指定提交的目标 URL。仅在 type="submit" 时有效。

formmethod、formtarget、formnovalidate都是一样的，仅在 type="submit" 时有效，使用之后会覆盖 <form> 元素的对应的属性

<button> 标签经常用于触发 js事件，可以通过 onclick 属性或事件监听器来实现。

<button type="button" onclick="handleClick()">Click Me</button>

<script>
function handleClick() {
  alert('Button clicked!');
}
</script>

datalist

<datalist>：是 HTML5 引入的一种元素，用于提供输入建议列表，与 <input> 配合使用。

通过 <datalist>，在用户输入时显示一个下拉建议列表。本身不会显示在页面上，它必须与 <input> 元素的 list 属性一起使用。<datalist> 包含多个 <option> 元素，每个 <option> 表示一个建议的选项。

<label for="browsers">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

<datalist>下的<option>的label属性：为 <option> 提供一个不同于 value 的显示文本，但在 <datalist> 中不常使用，因为大多数情况下 label 与 value 一致。

对于非常大的数据集，<datalist> 可能会影响性能，因为所有选项都会被加载。因此，不建议使用 <datalist> 处理大量数据（例如上千条记录）。

select

<select> ：表单元素，创建一个下拉菜单或者列表，让用户从一组选项中选择一项或多项。子元素是 <option>，用于定义每一个选项。

常用属性：name、multiple、size、disabled、required、autofocus、form、tabindex

name：指定提交表单时的键名。

multiple：允许用户选择多个选项。

size：设置可见选项行数；默认值是 1（下拉选择），大于 1 时显示为列表框。

disabled：禁用 <select>，使其不可选。

required：强制用户必须选择一个选项。

autofocus：页面加载时自动聚焦于此元素。

form：指定 <select> 所属的表单 ID，允许在多个表单间共享一个 <select>。

tabindex：设置元素的 Tab 键切换顺序。

option

<option> 标签属性

value、selected、disabled、label、id

value：定义选项的实际值，提交表单时会传递此值。
selected：将选项设为默认选中状态。
disabled：禁用选项，使其不可选择。
label：为选项设置一个简短的标签，通常用于 <datalist> 或 <optgroup> 中（较少使用）。
id：唯一标识 <option> 元素，可以通过 JavaScript 访问。

`optgroup`

<optgroup> 标签属性

常用属性：label、disabled

label：为分组提供名称，分组名会显示在选择列表中。
disabled：禁用整个选项组，组内所有选项都将不可选择。

文章版权归作者所有，未经允许请勿转载。

THE END

html
# html # form # button # datalist # select # option

你真的弄懂了html的form表单有哪些属性吗？