почему кнопка отправки может быть нажата для отправки данных в форме?

Question

У меня проблема с кнопкой отправки в форме html. Я делаю проект об автоматическом c CV на основе формы ввода и автоматически c распечатываю CV в html форме. Я использую функцию localstorage для сохранения данных от пользователя, и я не знаю, почему нельзя нажать кнопку в конце формы в html.

Форма. html используется для ввода данных от пользователя

<!-- /* PROFILE */
/* nama , tempat tgl lahir, alamat, nomor telepon, email, social media (FB,github,Twitter,Linkedin) , umur
digenerate , summary , language , hobby */ -->

<form id="regForm" action="/CV_result.html">

    <!-- One "tab" for each step in the form: -->

        <fieldset>
            <legend style="text-align: center;"> Data Diri </legend>

            <label for="myPhoto">Select a file for photo profil:</label>
            <input type="file" id="myPhoto" name="myPhoto" required>

            <input type="text" placeholder="Nama lengkap..." id="fullName" name="fullName" required>

            <label for="gender">Jenis Kelamin</label>
            <select id="gender" id="gender" name="gender">
                <option value="female">Perempuan</option>
                <option value="male">Laki-laki</option>
                <option value="secret">Tidak ingin memberitahu</option>
            </select>

            <label for="birthday">Tempat dan Tangal lahir :</label>
            <div class="flex-container">
                <input style="width: 50%;" type="text" placeholder="Tempat lahir..." id="bornPlace" name="bornPlace"
                    required>
                <input style="width: 50%;margin-left: 10px;" type="date" id="birthday" name="birthday">
            </div>

            <input type="text" placeholder="alamat domisili..." id="address" name="address" required>

            <label for="phone">Nomor Telepon: </label>
            <input type="tel" placeholder="+62" id="phone" name="phone" required>

            <label for="email">Alamat Email:</label>
            <input type="email" placeholder="example@abc.com" id="email" name="email" required>

            <input type="text" placeholder="username dari github" id="usernameGithub" name="usernameGithub">
            <input type="text" placeholder="username dari Linkedin" id="usernameLinkedin" name="usernameLinkedin">
            <input type="text" placeholder="username dari Instagram" id="usernameInstagram" name="usernameInstagram"> 

            <textarea placeholder=" Beritahu sesuatu tentang dirimu" id="summaryProfle" name="summaryProfle"
                style="height:200px"></textarea>

            <!-- language -->
            <fieldset>
                <legend style="text-align: center;">Bahasa</legend>
                <div class="flex-container">
                    <input style="width: 50%;" type="text" placeholder="bahasa yang dikuasai" id="languageName1"
                        name="languageName1"></input>
                    <select style="width: 50%;margin-left: 10px;" id="languageLevel1" name="languageLevel1">
                        <option value="Beginner">Pemula</option>
                        <option value="Intermediate">Menengah</option>
                        <option value="Advanced">Mahir</option>
                    </select>
                </div>

                <div class="flex-container">
                    <input style="width: 50%;" type="text" placeholder="bahasa yang dikuasai" id="languageName2"
                        name="languageName2"></input>
                    <select style="width: 50%;margin-left: 10px;" id="languageLevel2" name="languageLevel2">
                        <option value="Beginner">Pemula</option>
                        <option value="Intermediate">Menengah</option>
                        <option value="Advanced">Mahir</option>
                    </select>
                </div>
            </fieldset>

            <fieldset style="margin-top: 16px;">
                <legend style=" text-align: center;"> Hobi </legend>
                <div class="flex-container">
                    <input type="text" placeholder="Hobi pertama" id="hobby1" name="hobby1">
                    <input type="text" placeholder="Hobi kedua" id="hobby2" name="hobby2">
                    <input type="text" placeholder="Hobi ketiga" id="hobby3" name="hobby3">
                    <input type="text" placeholder="Hobi Keempat" id="hobby4" name="hobby4">
                </div>
            </fieldset>


            <fieldset style="margin-top: 16px;">
                <legend style="text-align: center;"> Daftar Skill</legend>

                <label for="skill1">Skill I</label>
                <div class="flex-container">
                    <input style="width: 50%;" type="text" placeholder="skill pertama" id="skillName1"
                        name="skillName1"></input>
                    <select style="width: 50%;margin-left: 10px;" id="skillLevel1" name="skillLevel1">
                        <option value="Beginner">Pemula</option>
                        <option value="Intermediate">Menengah</option>
                        <option value="Advanced">Mahir</option>
                    </select>
                </div>
                <textarea placeholder="Deskripsikan skill ini" id="skillSummary1" name="skillSummary1"
                    style="height:70px"></textarea>

                <label for="skill2">Skill II</label>
                <div class="flex-container">
                    <input style="width: 50%;" type="text" placeholder="skill kedua" id="skillName2"
                        name="skillName2"></input>
                    <select style="width: 50%;margin-left: 10px;" id="skillLevel2" name="skillLevel2">
                        <option value="Beginner">Pemula</option>
                        <option value="Intermediate">Menengah</option>
                        <option value="Advanced">Mahir</option>
                    </select>
                </div>
                <textarea placeholder="Deskripsikan skill ini" id="skillSummary2" name="skillSummary2"
                    style="height:70px"></textarea>

                <!-- <label for="skill3">Skill III</label>
                <div class="flex-container">
                    <input style="width: 50%;" type="text" placeholder="skill ketiga" id="skillName3"
                        name="skillName3"></input>
                    <select style="width: 50%;margin-left: 10px;" id="skillLevel3" name="skillLevel3">
                        <option value="Beginner">Pemula</option>
                        <option value="Intermediate">Menengah</option>
                        <option value="Advanced">Mahir</option>
                    </select>
                </div>
                <textarea placeholder="Deskripsikan skill ini" id="skillSummary3" name="skillSummary3"
                    style="height:70px"></textarea>

                <label for="skill4">Skill IV</label>
                <div class="flex-container">
                    <input style="width: 50%;" type="text" placeholder="skill keempat" id="skillName4"
                        name="skillName4"></input>
                    <select style="width: 50%;margin-left: 10px;" id="skillLevel4" name="skillLevel4">
                        <option value="Beginner">Pemula</option>
                        <option value="Intermediate">Menengah</option>
                        <option value="Advanced">Mahir</option>
                    </select>
                </div>
                <textarea placeholder="Deskripsikan skill ini" id="skillSummary4" name="skillSummary4"
                    style="height:70px"></textarea> -->

            </fieldset>

        </fieldset> 


    <!-- /* Working Experince */ -->
        <fieldset>
            <legend style="text-align: center;"> Pengalaman </legend>
            <h3>Pengalaman 1</h3>
            <input type="text" placeholder="Nama perusahaan " id="companyName1" name="companyName1" required>
            <input type="text" placeholder="Jabatan" id="companyPosition1" name="companyPosition1" required>
            <div class="flex-container">
                <input style="width: 50%;" type="number" placeholder="Pada tahun" id="yearCompanyStart1"
                    name="yearCompanyStart1" required>
                <input style="width: 50%;margin-left: 10px;" type="number" placeholder="Berakhir pada tahun"
                    id="yearCompanyEnd1" name="yearCompanyEnd1" required>
            </div>
            <textarea placeholder="Deskripsikan kegiatan dan tanggung jawab di perusahaan" id="companySummary1"
                name="companySummary1" style="height:200px"></textarea></h3>

            <h3>Pengalaman 2</h3>
            <input type="text" placeholder="Nama perusahaan " id="companyName2" name="companyName2">
            <input type="text" placeholder="Jabatan" id="companyPosition2" name="companyPosition2">
            <div class="flex-container">
                <input style="width: 50%;" type="number" placeholder="Pada tahun" id="yearCompanyStart2"
                    name="yearCompanyStart2" >
                <input style="width: 50%;margin-left: 10px;" type="number" placeholder="Berakhir pada tahun"
                    id="yearCompanyEnd2" name="yearCompanyEnd2">
            </div>
            <textarea placeholder="Deskripsikan kegiatan dan tanggung jawab di perusahaan" id="companySummary2"
                name="companySummary2" style="height:200px"></textarea> 

            <!-- <h3>Pengalaman 3</h3>
            <input type="text" placeholder="Nama perusahaan " id="nameCompany3" name="nameCompany3" required>
            <input type="text" placeholder="Jabatan" id="positionCompany3" name="positionCompany3" required>
            <div class="flex-container">
                <input style="width: 50%;" type="number" placeholder="Pada tahun" id="yearCompanyStart3"
                    name="yearCompanyStart3" required>
                <input style="width: 50%;margin-left: 10px;" type="number" placeholder="Berakhir pada tahun"
                    id="yearCompanyEnd3" name="yearCompanyEnd3" required>
            </div>
            <textarea placeholder="Deskripsikan kegiatan dan tanggung jawab di perusahaan" id="summaryCompany3"
                name="summaryCompany3" style="height:200px"></textarea> -->
        </fieldset>

    <!-- Education  -->

        <fieldset>
            <legend style="text-align: center;"> Pendidikan </legend>
            <h2>Pendidikan Formal</h2>
            <input type="text" placeholder="Institut..." id="educationInstitute" name="educationInstitute" required>
            <input type="text" placeholder="Fakultas..." id="educationFaculty" name="educationFaculty" required>
            <input type="text" placeholder="Program Studi..." id="educationMajor" name="educationMajor" required>
            <input type="number" placeholder="Tahun Masuk..." id="yearFreshmen" name="yearFreshmen" required>
            <input type="number" placeholder="Tahun Keluar..." id="yearGradute" name="yearGradute" required>
            <input type="number" placeholder="GPA..." id="gpa" name="gpa" required>
            <textarea
                placeholder="Beritahu tentang kurikulum program studimu dan konsentrasi keilmuan yang kamu ambil"
                id="summaryEducation" name="summaryEducation" style="height:200px"></textarea>

            <h1>Pendidikan Informal</h1>
            <input type="text" placeholder="Nama kegiatan yang diikuti" id="nameInformalEducation"
                name="nameInformalEducation" >
            <input type="number" placeholder="Lama pelatihan (hari)" id="durationTraining" name="durationTraining"
                >
            <input type="number" placeholder="Pada tahun" id="yearTraining" name="yearTraining">
            <input type="text" placeholder="Penyelenggara" id="trainerOrganization" name="trainerOrganization"
                >
            <textarea placeholder="Deskripsikan kegiatan yang diikuti" id="summaryInformalEducation"
                name="summaryInformalEducation" style="height:200px"></textarea>
        </fieldset>



    <!-- Organisasi -->

        <fieldset>
            <legend style="text-align: center;"> Organisasi </legend>
            <input type="text" placeholder="Nama Organisasi yang diikuti" id="nameOrganization"
                name="nameOrganization" >
            <input type="text" placeholder="Jabatan" id="positionOrganization" name="positionOrganization" >
            <input type="number" placeholder="Pada tahun" id="yearOrganizationStart" name="yearOrganizationStart">
            <input type="text" placeholder="Berakhir pada tahun" id="yearOrganizationEnd" name="yearOrganizationEnd">
            <textarea placeholder="Deskripsikan kegiatan dan tanggung jawab di Organisasi" id="summaryOrganization"
                name="summaryOrganization" style="height:200px"></textarea>
        </fieldset>



    <!-- /* Project */ -->

        <fieldset>
            <legend style="text-align: center;"> Project </legend>
            <input type="text" placeholder="Nama proyek yang dikerjakan" id="nameProject" name="nameProject"
                required>
            <input type="number" placeholder="Pada tahun" id="yearProject" name="yearProject" required>
            <input type="text" placeholder="Teknologi yang digunakan" id="technologyUse" name="technologyUse"
                required>
            <textarea placeholder="Deskripsikan proyek yang dikerjakan" id="summaryProject" name="summaryProject"
                style="height:200px"></textarea>
        </fieldset>

       <!-- /* Tombol Submit */ -->
        <button type="submit">Submit</button>
