1.创建一个名称类似“文立斌C.html”的文档,将网页的标题设置为类似“文立斌C”,然后将该文档保存在“你的文件夹”内 2.参照所提供的代码片段,使用表单及其控件标签以及其他必要的标签,实现信用卡申请册页面,要求页面中至少包含如下控件: 内容 类型 要求 登录账户 text 6位数字 昵称 text 可不填写 性别 radio 单选按钮 登录密码 password 长度大于6位,且必须含有字母、数字 确认密码 password 输入后立即确认是否与前面的登录密码相同并提示 职业 select 列表中至少含有6种以上职业 身份证号 text 用正则表达式检验合法性 手机号码 text 用正则表达式检验合法性 Emil text 用正则表达式检验合法性 照片 image 检验是否.jpg或.png文件,且大小不能超过2MB 月收入 text 少于2000时提示不能申请信用卡 验证码 text 自动生成4位字母或6位数字验证码,并检验用户输入 已阅读相关条款 checkbox 提交数据前必须勾选本项 3.页面尽量美观一点,完成后浏览测试,完成实验
时间: 2024-02-16 16:01:43 浏览: 219
计算机网络教程:自顶向下方法-中文版1
由于我无法在这里创建文件,我提供以下代码作为参考,你可以将其复制到你的文本编辑器中,然后将文件保存为“文立斌C.html”并放入你的文件夹中:
```html
<!DOCTYPE html>
<html>
<head>
<title>文立斌C</title>
<style>
label {
display: block;
margin-top: 10px;
}
input, select {
width: 200px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
}
input[type="radio"] {
width: auto;
margin-right: 10px;
}
input[type="checkbox"] {
width: auto;
margin-left: 10px;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #007bff;
border: none;
color: #fff;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
.error {
color: red;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>信用卡申请表</h1>
<form method="post" enctype="multipart/form-data">
<label for="account">登录账户:</label>
<input type="text" id="account" name="account" pattern="\d{6}" required>
<label for="nickname">昵称:</label>
<input type="text" id="nickname" name="nickname">
<label>性别:</label>
<label for="male">
<input type="radio" id="male" name="gender" value="male" checked>
男
</label>
<label for="female">
<input type="radio" id="female" name="gender" value="female">
女
</label>
<label for="password">登录密码:</label>
<input type="password" id="password" name="password" minlength="6" pattern="(?=.*\d)(?=.*[a-zA-Z])\S+" required>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password" minlength="6" pattern="(?=.*\d)(?=.*[a-zA-Z])\S+" required oninput="checkPassword()">
<span id="password-error" class="error"></span>
<label for="occupation">职业:</label>
<select id="occupation" name="occupation">
<option value="">请选择职业</option>
<option value="student">学生</option>
<option value="office worker">上班族</option>
<option value="entrepreneur">创业者</option>
<option value="freelancer">自由职业者</option>
<option value="others">其他</option>
</select>
<label for="id-card">身份证号:</label>
<input type="text" id="id-card" name="id-card" pattern="\d{18}" required>
<label for="phone">手机号码:</label>
<input type="text" id="phone" name="phone" pattern="^1[3-9]\d{9}$" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="photo">照片(不超过2MB):</label>
<input type="file" id="photo" name="photo" accept="image/png, image/jpeg" required>
<label for="income">月收入:</label>
<input type="number" id="income" name="income" min="0" step="100" required>
<label for="captcha">验证码:</label>
<input type="text" id="captcha" name="captcha" pattern="[a-zA-Z0-9]{4,6}" required>
<img src="" id="captcha-img">
<button type="submit" id="submit-btn" disabled>提交申请</button>
<label for="agree">
<input type="checkbox" id="agree" name="agree" required>
已阅读并同意相关条款
</label>
</form>
<script>
// 生成随机验证码
function generateCaptcha() {
var captcha = "";
var charPool = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 4; i++) {
captcha += charPool.charAt(Math.floor(Math.random() * charPool.length));
}
return captcha;
}
// 更新验证码图片
function updateCaptcha() {
var captchaImg = document.getElementById("captcha-img");
var captcha = generateCaptcha();
captchaImg.src = "https://dummyimage.com/100x50/000/fff&text=" + captcha;
return captcha;
}
// 检查密码是否一致
function checkPassword() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirm-password").value;
var passwordError = document.getElementById("password-error");
if (password !== confirmPassword) {
passwordError.textContent = "确认密码与登录密码不一致";
document.getElementById("submit-btn").disabled = true;
} else {
passwordError.textContent = "";
document.getElementById("submit-btn").disabled = false;
}
}
// 检查月收入是否符合要求
function checkIncome() {
var income = document.getElementById("income").value;
var incomeError = document.getElementById("income-error");
if (income < 2000) {
incomeError.textContent = "月收入不足,无法申请信用卡";
document.getElementById("submit-btn").disabled = true;
} else {
incomeError.textContent = "";
document.getElementById("submit-btn").disabled = false;
}
}
// 检查验证码是否正确
function checkCaptcha() {
var captcha = document.getElementById("captcha").value;
var captchaError = document.getElementById("captcha-error");
if (captcha !== currentCaptcha) {
captchaError.textContent = "验证码不正确";
document.getElementById("submit-btn").disabled = true;
} else {
captchaError.textContent = "";
document.getElementById("submit-btn").disabled = false;
}
}
var currentCaptcha = updateCaptcha();
document.getElementById("captcha-img").addEventListener("click", function() {
currentCaptcha = updateCaptcha();
});
document.getElementById("confirm-password").addEventListener("input", checkPassword);
document.getElementById("income").addEventListener("input", checkIncome);
document.getElementById("captcha").addEventListener("input", checkCaptcha);
</script>
</body>
</html>
```
注意,由于该代码使用了JavaScript生成随机验证码和检查密码、月收入、验证码等信息的功能,因此需要在浏览器中运行才能看到完整效果。你可以将代码保存到本地并在浏览器中打开以进行测试。
阅读全文