102 lines
4 KiB
HTML
102 lines
4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Form Navigation</title>
|
|
<link rel="stylesheet" type="text/css" href="styles.css" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- Personal Details form -->
|
|
|
|
<form id="personalDetailsForm">
|
|
<h2>Personal Details Form</h2>
|
|
<label for="fullName">Full Name:</label>
|
|
<input type="text" id="fullName" name="fullName" required />
|
|
<small class="error-message" id="nameError"></small>
|
|
|
|
<label for="email">Email:</label>
|
|
<input type="email" id="email" name="email" required />
|
|
<small class="error-message" id="emailError"></small>
|
|
|
|
<label for="phone">Phone:</label>
|
|
<input type="number" id="phone" name="phone" required />
|
|
<small class="error-message" id="phoneError"></small>
|
|
|
|
<label>Gender:</label>
|
|
<div class="radio-group">
|
|
<input type="radio" id="male" name="gender" value="male" required /> Male
|
|
<input type="radio" id="female" name="gender" value="female" /> Female
|
|
<input type="radio" id="other" name="gender" value="other" /> Other
|
|
</div>
|
|
<small class="error-message" id="genderError"></small>
|
|
|
|
<label for="age">Age:</label>
|
|
<input type="number" id="age" name="age" required />
|
|
<small class="error-message" id="ageError"></small>
|
|
<div class="container">
|
|
<button type="submit">Next</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Professional Details -->
|
|
|
|
<form id="professionalDetailsForm" style="display: none">
|
|
<h2>Professional Details Form</h2>
|
|
<label for="education">Education:</label>
|
|
<select id="education" name="education" required>
|
|
<option value="" disabled selected>Select your education</option>
|
|
<option value="high_school">High School</option>
|
|
<option value="bachelors">Bachelor's</option>
|
|
<option value="masters">Master's</option>
|
|
<option value="phd">Ph.D</option>
|
|
</select>
|
|
<small class="error-message" id="educationError"></small>
|
|
|
|
<label>Skills:</label>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="skill1" name="skills" value="html" /> HTML<br />
|
|
<input type="checkbox" id="skill2" name="skills" value="css" /> CSS<br />
|
|
<input type="checkbox" id="skill3" name="skills" value="javascript" /> JavaScript<br />
|
|
<input type="checkbox" id="skill4" name="skills" value="react" /> React<br />
|
|
<input type="checkbox" id="skill5" name="skills" value="nodejs" /> Node.js
|
|
</div>
|
|
<small class="error-message" id="skillsError"></small>
|
|
|
|
<label for="experience">Experience (in years):</label>
|
|
<input type="number" id="experience" name="experience" min="0" max="50" required />
|
|
<small class="error-message" id="experienceError"></small>
|
|
|
|
<label for="currentRole">Current Role:</label>
|
|
<input type="text" id="currentRole" name="currentRole" required />
|
|
<small class="error-message" id="roleError"></small>
|
|
<div class="container">
|
|
<button type="button" id="prevButton">Prev</button>
|
|
<button type="submit">Next</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Summary Section -->
|
|
<div id="summary" style="display: none;">
|
|
<h3>Summary Section</h3>
|
|
<div id="personalSummary"></div>
|
|
<button id="editPersonalDetails">Edit Personal Details</button>
|
|
|
|
<div id="professionalSummary"></div>
|
|
<button id="editProfessionalDetails">Edit Professional Details</button>
|
|
|
|
<button id="finalSubmit">Submit</button>
|
|
</div>
|
|
|
|
<!-- Success Message -->
|
|
<div id="successMessage" style="display: none">
|
|
<h2>Form Submitted Successfully!</h2>
|
|
</div>
|
|
|
|
<script src="scripts.js"></script>
|
|
</body>
|
|
</html>
|