【前端寻宝之路】学习如何使用HTML实现简历展示和填写

这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。




<!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表单的起点。

【前端寻宝之路】学习如何使用HTML实现简历展示和填写

评论已关闭

推荐阅读