在HTML和JavaScript中使用表单的基本知识🏠 返回首页了解在HTML和JavaScript中使用表单的基本

了解在HTML和JavaScript中使用表单的基本知识

表格是HTML和网络平台的一个极其重要的部分。它们允许用户与页面进行交互，并

以及更多更多。

默认情况下，表单将其内容提交给服务器端的一个端点，默认情况下，这个端点就是页面的URL本身。

<form>
  ...
  <input type="submit">
</form>

我们可以通过设置表单元素的action 属性来覆盖这一行为，使用method 属性所定义的HTML方法，该属性默认为GET 。

<form action="/contact" method="POST">
  ...
  <input type="submit">
</form>

在点击提交输入元素时，浏览器会向同一来源（协议、域和端口）的/contact URL发出一个POST请求。

使用JavaScript我们可以拦截这个事件，异步提交表单（用 XHR和取回)，我们还可以对发生在单个表单元素上的事件做出反应。

我刚刚描述了表单的默认行为，不需要JavaScript。

为了开始用JavaScript处理表单，你需要拦截表单元素上的submit 事件。

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
})

现在在提交事件处理函数里面，我们调用event.preventDefault() 方法来阻止默认行为，避免表单提交后重新加载页面。

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
  event.preventDefault()
})

在这一点上，点击表单中的提交事件按钮不会做任何事情，除了给我们控制权。

我们有许多事件可以在表单元素中监听到

input 当元素的值被改变时，在表单元素上发生的事件
change 当元素的值发生变化时，在表单元素上触发的事件。在文本元素和的情况下，当元素失去焦点时，它只被触发一次（而不是对每个键入的字符）。input textarea
cut 当用户从表单元素中剪切文本时被触发
copy 当用户从表单元素中复制文本时被触发
paste 当用户将文本粘贴到表单元素时被触发
focus 当表单元素获得焦点时被触发
blur 当表单元素失去焦点时被触发

这里是Codepen上的一个表单演示样本。

请看Flavio Copes（@flaviocopes）在CodePen上的Pen表单事件演示。