</form>

CV_result. html используется для отображения данных пользователя в форме CV.

<div id="bodyDiv">

    //
    <div>

        <div id="myPhoto">
            Photo
        </div>

        <div id="summaryProfile">
            Summary
        </div>

    </div>

    <div>

        <div class="organization">

        </div>

        <div class="project">

        </div>

    </div>

    <div class="personalInformation">
        <h2 id="fullName">fullName</h2>
        <div class="cointainer">
            <table class="table perInfoTab">
                <tbody>
                    <tr>
                        <th scope="row">Email : </th>
                        <td id="email">email</td>
                    </tr>
                    <tr>
                        <th scope="row">Cell # :</th>
                        <td id="gender"></td>
                    </tr>
                    <tr>
                        <th scope="row">Address :</th>
                        <td id="address"></td>
                    </tr>
                    <tr>
                        <th scope="row">CNIC :</th>
                        <td id="phone"></td>
                    </tr>
                </tbody>
            </table>

            <div class="image-profile">
                <img id="myPhoto" alt="myPhotoProfile">
            </div>

        </div>

    </div>

    <!-- Profile -->
    <!-- Photo
    Nama Lengkap
    Kota kelahiran
    Tanggal lahir
    Alamat domisili
    nomor telepon
    email
    github
    linkedin
    instagram
    language
    Hobby
    Summary -->

    <div class="">
        <h3 class="carObj"> Career objective</h3>
        <p id="carrerObjective"></p>
    </div>

    <!-- Education -->
    <!-- Institut Tema Acara yang dihadiri
    Falkustas Lama pelatihan
    Program Studi Pada tahun
    tahun masuk Penyelenggara
    tahun keluar Deskripsi dari acara
    GPA
    Deskripsi dari program Studi

    Tema Acara yang dihadiri
    Lama pelatihan
    Pada tahun
    Penyelenggara
    Deskripsi dari acara -->

    <div class="careerObjective">
        <h3 class="carObj"> Career objective</h3>
        <p id="carrerObjective"></p>
    </div>

    <!-- Organization -->
    <!-- Nama dari organisasi
    Jabatan
    tahun aktif
    deeskripsi dari kegiatan keorganisasian -->

    <div class="personalSummary">
        <h3 class="perSummary"> Personal Summary</h3>
        <ul>
            <li id="ps1"></li>
            <li id="ps2"></li>
            <li id="ps3"></li>
        </ul>
    </div>

    <!-- Working Experince -->
    <!-- Nama dari perusahaan
    Jabatan
    tahun aktif
    Jobdesk -->

    <div class="techinalSkills">
        <h3 class="techSkills">Techinal Skills</h3>
        <table class="table tecSkilTab">
            <tbody>
                <tr>
                    <th scope="row" id="tst1" width="100px;"></th>
                    <td id="tsd1"></td>
                </tr>
                <tr>
                    <th scope="row" id="tst2"></th>
                    <td id="tsd2"></td>
                </tr>
                <tr>
                    <th scope="row" id="tst3"></th>
                    <td id="tsd3"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- project -->
    <!-- Nama project
    Tahun pebuatan
    Deskripsi dari project
    Teknologi yang digunakan -->

    <div class="academicInfo">
        <h3 class="academicQual">Academic Qualifications</h3>
        <table class="table ">
            <thead class="thead-light">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Degree</th>
                    <th scope="col">Disipline</th>
                    <th scope="col">Institute</th>
                    <th scope="col">Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td id="dg1"></td>
                    <td id="ds1"></td>
                    <td id="in1"></td>
                    <td id="yr1"></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td id="dg2"></td>
                    <td id="ds2"></td>
                    <td id="in2"></td>
                    <td id="yr2"></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td id="dg3"></td>
                    <td id="ds3"></td>
                    <td id="in3"></td>
                    <td id="yr3"></td>
                </tr>

            </tbody>
        </table>
    </div>

