写一个html页面,包括一个文本输入框用来输入手机号,一个按钮用来提交手机号,一个文本框用来输入短信验证码,一个按钮用来提交验证码
时间: 2023-03-13 20:48:28 浏览: 71
<html>
<body>
<form>
<input type="text" name="phoneNum" placeholder="请输入手机号"/>
<input type="button" value="提交手机号" onclick="submitPhoneNum()"/>
<input type="text" name="verifyCode" placeholder="请输入短信验证码"/>
<input type="button" value="提交验证码" onclick="submitVerifyCode()"/>
</form>
</body>
</html>
相关问题
写一个html页面,包括一个文本输入框用来输入手机号,一个按钮用来向active.php提交手机号,一个文本框用来输入短信验证码,一个按钮用来向reg.php提交验证码
<html>
<head>
<title>注册页面</title>
</head>
<body>
<form action="" method="post">
<div>
<label>请输入手机号:</label>
<input type="text" name="phone_number" />
</div>
<div>
<input type="submit" value="提交" name="submit_active" formaction="active.php" />
</div>
<div>
<label>请输入短信验证码:</label>
<input type="text" name="sms_code" />
</div>
<div>
<input type="submit" value="提交" name="submit_reg" formaction="reg.php" />
</div>
</form>
</body>
</html>
设计登录界面 ,基本要求 需要有用户输入账号的文本框、密码框和提交按钮,当输入正
确的账号和密码后,点击提交按钮可以跳转到主界面。同时,还需要有一些额外的功能和细节来提高用户体验,例如:
1. 在账号和密码输入框中添加占位符,提示用户应该输入什么内容;
2. 对于密码输入框,可以添加显示/隐藏密码的功能;
3. 对于提交按钮,可以添加鼠标悬停效果和点击效果,让用户更容易理解这个按钮的作用;
4. 如果用户输入了错误的账号或密码,应该给予相应的提示,告诉用户应该怎么做才能登录成功;
5. 如果用户忘记了密码,可以提供找回密码的链接或按钮,让用户通过邮箱或手机号码找回密码。
下面是一个简单的登录界面的示例代码,供参考:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style>
/* 样式代码 */
body {
font-family: Arial, sans-serif;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0069d9;
}
.error-message {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<form>
<label>账号:<input type="text" placeholder="请输入账号" name="username"></label>
<label>密码:<input type="password" placeholder="请输入密码" name="password"></label>
<input type="submit" value="登录">
<div class="error-message"></div>
</form>
<script>
// JavaScript 代码
var form = document.querySelector('form');
var errorMessage = document.querySelector('.error-message');
form.addEventListener('submit', function(event) {
event.preventDefault();
var username = form.elements.username.value.trim();
var password = form.elements.password.value.trim();
if (username === 'admin' && password === '123456') {
// 登录成功,跳转到主界面
window.location.href = 'main.html';
} else {
// 登录失败,显示错误信息
errorMessage.textContent = '账号或密码错误,请重新输入';
}
});
</script>
</body>
</html>
```