<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML Form</title>
    <link rel="stylesheet" href="/styles/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous" />
</head>
<body>
    <div class="container">
        <form id="detailsForm" class="needs-validation" action="/submit-form" method="post">
            <fieldset class="row g-3">
                <legend class="text-primary"><h2>Education Qualification:</h2></legend>
                <div class="col">
                    <label for="cert">Highest Education Level: </label>
                    <select name="cert" id="cert" required>
                        <option selected disabled value="">Choose...</option>
                        <option>Uneducated</option>
                        <option>SSLC</option>
                        <option>HSC</option>
                        <option>Diploma</option>
                        <option>UG</option>
                        <option>PG</option>
                        <option>Ph.D</option>
                    </select>
                </div>
                <br>
                <div class="col-md-6">
                    <label for="degree">Highest Degree(if applicable): </label>
                    <input type="text" name="degree" id="degree" placeholder="B.E/ M.B.A">
                </div>
                <br>
                <div class="col-md-6">
                    <label for="course">Course of Choice(if applicable): </label>
                    <input type="text" name="course" id="course" placeholder="CSE/ ECE">
                </div>
                <br>
                <div class="col-md-6">
                    <label for="univ">University(if applicable): </label>
                    <input type="text" name="univ" id="univ" placeholder="Anna University">
                </div>
                <br>
                <div class="col-md-6">
                    <label for="clg">College/School(if applicable): </label>
                    <input type="text" name="clg" id="clg" placeholder="abc college, chennai/ abc school, chennai">
                </div>
                <br>
                <div class="col-md-6">
                    <label for="cgpa">CGPA: </label>
                    <input type="text" name="cgpa" id="cgpa" maxlength="4" size="4">
                </div>
                <br>
            </fieldset>
            <br>
            <div>
                <button type="submit">SUBMIT</button>
            </div>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" ></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>

</body>
</html>