</div>

CV_getter. js файл, используемый для отображения вводимых пользователем данных для CV_result. html

const userObj = JSON.parse(localStorage.getItem('userData'));

console.log("userObj", userObj);

document.getElementById("myPhoto").innerHTML = userObj.myPhoto;
document.getElementById("fullName").innerHTML = userObj.fullName;
document.getElementById("gender").innerHTML = userObj.gender;
document.getElementById("bornPlace").innerHTML = userObj.bornPlace;
document.getElementById("birthday").innerHTML = userObj.birthday;
document.getElementById("address").innerHTML = userObj.address;
document.getElementById("phone").innerHTML = userObj.phone;
document.getElementById("email").innerHTML = userObj.email;
document.getElementById("usernameGithub").innerHTML = userObj.usernameGithub;
document.getElementById("usernameLinkedin").innerHTML = userObj.usernameLinkedin;
document.getElementById("usernameInstagram").innerHTML = userObj.usernameInstagram;
document.getElementById("summaryProfile").innerHTML = userObj.summaryProfile;

document.getElementById("languageName1").innerHTML = userObj.languageName1;
document.getElementById("languageLevel1").innerHTML = userObj.languageLevel1;
document.getElementById("languageName2").innerHTML = userObj.languageName2;
document.getElementById("languageLevel2").innerHTML = userObj.languageLevel2;

