JS中表单的使用小结

在JavaScript中，表单（Forms）是网页中用于收集用户输入数据的重要组件。以下是对JavaScript中使用表单的一个小结：

### 1. 表单的基本结构

HTML中表单通过`

`标签定义，可以包含多种输入元素如``, `

`, `<select>`等。表单的`action`属性定义了提交表单时数据应发送到的URL，而`method`属性则指定了数据发送的HTTP方法（通常是`GET`或`POST`）。</p><p></p><pre class="line-numbers language-markup"><code>
<form action="/submit-form" method="post">
  
  <input type="text" name="username" placeholder="Username">
  <input type="submit" value="Submit">
</form>
</code></pre>
<p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8670312724662002"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-8670312724662002"
     data-ad-slot="2901279597"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<p></p><p>### 2. JavaScript与表单的交互</p><p>#### 2.1 阻止表单的默认提交行为</p><p>可以使用JavaScript的`event.preventDefault()`方法阻止表单的默认提交行为，以便使用Ajax等技术异步处理表单数据。</p><p></p><pre class="line-numbers language-javascript"><code>
document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  // 可以在这里使用Ajax提交表单数据
});
</code></pre>
<p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8670312724662002"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-8670312724662002"
     data-ad-slot="2901279597"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<p></p><p>#### 2.2 访问表单数据</p><p>在表单提交前，可以使用JavaScript访问和验证表单数据。例如，获取输入字段的值：</p><p></p><pre class="line-numbers language-javascript"><code>
var username = document.querySelector('input[name="username"]').value;
console.log(username); // 输出用户输入的用户名
</code></pre>
<p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8670312724662002"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-8670312724662002"
     data-ad-slot="2901279597"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<p></p><p>#### 2.3 表单验证</p><p>可以在提交前通过JavaScript对表单数据进行验证，确保数据的完整性和正确性。</p><p></p><pre class="line-numbers language-javascript"><code>
function validateForm() {
  var username = document.querySelector('input[name="username"]').value;
  if (username.trim() === '') {
    alert('Username cannot be empty!');
    return false;
  }
  // 可以添加更多验证逻辑
  return true;
}

<footer class="card" style="position:relative;bottom:0;width:100%;">
        <div style="background-color: #e9ecef;padding-top: 20px;">
            <div class="container">
                <div class="copyright">Copyright © 2024 www.d2tu.com 
                    <a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">皖ICP备2023005503号-1</a> 
		     <a href="https://www.d2tu.com/sitemap.xml" target="_blank">XML地图</a> 
                </div>
                <p>QQ邮箱: <b>664032890</b></p>
            </div>
          </div>
    </footer>