【前端寻宝之路】学习如何使用HTML实现简历展示和填写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简历填写与展示</title>
<style>
body { font-family: Arial, sans-serif; }
form { max-width: 600px; margin: 0 auto; }
fieldset { padding: 10px; border: 1px solid #ddd; }
legend { text-align: center; }
.info { margin: 10px 0; }
.info label { width: 100px; display: inline-block; }
.info input { width: 200px; }
.work { margin: 10px 0; }
.work textarea { width: 400px; height: 100px; }
.submit { text-align: center; }
</style>
</head>
<body>
<form id="resumeForm">
<fieldset>
<legend>个人信息</legend>
<div class="info">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
<label for="phone">联系电话:</label>
<input type="tel" id="phone" name="phone">
</div>
</fieldset>
<fieldset>
<legend>工作经验</legend>
<div class="work">
<label for="experience">工作描述:</label>
<textarea id="experience" name="experience"></textarea>
</div>
</fieldset>
<div class="submit">
<button type="submit">提交</button>
</div>
</form>
<script>
const resumeForm = document.getElementById('resumeForm');
resumeForm.onsubmit = function(event) {
event.preventDefault();
// 这里可以添加表单验证和数据处理逻辑
alert('简历已提交！');
};
</script>
</body>
</html>这段代码展示了如何使用HTML创建一个简历填写表单，并通过内嵌的<style>标签添加了基本的样式。表单数据提交时会被拦截，并且可以在JavaScript中添加更复杂的逻辑，比如表单验证和数据处理。这个简单的例子可以作为学习如何构建动态Web表单的起点。
评论已关闭