document.getElementById("hobby1").innerHTML = userObj.hobby1;
document.getElementById("hobby2").innerHTML = userObj.hobby2;
document.getElementById("hobby3").innerHTML = userObj.hobby3;
document.getElementById("hobby4").innerHTML = userObj.hobby4;

document.getElementById("skillName1").innerHTML = userObj.skillName1;
document.getElementById("skillLevel1").innerHTML = userObj.skillLevel1;
document.getElementById("skillSummary1").innerHTML = userObj.skillSummary1;
document.getElementById("skillName").innerHTML = userObj.skillName2;
document.getElementById("skillLevel2").innerHTML = userObj.skillLevel2;
document.getElementById("skillSummary2").innerHTML = userObj.skillSummary2;
document.getElementById("skillName3").innerHTML = userObj.skillName3;
document.getElementById("skillLevel3").innerHTML = userObj.skillLevel3;
document.getElementById("skillSummary3").innerHTML = userObj.skillSummary3;
document.getElementById("skillName4").innerHTML = userObj.skillName4;
document.getElementById("skillLevel4").innerHTML = userObj.skillLevel4;
document.getElementById("skillSummary4").innerHTML = userObj.skillSummary4;


document.getElementById("companyName1").innerHTML = userObj.companyName1;
document.getElementById("companyPosition1").innerHTML = userObj.companyPosition1;
document.getElementById("yearCompanyStart1").innerHTML = userObj.yearCompanyStart1;
document.getElementById("yearCompanyEnd1").innerHTML = userObj.yearCompanyEnd1;
document.getElementById("companySummary1").innerHTML = userObj.companySummary1;
document.getElementById("companyName2").innerHTML = userObj.companyName2;
document.getElementById("companyPosition2").innerHTML = userObj.companyPosition2;
document.getElementById("yearCompanyStart2").innerHTML = userObj.yearCompanyStart2;
document.getElementById("yearCompanyEnd2").innerHTML = userObj.yearCompanyEnd2;
document.getElementById("companySummary2").innerHTML = userObj.companySummary2;


