create three files named:

  • index.html
  • style.css
  • index.js

Html Code:(index.html)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Course registration Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="form">  
        <h1>Course registration</h1>
        <form action="" method="POST" onsubmit="return displayDetails()">
            <div id="box">
            <div id="box1">
                <table>
            <tr>
                <td><label for="">First Name</label></td>
                <td><input type="text" name="fname" id="fname" placeholder="Enter your first name"></td>
            </tr>
            <tr>
                <td><label for="">Middle Name</label></td>
                <td><input type="text" name="mname" id="mnane" placeholder="Enter your middle name"></td>
            </tr>
            <tr>
                <td><label for="">Last Name</label></td>
                <td><input type="text" name="lname" id="lname" placeholder="Enter your last name"></td>
            </tr>
            <tr>
                <td><label for="">Gender</label></td>
                <td><input type="radio" name="gender" id="Male"><label for="Male">Male</label><input type="radio" name="gender" id="Female"><label for="Female">Female</label></td>
            </tr>
            <tr>
                <td><label for="">CNIC</label></td>
                <td><input type="text" name="cnic" id="cnic" placeholder="e.g:XXXX-XXXXXXX-X"></td>
            </tr>
            <tr>
                <td><label for="">Cell No</label></td>
                <td><input type="tel" name="cellno" id="cellno" placeholder="e.g:03XX-XXXXXXX"></td>
            </tr>
            <tr>
                <td><label for="">Email</label></td>
                <td><input type="email" name="email" id="email" placeholder="e.g:xyz@gmail.com"></td>
            </tr>
        </table>
            </div>
            <div id="box2">
                <label>Choose atleast two courses</label><br>
                <input type="checkbox" name="" id="Python"><label for="Python">Python</label><br><input type="checkbox" name="" id="Web designing"><label for="Web designing">Web designing</label><br><input type="checkbox" name="" id="SEO"><label for="SEO">SEO</label><br><input type="checkbox" name="" id="E-Commerce"><label for="E-Commerce">E-Commerce</label><br>
                <label id="session">Session</label>
                    <select name="" id="">
                    <option value="" disabled selected>Select option</option>
                    <option value="Morning">Morning</option>
                    <option value="Evening">Evening</option>
                    <option value="Weekend">Weekend</option>
                </select>
            </div>
            </div>
            <div id="box3">
                <input type="reset" value="Reset"><input type="submit" value="Submit">
            </div>
            </form>
            </div>
            <div id="displayResult">

            </div>
            <script src="index.js">
</script>
</body>
</html>

Css Code:(style.css)

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
#form{
    margin: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border:2px solid black;
}
#box{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
}
h1{
    text-align: center;
    font-size: 50px;
}
#box1{
    width:50vw;
    margin-left: 10px;
}
#box2{
    width:50vw;
}
#box1{
    font-size: 25px;
}
input{
    background-color:lightblue;
    padding: 10px;
}
input[type=text],[type=tel],[type=email]{
    width:30vw;
}
input[type=radio]{
    cursor: pointer;
    height: 20px;
    width: 20px;
}
input[type=checkbox]{
    width:20px;
    height:20px;
    cursor: pointer;
}
#box2 label{
    font-size: 25px;
}
input::placeholder{
    color: black;
    font-size:15px;
}
input[value]{
    color: #000;
    font-size: 20px;
}
#box2 label[for]{
    font-size: 22px;
    margin: 20px;
}
select{
    padding:5px;
    margin-left: 20px;
    background-color: lightblue;
}
#box3{
    text-align: center;
}
input[type=submit],[type=reset]{
    margin:10px;
    padding: 20px 40px;
    border-radius: 20px;
    border:2px solid black;
    outline: none;
    cursor: pointer;
}
#session+select{
    margin-top: 50px;
}

JavaScript code:(index.js)


function dispalyDetails(){
//read input values using getElementsByName method 
fname = document.getElementsByName("fname")[0].value;
mname = document.getElementsByName("mname")[0].value;
lname = document.getElementsByName("Iname")[0].value;
//read selected radio value
gender = document.querySelector('input[name="gender"]:checked').value;
var checkedValue="";
//read checkbox group value
var checkboxes = document.querySelectorAll("input[type=checkbox].checked");
for (var i = 0; i < checkboxes.length; i++) { 
    checkedValue + checkboxes[i].value;
}
checkedValue +=",";
cnic = document.getElementsByName("cnic")[0].value;
cellno = document.getElementsByName("cellno")[0].value;
email = document.getElementsByName("email")[0].value; 
session = document.getElementById("session").value;
//create a adynamic table for displaying the selected value 
var data="<table class='profile' style='width: 70%'>";
data += "<tr><td>First Name: </td><td>"+fname+"</td></tr>";
data+=" <tr><td>Middle Name: </td><td>"+mname+"</td></tr>";
data+=" <tr><td>Last Name: </td><td>"+Iname+"</td><t/r>";

data +="<tr><td>Gender: </td><td>"+gender+"</td></tr>";
     data +=" <tr> <td>Course Selected: </td><td>"+checkedValue+"</td></tr>";

data+=" <tr><td>CNIC: </td><td>"+cnic+"</td></tr>";
 data+=" <tr><td>Cell No: </td><td>"+celino+"</td></tr>";

data += "<tr><td>Email: </td><td>"+email+"</td></tr>";
 data += "<tr><td>Session: </td><td>"+session+"</td></tr>";

data += "</table>";

//display dynamic table to the screen 
document.getElementById('displayResult').innerHTML;
}