制作一个用户注册 form 表单(至少应该包含用户名、密码、地区和相关按钮),取消默认的 submit 操作(我们后期准备用 ajax 来提交操作)
时间: 2024-01-14 13:04:37 浏览: 33
好的,下面是一个简单的用户注册表单,包括用户名、密码、地区和注册按钮,并且取消了默认的提交操作:
```html
<form id="registerForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<label for="location">地区:</label>
<select id="location" name="location">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<button type="button" id="registerBtn">注册</button>
</form>
<script>
// 取消默认的提交操作
document.getElementById("registerForm").addEventListener("submit", function(event) {
event.preventDefault();
});
// 绑定注册按钮的点击事件
document.getElementById("registerBtn").addEventListener("click", function() {
// TODO: 使用 AJAX 提交表单数据
});
</script>
```
在这个表单中,我们使用了 `label` 元素来标记每个表单控件,这可以提高表单的可用性。同时,我们使用了 `required` 属性来指定必填项,这可以在用户未填写必填项时阻止表单提交,并在表单控件周围自动显示一个红色的提示框。
在 JavaScript 代码中,我们使用了 `preventDefault()` 方法来取消默认的提交操作。然后,我们绑定了注册按钮的点击事件,以便在用户点击按钮时使用 AJAX 提交表单数据。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)