document.getElementById("educationInstitute").innerHTML = userObj.educationInstitute;
document.getElementById("educationFaculty").innerHTML = userObj.educationFaculty;
document.getElementById("educationMajor").innerHTML = userObj.educationMajor;
document.getElementById("yearFreshmen").innerHTML = userObj.yearFreshmen;
document.getElementById("yearGradute").innerHTML = userObj.yearGradute;
document.getElementById("gpa").innerHTML = userObj.gpa;
document.getElementById("summaryEducation").innerHTML = userObj.summaryEducation;

document.getElementById("nameInformalEducation").innerHTML = userObj.nameInformalEducation;
document.getElementById("durationTraining").innerHTML = userObj.durationTraining;
document.getElementById("yearTraining").innerHTML = userObj.yearTraining;
document.getElementById("trainerOrganization").innerHTML = userObj.trainerOrganization;
document.getElementById("summaryOrgsummaryInformalEducationanization").innerHTML = userObj.summaryInformalEducation;

document.getElementById("nameOrganization").innerHTML = userObj.nameOrganization;
document.getElementById("positionOrganization").innerHTML = userObj.positionOrganization;
document.getElementById("yearOrganizationStart").innerHTML = userObj.yearOrganizationStart;
document.getElementById("yearOrganizationEnd").innerHTML = userObj.yearOrganizationEnd;
document.getElementById("summaryOrganization").innerHTML = userObj.summaryOrganization;

