创建一个基础表单,要求包括姓名、学号、密码确认、确认提交基础控件,完成密码确认
时间: 2023-08-21 18:07:58 浏览: 98
好的,以下是一个基础的表单代码,包括姓名、学号、密码确认和确认提交按钮,同时也完成了密码确认的功能:
```html
<form action="#" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="student_id">学号:</label>
<input type="text" id="student_id" name="student_id" required><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="confirm_password">确认密码:</label>
<input type="password" id="confirm_password" name="confirm_password" required oninput="check(this)"><br><br>
<input type="submit" value="确认提交">
</form>
<script>
function check(input) {
if (input.value != document.getElementById('password').value) {
input.setCustomValidity('两次输入的密码不一致!');
} else {
input.setCustomValidity('');
}
}
</script>
```
其中,`required`属性可以让表单输入框变为必填项,`oninput`属性可以让确认密码输入框在用户输入时实时检查两次密码是否一致。当两次密码不一致时,`setCustomValidity`方法会设置一个自定义的错误信息,提示用户重新输入密码。
阅读全文