182 lines
6.2 KiB
HTML
182 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>DML</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<script src="script.js" defer></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="h-screen bg-gray-500 flex flex-col justify-center items-center">
|
|
<h1 class="text-4xl font-bold mb-6">Multi-Step Form Wizard</h1>
|
|
<div class="px-12 py-10 bg-gray-100 w-[70vw]">
|
|
<form action="" id="personal-details-form" class="flex justify-center">
|
|
<section data-form="0" class="active none flex-col items-start">
|
|
<h3 class="text-2xl font-bold mb-4">Step 1: Personal Details</h3>
|
|
|
|
<label for="full_name" class="text-lg">Full Name</label>
|
|
<input
|
|
type="text"
|
|
name="full_name"
|
|
id="full_name"
|
|
required
|
|
class="rounded p-1"
|
|
/>
|
|
<label for="email" class="text-lg">Email</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
id="email"
|
|
class="rounded p-1"
|
|
required
|
|
/>
|
|
<label for="phone" class="text-lg">Phone</label>
|
|
<input
|
|
type="tel"
|
|
name="phone"
|
|
id="phone"
|
|
class="rounded p-1"
|
|
minlength="10"
|
|
maxlength="10"
|
|
pattern="[0-9]{10}"
|
|
required
|
|
/>
|
|
<div>
|
|
<p class="text-lg">Gender</p>
|
|
<input
|
|
type="radio"
|
|
name="gender"
|
|
value="male"
|
|
class="rounded p-1"
|
|
id="male"
|
|
required
|
|
/>
|
|
<label for="male" class="text-lg">Male</label>
|
|
<input
|
|
type="radio"
|
|
name="gender"
|
|
value="female"
|
|
class="rounded p-1"
|
|
id="female"
|
|
required
|
|
/>
|
|
<label for="female" class="text-lg">Female</label>
|
|
<input
|
|
type="radio"
|
|
name="gender"
|
|
value="others"
|
|
class="rounded p-1"
|
|
required
|
|
/>
|
|
<label for="others" class="text-lg">Others</label>
|
|
</div>
|
|
<label for="age" class="text-lg">Age</label>
|
|
<input
|
|
type="number"
|
|
name="age"
|
|
id="age"
|
|
class="rounded p-1"
|
|
min="18"
|
|
max="100"
|
|
required
|
|
/>
|
|
<button
|
|
type="button"
|
|
onclick="incrementStep()"
|
|
class="mt-3 py-1 px-4 bg-green-500 rounded"
|
|
>
|
|
Next
|
|
</button>
|
|
</section>
|
|
<section data-form="1" class="none flex-col items-start">
|
|
<h3 class="text-xl font-bold">Step 2: Professional Details</h3>
|
|
<label class="text-lg" for="education">Education</label>
|
|
<select name="education" id="education" required>
|
|
<option value="none">Select Education</option>
|
|
<option value="graduation">Graduation</option>
|
|
<option value="post-graduation">Post Graduation</option>
|
|
<option value="phd">PHD</option>
|
|
</select>
|
|
<div>
|
|
<label class="text-lg">Skills:</label>
|
|
<div>
|
|
<input type="checkbox" name="skills" id="mean" />
|
|
<label for="mean">MEAN</label>
|
|
<input type="checkbox" name="skills" id="mern" />
|
|
<label for="mern">MERN</label>
|
|
<input type="checkbox" name="skills" id="java" />
|
|
<label for="java">Java</label>
|
|
<input type="checkbox" name="skills" id="flutter" />
|
|
<label for="flutter">Flutter</label>
|
|
<input type="checkbox" name="skills" id="dotnet" />
|
|
<label for="dotnet">.Net</label>
|
|
</div>
|
|
</div>
|
|
<label class="text-lg" for="experience">Experience (in years)</label>
|
|
<input
|
|
class="rounded p-1"
|
|
type="number"
|
|
name="experience"
|
|
id="experience"
|
|
min="0"
|
|
max="50"
|
|
required
|
|
/>
|
|
<label class="text-lg" for="current-role">Current Role</label>
|
|
<input
|
|
class="rounded p-1"
|
|
type="text"
|
|
name="current-role"
|
|
id="current-role"
|
|
pattern="^[A-Za-z]+(?: [A-Za-z]+)*$"
|
|
required
|
|
/>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
onclick="decrementStep()"
|
|
class="mt-3 py-1 px-4 bg-red-500 rounded"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onclick="incrementStep()"
|
|
class="mt-3 py-1 px-4 bg-green-500 rounded"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<section data-form="2" class="none flex-col items-start">
|
|
<h3 class="text-xl font-bold">Step 3: Review & Submit</h3>
|
|
<div>
|
|
<p class="text-lg">Full Name: <span id="full-name-review"></span></p>
|
|
<p class="text-lg">Email: <span id="email-review"></span></p>
|
|
<p class="text-lg">Phone: <span id="phone-review"></span></p>
|
|
<p class="text-lg">Gender: <span id="gender-review"></span></p>
|
|
<p class="text-lg">Age: <span id="age-review"></span></p>
|
|
<p class="text-lg">Education: <span id="education-review"></span></p>
|
|
<p class="text-lg">Skills: <span id="skills-review"></span></p>
|
|
<p class="text-lg">Experience: <span id="experience-review"></span></p>
|
|
<p class="text-lg">Current Role: <span id="role-review"></span></p>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
onclick="decrementStep()"
|
|
class="mt-3 py-1 px-4 bg-red-500 rounded"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button type="submit" class="mt-3 py-1 px-4 bg-green-500 rounded">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|