jaanvi/Multi-Step-Form_Task2
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update index.html

Browse source
This commit is contained in:
jaanvi 2024-12-26 12:56:45 +00:00
parent 5625e0b9db
commit de07f2517b
1 changed files with 109 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
index.html
View file

@ -9,26 +9,26 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<form id="form1" > <form id="form1" class="multi-step-form">
<h3>PERSONAL DETAILS</h3> <h3>PERSONAL DETAILS</h3>
<input type="text" id="full name" placeholder="Full Name" required> <input type="text" id="fullName" placeholder="Full Name" required>
<span class="error-message" id="fullName-error"></span> <span class="error-message" id="fullName-error"></span>
<input type="email" id="email" placeholder="Email" required> <input type="email" id="email" placeholder="Email" required>
<span class="error-message" id="email-error"></span> <span class="error-message" id="email-error"></span>
<input type="tel" id="phone" placeholder="Phone No" required pattern="\d{10}"> <input type="tel" id="phone" placeholder="Phone No" required pattern="\d{10}">
<span class="error-message" id="phone-error"></span> <span class="error-message" id="phone-error"></span>
<input type="number" placeholder="Age" name="age" min="18" max="100"> <input type="number" id="age" name="age" placeholder="Age" min="18" max="100" required>
<span class="error-message" id="age-error"></span> <span class="error-message" id="age-error"></span>
<label >Gender</label> <label >Gender</label>
<label class="radio-inline"> <label class="radio-inline">
<input type="radio" name="Male" checked>Male <input type="radio" name="gender" value="male" required> Male
</label> </label>
<label class="radio-inline"> <label class="radio-inline">
<input type="radio" name="Female"> Female <input type="radio" name="gender" value="Female" required> Female
</label> </label>
<label class="radio-inline"> <label class="radio-inline">
<input type="radio" name="Other">Other <input type="radio" name="gender" value="Other">Other
</label> </label>
<span class="error-message" id="gender-error"></span> <span class="error-message" id="gender-error"></span>
@ -69,7 +69,7 @@
<input type="number" id="experience" name="experience" min="0" max="50" placeholder=" years..." required></label> <input type="number" id="experience" name="experience" min="0" max="50" placeholder=" years..." required></label>
<span class="error-message" id="experience-error"></span> <span class="error-message" id="experience-error"></span>
<label for="role">Position <label for="role">Position
<input type="text" id="role" name="role" placeholder="Your current role" required></label> <input type="text" id="currentrole" name="role" placeholder="Your current role" required></label>
<span class="error-message" id="currentRole-error"></span> <span class="error-message" id="currentRole-error"></span>
<div class="btn-box"> <div class="btn-box">
@ -81,11 +81,12 @@
<form id="form3"> <form id="form3">
<h3>Review & Submit</h3> <h3>Review & Submit</h3>
<div id="reviewSection"></div> <div id="reviewSection"></div>
<button type="button" class="edit-btn" id="editDetails">Edit</button> <!-- <button type="button" class="edit-btn" id="editDetails">Edit</button> -->
<!-- <button type="button" class="submit-btn" id="submitForm">Submit</button> --> <!-- <button type="button" class="submit-btn" id="submitForm">Submit</button> -->
<button type="button" id="clearForm">Clear Form</button> <!-- <button type="button" id="clearForm">Clear Form</button> -->
<div class="btn-box"> <div class="btn-box">
<button type="button" class="export-btn" id="exportData">Export as JSON</button> <!-- <button type="button" class="export-btn" id="exportData">Export as JSON</button> -->
<button type="button" id="Back2">Previous</button>
<button type="submit" id="Submit" disabled>Submit</button> <button type="submit" id="Submit" disabled>Submit</button>
</div> </div>
<p class="success-message" id="successMessage" style="display: none;">Form submitted successfully!</p> <p class="success-message" id="successMessage" style="display: none;">Form submitted successfully!</p>