1.1 元素 <form>
表单是用户与网站互动的重要部分。通过表单，用户可以输入数据，
然后这些数据会被发送到服务器进行处理。在HTML中，创建表单使用的元素是 <form>。
标签 <form> 用于在网页上创建表单。它是各种表单元素的容器，
比如文本框、按钮、复选框等。用户输入的所有数据都可以发送到服务器进行处理。
使用示例:
HTML
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button id="submit" type="submit">提交</button>
</form>
<script>
const userName = document.getElementById("username");
const userEmail = document.getElementById("email");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && userEmail.validity.valid) {
e.preventDefault();
alert(`你的名字: ${userName.value}\n` + `你的Email: ${userEmail.value}`);
}
});
</script>
HTML
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">提交</button>
</form>
<form>标签的属性
属性 action 指定 表单数据将在按下提交按钮后发送到的URL。
如果没有指定 action 属性，表单数据将被发送到当前的URL。
使用action属性的例子:
HTML
<form action="https://example.com/submit">
<!-- 表单元素 -->
</form>
属性 method 指定用于提交表单数据的HTTP方法。可用的两个值是：GET 和 POST。
- GET: 表单数据被包含在请求URL中作为参数。这个方法适合发送少量数据，不应该用于发送敏感信息。
- POST: 表单数据被发送在HTTP请求体中。这个方法适合发送大量数据和敏感信息。
使用method属性的例子:
HTML
<form action="/submit" method="post">
<!-- 表单元素 -->
</form>
1.2 数据提交方法
GET 方法
GET 方法 通过URL参数发送表单数据。如果没有指定method属性，默认使用这个方法。
使用GET方法的示例:
HTML
<form action="/search" method="get">
<label for="query">搜索:</label>
<input type="text" id="query" name="query" required>
<button id="submit" type="submit">搜索</button>
</form>
<script>
const searchField = document.getElementById("query");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (searchField.validity.valid) {
e.preventDefault();
alert(`你搜索了: ${searchField.value}`);
}
});
</script>
HTML
<form action="/search" method="get">
<label for="query">搜索:</label>
<input type="text" id="query" name="query">
<button type="submit">搜索</button>
</form>
GET 方法的特点
- 表单数据在URL中可见，因此不适合发送敏感信息
- 数据大小受到限制，因为URL有长度限制
- 数据可以很容易被缓存，书签也可以在浏览器中保存
POST 方法
POST 方法 将表单数据发送到HTTP请求体中。这个方法适合传输大量数据和敏感信息。
使用POST方法的示例:
HTML
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">提交</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert(`欢迎, ${userName.value}!`);
}
});
</script>
HTML
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">提交</button>
</form>
POST 方法的特点
- 表单数据在URL中不可见，适合发送敏感信息
- 没有数据大小限制，因为数据是在请求体中发送的
- 数据不会被缓存，也不会在浏览器的书签中保存
1.3 其他属性
enctype 属性
属性 enctype 用于指定在使用POST方法提交数据时的编码形式。最常用的值是 multipart/form-data，它用于文件上传。
使用enctype属性的示例:
HTML
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">上传文件:</label>
<input type="file" id="file" name="file">
<button type="submit">提交</button>
</form>
target 属性
属性 target 指定提交表单后服务器响应将显示的位置。可能的值有:
_self(默认): 在相同窗口或标签页_blank: 在新窗口或标签页_parent: 在父框架中_top: 在顶层框架中 (如果使用框架)
使用target属性的示例:
HTML
<form action="/submit" method="post" target="_blank">
<!-- 表单元素 -->
</form>
novalidate 属性
属性 novalidate 禁用浏览器内置的表单验证。
使用novalidate属性的示例:
HTML
<form action="/submit" method="post" novalidate>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">提交</button>
</form>
1.4 数据提交方式
表单的数据提交通过提交按钮来进行: <input type="submit"> 或 <button type="submit">。
当用户点击这个按钮时，浏览器会使用指定的方法和URL将表单数据发送到服务器。
这是提交表单数据的主要方式:
1. 提交按钮: 这是最常见的提交表单数据的方式。提交按钮可以通过 <input> 或 <button> 元素创建。
使用 <input> 的示例:
HTML
<input type="submit" value="提交">
使用 <button> 的示例:
HTML
<button type="submit">提交</button>
2. 回车键: 在表单的文本框中按下回车键也会触发表单提交。
3. JavaScript: 表单可以通过JavaScript程序化地提交。这在需要在提交数据之前执行额外验证或其他操作时很有用。
使用JavaScript提交表单的示例:
HTML
<form id="myForm" action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">提交</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert("登录成功!\n" + "\n" + `欢迎, ${userName.value}!`);
}
});
</script>
HTML
<form id="myForm" action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<br>
<button type="button" onclick="submitForm()">提交</button>
</form>
JavaScript
function submitForm() {
document.getElementById('myForm').submit();
}
GO TO FULL VERSION