document.getElementById("nameProject").innerHTML = userObj.nameProject;
document.getElementById("yearProject").innerHTML = userObj.yearProject;
document.getElementById("technologyUse").innerHTML = userObj.technologyUse;
document.getElementById("summaryProject").innerHTML = userObj.summaryProject;

CV_setter. js используется для хранения данных в объекте

    function gettingData(event) {
  event.preventDefault();
  //profile
  let myPhoto = document.getElementById("myPhoto").value;
  let fullName = document.getElementById("fullName").value;
  let gender = document.getElementById("gender").value;
  let bornPlace = document.getElementById("bornPlace").value;
  let birthday = document.getElementById("birthday").value;
  let address = document.getElementById("address").value;
  let phone = document.getElementById("phone").value;
  let email = document.getElementById("email").value;
  let usernameGithub = document.getElementById("usernameGithub").value;
  let usernameLinkedin = document.getElementById("usernameLinkedin").value;
  let usernameInstragram = document.getElementById("usernameInstragram").value;
  let summaryProfile = document.getElementById("summaryProfile").value;

  // skill,language,hobbies
  let languageName1 = document.getElementById("languageName1").value;
  let languageLevel1 = document.getElementById("languageLevel1").value;
  let languageName2 = document.getElementById("languageName2").value;
  let languageLevel2 = document.getElementById("languageLevel2").value;

  let hobby1 = document.getElementById("hobby1").value;
  let hobby2 = document.getElementById("hobby2").value;
  let hobby3 = document.getElementById("hobby3").value;
  let hobby4 = document.getElementById("hobby4").value

  let userDataObj = {
    myPhoto,
    fullName,
    gender,
    bornPlace,
    birthday,
    address,
    phone,
    email,
    // urlFB,
    // urlGithub,
    // urlLinkedin,
    // urlInstagram,
    summaryProfile,

    languageName1,
    languageLevel1,
    languageName2,
    languageLevel2,

    hobby1,
    hobby2,
    hobby3,
    hobby4,

  }

  console.log("userDaraObj", userDataObj);
  alert("Done");
  let jsnUserDataObj = JSON.stringify(userDataObj)
  localStorage.setItem("userData", jsnUserDataObj);
  console.log(jsnUserDataObj, "<<<<<<<=====");
  location = 'CV_result.html'
}