151 lines
6.9 KiB
HTML
151 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Multi-Step Form</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="script.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<div class="formContainer">
|
|
<div class="step-indicator">
|
|
<span class="active" id="indicator-step1">1</span>
|
|
<span id="indicator-step2">2</span>
|
|
<span id="indicator-step3">3</span>
|
|
</div>
|
|
<form id="multistepForm">
|
|
|
|
<div class="step" id="step1">
|
|
<h1>Personal Details</h1>
|
|
<label for="Fullname">Full Name</label>
|
|
<input type="text" id="Fullname" name="Fullname" required pattern="[a-zA-Z ]{3,}" title="Enter at least 3 letters">
|
|
<span class="error" id="error-fullname"></span>
|
|
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" required>
|
|
<span class="error" id="error-email"></span>
|
|
|
|
<label for="phone">Phone Number</label>
|
|
<input type="text" id="phone" name="phone" required pattern="\d{10}" title="Enter a 10-digit phone number">
|
|
<span class="error" id="error-phone"></span>
|
|
|
|
<label for="gender">Gender</label>
|
|
<div class="gender">
|
|
Male <input type="radio" id="Male" name="gender" value="Male" required>
|
|
Female <input type="radio" id="Female" name="gender" value="Female">
|
|
Other<input type="radio" id="Other" name="gender" value="Other">
|
|
</div>
|
|
<span class="error" id="error-gender"></span>
|
|
|
|
<label for="age">Age</label>
|
|
<input type="number" id="age" name="age" min="18" max="100" required>
|
|
<span class="error" id="error-age"></span>
|
|
|
|
<div class="form-navigation">
|
|
<button type="button" onclick="nextStep(2)">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step hidden" id="step2">
|
|
<h1>Professional Details</h1>
|
|
<label for="education">Education</label>
|
|
<select id="education" name="education" required>
|
|
<option value="B.tech">PG</option>
|
|
<option value="M.tech">UG</option>
|
|
<option value="BCA">Diploma</option>
|
|
<option value="MCA">12th</option>
|
|
<option value="B.com">10th</option>
|
|
|
|
</select>
|
|
<span class="error" id="error-education"></span>
|
|
|
|
<label for="skills">Skills</label>
|
|
<div class="skill">
|
|
<label>C <input type="checkbox" name="skills" value="C"></label>
|
|
<label>C++ <input type="checkbox" name="skills" value="C++"></label>
|
|
<label>Java <input type="checkbox" name="skills" value="Java"></label>
|
|
<label>Python <input type="checkbox" name="skills" value="Python"></label>
|
|
<label>Web Development <input type="checkbox" name="skills" value="Web Development"></label>
|
|
<label>App Development <input type="checkbox" name="skills" value="App Development"></label>
|
|
</div>
|
|
<span class="error" id="error-skills"></span>
|
|
|
|
<label for="experience">Experience (in years)</label>
|
|
<input type="number" id="experience" name="experience" min="0" max="50" required>
|
|
<span class="error" id="error-experience"></span>
|
|
|
|
<label for="currentrole">Current Role</label>
|
|
<input type="text" id="currentrole" name="currentrole" required>
|
|
<span class="error" id="error-currentrole"></span>
|
|
|
|
<div class="form-navigation">
|
|
<button type="button" onclick="nextStep(1)">Back</button>
|
|
<button type="button" onclick="nextStep(3)">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="step hidden" id="step3">
|
|
<h1>Review & Submit</h1>
|
|
<div id="review">
|
|
<table>
|
|
<tr>
|
|
<td><strong>Full Name:</strong></td>
|
|
<td><span id="reviewFullName"></span></td>
|
|
<td><button type="button" onclick="editStep('step1')">Edit</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><storng>Email: </storng></td>
|
|
<td><span id="reviewEmail"></span></td>
|
|
<td><button type="button" onclick="editStep('step1')">Edit</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><storng>Phone Number: </storng></td>
|
|
<td><span id="reviewPhone"></span></td>
|
|
<td><button type="button" onclick="editStep('step1')">Edit</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><storng>Gender: </storng></td>
|
|
<td><span id="reviewGender"></span></td>
|
|
<td><button type="button" onclick="editStep('step1')">Edit</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><storng>Age: </storng></td>
|
|
<td><span id="reviewAge"></span></td>
|
|
<td><button type="button" onclick="editStep('step1')">Edit</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><storng>Education: </storng></td>
|
|
<td><span id="reviewEducation"></span></td>
|
|
<td><button type="button" onclick="editStep('step2')">Edit</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><storng>Skills: </storng></td>
|
|
<td><span id="reviewSkills"></span></td>
|
|
<td><button type="button" onclick="editStep('step2')">Edit</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><storng>Experience: </storng></td>
|
|
<td><span id="reviewExperience"></span></td>
|
|
<td><button type="button" onclick="editStep('step2')">Edit</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><storng>Current Role: </storng></td>
|
|
<td><span id="reviewCurrentRole"></span></td>
|
|
<td><button type="button" onclick="editStep('step2')">Edit</button></td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
<div class="form-navigation">
|
|
<button type="button" id="clearButton" onclick="clearform() ">Clear</button>
|
|
<button type="submit">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|