html手机验证码登录页面
时间: 2023-07-25 21:18:35 浏览: 398
以下是一个简单的 HTML 手机验证码登录页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>手机验证码登录</title>
</head>
<body>
<h1>手机验证码登录</h1>
<form action="" method="post">
<label for="phone">手机号码:</label>
<input type="tel" id="phone" name="phone" placeholder="请输入手机号码" required><br><br>
<label for="code">验证码:</label>
<input type="text" id="code" name="code" placeholder="请输入验证码" required>
<button type="button" id="send-code">发送验证码</button><br><br>
<input type="submit" value="登录">
</form>
<script>
// 模拟发送验证码的函数
function sendCode() {
alert('验证码已发送,请注意查收!');
}
document.getElementById('send-code').addEventListener('click', sendCode);
</script>
</body>
</html>
```
该页面包含一个表单,其中包含一个用于输入手机号码的输入框和一个用于输入验证码的输入框,以及一个用于发送验证码的按钮和一个用于提交表单的按钮。在 JavaScript 中,我们可以定义一个函数来模拟发送验证码的过程,并将其与发送验证码的按钮相关联。