Basic structure html and form navigation
This commit is contained in:
parent
3bc98247ea
commit
61d98e07d1
169
index.html
Normal file
169
index.html
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<!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>
|
||||
56
script.js
Normal file
56
script.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
// const form = document.getElementById("personal-details-form"); // Main form element
|
||||
|
||||
// const inputs = form.getElementsByTagName("input"); // All the input elements in the form
|
||||
|
||||
// var currentForm = form.querySelectorAll("[data-form]") // Get the current form selected
|
||||
|
||||
// var currentStep = parseInt(currentForm[0].getAttribute("data-form")); // Get the current step
|
||||
// console.log(currentForm[0].getAttribute("data-form"));
|
||||
|
||||
// function incrementStep() {
|
||||
// // Check if current form is filled
|
||||
// console.log(currentForm);
|
||||
|
||||
// currentForm[currentStep].classList.remove("active");
|
||||
// currentStep++;
|
||||
// currentForm[currentStep].classList.add("active");
|
||||
// console.log(currentForm[currentStep].getAttribute("data-form"));
|
||||
// }
|
||||
|
||||
// function decrementStep() {
|
||||
// currentForm[currentStep].classList.remove("active");
|
||||
// currentStep--;
|
||||
// currentForm[currentStep].classList.add("active");
|
||||
// console.log(currentForm[currentStep].getAttribute("data-form"));
|
||||
// }
|
||||
|
||||
const forms = document.querySelectorAll("[data-form]");
|
||||
var currentStep = 0;
|
||||
var currentForm = forms[currentStep];
|
||||
|
||||
function incrementStep() {
|
||||
// Check if current form is filled
|
||||
|
||||
let inputs = currentForm.getElementsByTagName("input");
|
||||
for (const input of inputs) {
|
||||
if (!input.checkValidity()) {
|
||||
input.reportValidity();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Changing the visiblity of the form
|
||||
currentForm.classList.remove("active");
|
||||
currentStep++;
|
||||
currentForm = forms[currentStep];
|
||||
currentForm.classList.add("active");
|
||||
}
|
||||
|
||||
function decrementStep() {
|
||||
// Changing the visiblity of the form
|
||||
|
||||
currentForm.classList.remove("active");
|
||||
currentStep--;
|
||||
currentForm = forms[currentStep];
|
||||
currentForm.classList.add("active");
|
||||
}
|
||||
Loading…
Reference in a new issue