Hospital-Registrationform.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hospital Registration Portal</title>
 </head>
 <body>
    <div class="container">
    <div class="header">
      <h1>🏥 Hospital Registration Form:</h1>
      <p>Complete your registration to join our medical community</p>
    </div>

    <div class="form-content">
      <form id="registrationForm">
        <!-- Personal Details Section -->
        <div class="section">
          <h2 class="section-title">
            <span class="section-icon">👤</span>
            Personal Details:
          </h2>
          
          <div class="form-row">
            <div class="form-group">
              <label for="firstName">First Name *</label>
              <input type="text" id="firstName" name="firstName" required>
              <div class="error" id="firstNameError"></div>
            </div>
            <div class="form-group">
              <label for="lastName">Last Name *</label>
              <input type="text" id="lastName" name="lastName" required>
              <div class="error" id="lastNameError"></div>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="fatherName">Father's Name *</label>
              <input type="text" id="fatherName" name="fatherName" required>
            </div>
            <div class="form-group">
              <label for="motherName">Mother's Name *</label>
              <input type="text" id="motherName" name="motherName" required>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="dob">Date of Birth *</label>
              <input type="date" id="dob" name="dob" required>
            </div>
            <div class="form-group">
              <label for="aadharCard">Aadhar Card Number *</label>
              <input type="text" id="aadharCard" name="aadharCard" pattern="[0-9]{12}" maxlength="12" required>
              <div class="error" id="aadharError"></div>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="gender">Gender *</label>
              <select id="gender" name="gender" required>
                <option value="">--Select Gender--</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div class="form-group">
              <label for="category">Category *</label>
              <select id="category" name="category" required>
                <option value="">--Select Category--</option>
                <option value="general">General</option>
                 <option value="ews">EWS</option>
                <option value="obc">OBC</option>
                <option value="sc">SC</option>
                <option value="st">ST</option>
                <option value="pwd">PWD</option>
              </select>
            </div>
          </div>
        </div>

        <!-- Contact Details Section -->
        <div class="section">
          <h2 class="section-title">
            <span class="section-icon">📞</span>
            Contact Details:
          </h2>

          <div class="form-row">
            <div class="form-group">
              <label for="email">Email Address *</label>
              <input type="email" id="email" name="email" required>
              <div class="error" id="emailError"></div>
            </div>
            <div class="form-group">
              <label for="mobile">Mobile Number *</label>
              <input type="tel" id="mobile" name="mobile" pattern="[0-9]{10}" maxlength="10" required>
              <div class="error" id="mobileError"></div>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="alternateMobile">Alternate Mobile Number</label>
              <input type="tel" id="alternateMobile" name="alternateMobile" pattern="[0-9]{10}" maxlength="10">
            </div>
            
          <div class="form-group">
            <label for="address">Complete Address *</label>
            <textarea id="address" name="address" required placeholder="Enter your complete address..."></textarea>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="state">State *</label>
              <select id="state" name="state" required>
                <option value="">--Select State--</option>
                <option value="andhra-pradesh">Andhra Pradesh</option>
                <option value="arunachal-pradesh">Arunachal Pradesh</option>
                <option value="assam">Assam</option>
                <option value="bihar">Bihar</option>
                <option value="chhattisgarh">Chhattisgarh</option>
                <option value="delhi">Delhi</option>
                <option value="goa">Goa</option>
                <option value="gujarat">Gujarat</option>
                <option value="haryana">Haryana</option>
                <option value="himachal-pradesh">Himachal Pradesh</option>
                <option value="jharkhand">Jharkhand</option>
                <option value="karnataka">Karnataka</option>
                <option value="kerala">Kerala</option>
                <option value="madhya-pradesh">Madhya Pradesh</option>
                <option value="maharashtra">Maharashtra</option>
                <option value="manipur">Manipur</option>
                <option value="meghalaya">Meghalaya</option>
                <option value="mizoram">Mizoram</option>
                <option value="nagaland">Nagaland</option>
                <option value="odisha">Odisha</option>
                <option value="punjab">Punjab</option>
                <option value="rajasthan">Rajasthan</option>
                <option value="sikkim">Sikkim</option>
                <option value="tamil-nadu">Tamil Nadu</option>
                <option value="telangana">Telangana</option>
                <option value="tripura">Tripura</option>
                <option value="uttar-pradesh">Uttar Pradesh</option>
                <option value="uttarakhand">Uttarakhand</option>
                <option value="west-bengal">West Bengal</option>
              </select>
            </div>
            <div class="form-group">
              <label for="city">City *</label>
              <input type="text" id="city" name="city" required>
            </div>
          </div>

           <div class="form-group">
              <label for="pincode">Pin Code *</label>
              <input type="text" id="pincode" name="pincode" pattern="[0-9]{6}" maxlength="6" required>
            </div>
          </div>

          <div class="form-group">
            <label for="district">District *</label>
            <input type="text" id="district" name="district" required>
          </div>
        </div>

        <!-- Academic Details Section -->
        <div class="section">
          <h2 class="section-title">
            <span class="section-icon">🎓</span>
            Academic Details:
          </h2>

          <div class="form-row">
            <div class="form-group">
              <label for="board10">Class 10th Board *</label>
              <input type="text" id="board10" name="board10" required>
            </div>
            <div class="form-group">
              <label for="roll10">Class 10th Roll Number *</label>
              <input type="text" id="roll10" name="roll10" required>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="passingYear10">10th Passing Year *</label>
              <input type="number" id="passingYear10" name="passingYear10" min="2015" max="2023" required>
            </div>
            <div class="form-group">
              <label for="percentage10">10th Percentage *</label>
              <input type="number" id="percentage10" name="percentage10" min="0" max="100" step="0.01" required>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="board12">Class 12th Board *</label>
              <input type="text" id="board12" name="board12" required>
            </div>
            <div class="form-group">
              <label for="roll12">Class 12th Roll Number *</label>
              <input type="text" id="roll12" name="roll12" required>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="passingYear12">12th Passing Year *</label>
              <input type="number" id="passingYear12" name="passingYear12" min="2020" max="2025" required>
            </div>
            <div class="form-group">
              <label for="percentage12">12th Percentage *</label>
              <input type="number" id="percentage12" name="percentage12" min="0" max="100" step="0.01" required>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="university">University Name</label>
              <input type="text" id="university" name="university">
            </div>
            <div class="form-group">
              <label for="universityRoll">University Roll Number</label>
              <input type="text" id="universityRoll" name="universityRoll">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="universityPassingYear">University Passing Year</label>
              <input type="number" id="universityPassingYear" name="universityPassingYear" min="2024" max="2030">
            </div>
            <div class="form-group">
              <label for="preferredBranch">Preferred Branch *</label>
              <select id="preferredBranch" name="preferredBranch" required>
                <option value="">--Select Branch--</option>
                <option value="general-medicine">General Medicine</option>
                <option value="pediatrics">Pediatrics</option>
                <option value="orthopedics">Orthopedics</option>
                <option value="gynecology">Gynecology</option>
                <option value="cardiology">Cardiology</option>
                <option value="neurology">Neurology</option>
                <option value="dermatology">Dermatology</option>
                <option value="psychiatry">Psychiatry</option>
                <option value="radiology">Radiology</option>
                <option value="anesthesiology">Anesthesiology</option>
                <option value="ophthalmology">Ophthalmology</option>
                <option value="ent">ENT</option>
                <option value="general-surgery">General Surgery</option>
                <option value="urology">Urology</option>
              </select>
            </div>
          </div>
        </div>

        <!-- Document Upload Section -->
        <div class="section">
          <h2 class="section-title">
            <span class="section-icon">📄</span>
            Document Upload
          </h2>

          <div class="form-row">
            <div class="form-group">
              <label>Upload Aadhar Card *</label>
              <div class="file-input-wrapper">
                <input type="file" id="aadharFile" name="aadharFile" class="file-input" accept=".pdf,.jpg,.jpeg,.png" required>
                <label for="aadharFile" class="file-input-label">
                  📄 Choose Aadhar Card File
                </label>
              </div>
            </div>
            <div class="form-group">
              <label>Upload Photo *</label>
              <div class="file-input-wrapper">
                <input type="file" id="photoFile" name="photoFile" class="file-input" accept=".jpg,.jpeg,.png" required>
                <label for="photoFile" class="file-input-label">
                  📷 Choose Photo File
                </label>
              </div>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>Upload Signature *</label>
              <div class="file-input-wrapper">
                <input type="file" id="signatureFile" name="signatureFile" class="file-input" accept=".jpg,.jpeg,.png" required>
                <label for="signatureFile" class="file-input-label">
                  ✍️ Choose Signature File
                </label>
              </div>
            </div>
            <div class="form-group">
              <label>Upload 10th Marksheet *</label>
              <div class="file-input-wrapper">
                <input type="file" id="marksheet10File" name="marksheet10File" class="file-input" accept=".pdf,.jpg,.jpeg,.png" required>
                <label for="marksheet10File" class="file-input-label">
                  📊 Choose 10th Marksheet
                </label>
              </div>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>Upload 12th Marksheet *</label>
              <div class="file-input-wrapper">
                <input type="file" id="marksheet12File" name="marksheet12File" class="file-input" accept=".pdf,.jpg,.jpeg,.png" required>
                <label for="marksheet12File" class="file-input-label">
                  📊 Choose 12th Marksheet
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- Login Details Section -->
        <div class="section">
          <h2 class="section-title">
            <span class="section-icon">🔐</span>
            Login Credentials:
          </h2>

          <div class="form-row">
            <div class="form-group">
              <label for="username">Username *</label>
              <input type="text" id="username" name="username" required>
              <div class="error" id="usernameError"></div>
            </div>
            <div class="form-group">
              <label for="password">Password *</label>
              <input type="password" id="password" name="password" required>
              <div class="error" id="passwordError"></div>
            </div>
          </div>

          <div class="form-group">
            <label for="confirmPassword">Confirm Password *</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required>
            <div class="error" id="confirmPasswordError"></div>
          </div>
        </div>

        <div class="submit-section">
          <button type="submit" class="submit-btn">
            ✨ Submit Application
          </button>
        </div>
      </form>
    </div>
  </div>

    
 </body>
 </html>