用html代码 做一份相亲择偶信息登记表,要求元素:姓名,年龄账号,密码,手机,邮箱,生日,照片,性别,爱好 要求: 所有的框里有提示词 账号,密码,手机限定长度 性别单选 照片加上图片格式限定 爱好多选
时间: 2024-09-25 21:05:13 浏览: 41
要创建一个HTML相亲择偶信息登记表,可以按照以下结构编写,并包含所需的元素和限制:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>相亲信息登记表</title>
<style>
.form-group {
margin-bottom: 15px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px 20px;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=number] {
text-align: right;
}
input[type=password] {
margin-right: 5px;
}
label {
display: block;
font-weight: bold;
}
</style>
</head>
<body>
<h1>相亲信息登记表</h1>
<form id="registrationForm">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" id="name" placeholder="请输入您的姓名">
</div>
<div class="form-group">
<label for="age">年龄:</label>
<input type="number" id="age" min="18" max="99" placeholder="请输入您的年龄 (18-99)">
</div>
<div class="form-group">
<label for="account">账号:</label>
<input type="email" id="account" pattern=".+@.+\..+" placeholder="请输入有效的电子邮件地址">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" minlength="6" placeholder="请输入6位以上密码">
</div>
<div class="form-group">
<label for="phone">手机:</label>
<input type="tel" id="phone" pattern="\d{11}" placeholder="请输入11位手机号码">
</div>
<div class="form-group">
<label for="birthday">生日:</label>
<input type="date" id="birthday" placeholder="请选择您的出生日期">
</div>
<div class="form-group">
<label for="photo">头像:</label>
<input type="file" accept="image/*" id="photo" placeholder="上传jpg、png格式的照片">
</div>
<div class="form-group">
<label for="gender">性别:</label>
<select id="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<div class="form-group">
<label for="hobbies">爱好:</label>
<input type="checkbox" name="hobbies[]" value="reading"> 阅读<br>
<input type="checkbox" name="hobbies[]" value="music"> 音乐<br>
<input type="checkbox" name="hobbies[]" value="sports"> 运动<br>
<!-- 更多选项... -->
</div>
<button type="submit">提交</button>
</form>
<script>
// 表单验证与处理逻辑(这里仅作示例,实际应用需结合后端服务)
</script>
</body>
</html>
```