【前端】HTML实现个人简历信息填写页面 - IT评测·应用市场-qidao123.com

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历信息填写页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>个人简历信息填写</h1>
<form id="resumeForm" action="#" method="POST">
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required><br>
<label for="phone">电话号码:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{11}" required><br>
</fieldset>
<fieldset>
<legend>教育背景</legend>
<label for="school">学校名称:</label>
<input type="text" id="school" name="school" required><br>
<label for="major">专业:</label>
<input type="text" id="major" name="major" required><br>
<label for="degree">学历:</label>
<select id="degree" name="degree" required>
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
</fieldset>
<fieldset>
<legend>工作经验</legend>
<label for="company">公司名称:</label>
<input type="text" id="company" name="company"><br>
<label for="position">职位:</label>
<input type="text" id="position" name="position"><br>
<label for="description">工作描述:</label>
<textarea id="description" name="description" rows="4" cols="50"></textarea><br>
</fieldset>
<fieldset>
<legend>技能</legend>
<div id="skillsContainer">
<label for="skill">技能:</label>
<input type="text" id="skill" name="skill[]"><br>
</div>
<button type="button" id="addSkill">添加技能</button><br>
</fieldset>
<button type="submit">提交简历</button>
</form>
</div>
<script src="scripts.js"></script>
</body>
</html>

复制代码

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 30px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
fieldset {
border: 1px solid #ccc;
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
}
legend {
font-weight: bold;
color: #007BFF;
}
label {
margin: 10px 0 5px;
font-weight: bold;
}
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #0056b3;
}

复制代码

document.getElementById('addSkill').addEventListener('click', function() {
const skillsContainer = document.getElementById('skillsContainer');
const newSkill = document.createElement('input');
newSkill.setAttribute('type', 'text');
newSkill.setAttribute('name', 'skill[]');
newSkill.setAttribute('placeholder', '请输入技能');
skillsContainer.appendChild(newSkill);
skillsContainer.appendChild(document.createElement('br'));
});
document.getElementById('resumeForm').addEventListener('submit', function(event) {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
// 简单的输入验证
if (name === "" || email === "" || phone === "") {
alert("请填写所有必填项！");
event.preventDefault();
} else {
alert("简历已提交！");
}
});

复制代码