Creating contact list with form not working

I want to make a form which takes into values of name, last name, phone num and create contacts inside a list bellow when i click on a button. But problem is its not working, i looked up if it has something to do with forms and tables, but it turns out its most common to wrap up table inside a form to peform some actions with submiting a button. Any ideas to make this more correctly with a form?

HTML code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css">
    <h1>Enter a new contact</h1>
    <table id="table">
            <td>First name: </td>
            <td><input type="text" id="inputName"></td>
            <td>Last name: </td> 
            <td><input type="text" id="inputLastName"></td>
            <td>Phone number: </td>
            <td><input type="text" id="inputPhoneNumber"></td>
            <td><input type="button" value="Submit" onclick="addContact()"></td>
    <table class="contactListTable">
            <td>First name: </td>
            <td>Last name: </td> 
            <td>Phone number: </td>
    <script src="script.js"></script>

JS code:

var contactListTable = document.querySelector(".contactListTable");
var nameInput = document.getElementById("inputName");
var lastNameInput = document.getElementById("inputLastName");
var phoneNumber = document.getElementById("inputPhoneNumber");

function addContact() {
     // create needed elements 
     var nameRow = document.createElement("tr");
     var firstName = document.createElement("td");
     var firstNameValue = document.createElement("td");
     var lastNameRow = document.createElement("tr");
     var lastName = document.createElement("td");
     var lastNameValue = document.createElement("td");
     var phoneRow = document.createElement("tr");
     var phone = document.createElement("td");
     var phoneValue = document.createElement("td");
     // append values to created elements
     firstName.innerHTML = "First name:";
     firstNameValue.innerHTML = nameInput.value;
     lastName.innerHTML = "Last name:";
     lastNameValue.innerHTML = lastNameInput.value;
     phone.innerHTML = "Phone number:";
     phoneValue.innerHTML = phoneNumber.value;
     // append table datas to table row
     // append table rows to table

I’ve tested your code, and it seems to work as you described.


upd: probably I misunderstood your problem.

Use a form element and the FormData API.

I tried it again, when i click on button to add contact it doesnt do anything, it only refreshed the page and thats it.