170 lines
5.3 KiB
HTML
170 lines
5.3 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 justify-center items-center">
|
||
|
|
<div class="px-12 py-10 bg-gray-100 w-[70vw]">
|
||
|
|
<form
|
||
|
|
action="index.php"
|
||
|
|
method="post"
|
||
|
|
id="personal-details-form"
|
||
|
|
class="flex justify-center"
|
||
|
|
>
|
||
|
|
<section data-form="0" class="active none flex-col items-start">
|
||
|
|
<h3 class="text-xl font-bold">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
|
||
|
|
minlength="3"
|
||
|
|
pattern="^[A-Za-z]+(?: [A-Za-z]+)*$"
|
||
|
|
class="rounded p-1"
|
||
|
|
/>
|
||
|
|
<label for="" class="text-lg">Email</label>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
name="email"
|
||
|
|
id="email"
|
||
|
|
class="rounded p-1"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<label for="" class="text-lg">Phone</label>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
name="phone"
|
||
|
|
id="phone"
|
||
|
|
class="rounded p-1"
|
||
|
|
minlength="10"
|
||
|
|
maxlength="10"
|
||
|
|
pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<p class="text-lg">Gender</p>
|
||
|
|
<input
|
||
|
|
type="radio"
|
||
|
|
name="gender"
|
||
|
|
value="male"
|
||
|
|
class="rounded p-1"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<label for="" class="text-lg">Male</label>
|
||
|
|
<input
|
||
|
|
type="radio"
|
||
|
|
name="gender"
|
||
|
|
value="female"
|
||
|
|
class="rounded p-1"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<label for="" class="text-lg">Female</label>
|
||
|
|
<input
|
||
|
|
type="radio"
|
||
|
|
name="gender"
|
||
|
|
value="others"
|
||
|
|
class="rounded p-1"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<label for="" class="text-lg">Others</label>
|
||
|
|
</div>
|
||
|
|
<label for="" class="text-lg">Age</label>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
name="age"
|
||
|
|
id="age"
|
||
|
|
class="rounded p-1"
|
||
|
|
pattern="^(1[89]|[2-9][0-9]|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="mean" id="mean" />
|
||
|
|
<label for="mean">MEAN</label>
|
||
|
|
<input type="checkbox" name="mern" id="mern" />
|
||
|
|
<label for="mern">MERN</label>
|
||
|
|
<input type="checkbox" name="java" id="java" />
|
||
|
|
<label for="java">Java</label>
|
||
|
|
<input type="checkbox" name="flutter" id="flutter" />
|
||
|
|
<label for="flutter">Flutter</label>
|
||
|
|
<input type="checkbox" name="dotnet" id="dotnet" />
|
||
|
|
<label for="dotnet">.Net</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<label class="text-lg" for="experience">Experience</label>
|
||
|
|
<input
|
||
|
|
class="rounded p-1"
|
||
|
|
type="number"
|
||
|
|
name="experience"
|
||
|
|
id="experience"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<label class="text-lg" for="current-role">Current Role</label>
|
||
|
|
<input
|
||
|
|
class="rounded p-1"
|
||
|
|
type="text"
|
||
|
|
name="current-role"
|
||
|
|
id="current-role"
|
||
|
|
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">
|
||
|
|
<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>
|