In today's job search process, a resume is one of the most important carriers for job seekers to show their skills and experience to the recruiter. With the development of the Internet, more and more resumes are submitted online. Therefore, as a front-end developer, it is a very useful skill to know how to design a simple, beautiful and fully functional resume information filling page.
This article will introduce in detail how to use HTML, CSS and JavaScript to build a resume information filling page, leading you to complete the entire process from basic form structure to style beautification to data verification step by step. We will show how to implement various parts of a resume page through HTML, such as personal information, educational background, work experience and skills.
1. Page effect display
Before we start implementing, we can first understand the final page effect. We will implement a resume filling page where users can fill in the following content:
- Personal information: name, email, phone number
- Educational background: school name, major, education
- Work experience: company name, position, job description
- Skills: Personal skills (multiple skills can be added)
- Submit Button
The final page will be verified through JavaScript to ensure that the resume information entered by the user complies with the basic specifications.
2. HTML structure design
First, we need to define the basic HTML structure of the resume page. We will use form elements<form>To include all input areas and display each part separately for easy filling of the user. Here is the basic HTML code:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal resume information filling page</title>
<link rel="stylesheet" href="" rel="external nofollow" >
</head>
<body>
<div class="container">
<h1>Fill in your resume information</h1>
<form action="#" method="POST">
<!-- Personal information part -->
<fieldset>
<legend>personal information</legend>
<label for="name">Name:</label>
<input type="text" name="name" required><br>
<label for="email">Mail:</label>
<input type="email" name="email" required><br>
<label for="phone">telephone number:</label>
<input type="tel" name="phone" pattern="[0-9]{11}" required><br>
</fieldset>
<!-- Educational background part -->
<fieldset>
<legend>Educational background</legend>
<label for="school">School name:</label>
<input type="text" name="school" required><br>
<label for="major">major:</label>
<input type="text" name="major" required><br>
<label for="degree">Education:</label>
<select name="degree" required>
<option value="Undergraduate">Undergraduate degree</option>
<option value="master">master</option>
<option value="PhD">PhD</option>
</select>
</fieldset>
<!-- Work experience part -->
<fieldset>
<legend>Work experience</legend>
<label for="company">Company Name:</label>
<input type="text" name="company"><br>
<label for="position">Position:</label>
<input type="text" name="position"><br>
<label for="description">Job Description:</label>
<textarea name="description" rows="4" cols="50"></textarea><br>
</fieldset>
<!-- Skills section -->
<fieldset>
<legend>Skill</legend>
<div >
<label for="skill">Skill:</label>
<input type="text" name="skill[]"><br>
</div>
<button type="button" >添加Skill</button><br>
</fieldset>
<!-- Submit Button -->
<button type="submit">Submit resume</button>
</form>
</div>
<script src=""></script>
</body>
</html>
Code parsing:
-
Form structure: We divide the structure of the entire resume page into several parts, using
<fieldset>Tags separate each part, each part has one<legend>Tags as title. -
Input controls: For example, name, email, phone number and other information have been used
<input>, the work description was used<textarea>, Educational qualifications in educational background have been selected.<select>Label. - Skill input: The skill section can dynamically add multiple skills, there is a skill input box in the initial state, and more skill input boxes are dynamically added through JavaScript.
3. CSS style beautification
In order to make the resume page more beautiful, we need to add CSS style to the page. Below is the style fileCode:
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;
}
Style analysis:
-
Page layout:pass
.containerThe class centers the entire form and sets a fixed width and inner margin to enhance readability. -
Form Elements:right
<input>、<textarea>The input box is set to a unified style to make it more visually beautiful. - Button style: The style of the submit button sets the background color, text color and mouse hover effect to improve the user experience.
4. JavaScript implements dynamic functions
In the resume filling page, the skill section can be added dynamically. We will use JavaScript to implement the ability to add more skill input boxes and verify the data when the user submits the form. The following isCode:
('addSkill').addEventListener('click', function() {
const skillsContainer = ('skillsContainer');
const newSkill = ('input');
('type', 'text');
('name', 'skill[]');
('placeholder', 'Please enter skills');
(newSkill);
(('br'));
});
('resumeForm').addEventListener('submit', function(event) {
const name = ('name').value;
const email = ('email').value;
const phone = ('phone').value;
// Simple input verification if (name === "" || email === "" || phone === "") {
alert("Please fill in all required items!");
();
} else {
alert("Resume submitted!");
}
});
Functional analysis:
- Add skills: Dynamically add a new skill input box to the page by listening to the click event of the "Add Skill" button.
- Form Verification: When a user submits a form, check whether the required items such as name, email, and phone number are empty. If it is empty, the form is blocked and the user is prompted.
5. Summary
Through the above content, we have completed a complete functional resume information filling page. From HTML structure, CSS style beautification to JavaScript dynamic functions and verification, we provide users with a simple and easy-to-use resume filling interface.