表單輸入復選框和檔案型別不起作用-有解無憂

我正在嘗試制作一個用于添加博客頁面的表單。

我有標題表單、日期表單、內容表單、博客類別表單的復選框和主題影像的影像表單。

當我嘗試填寫表單時，只有 4 個復選框表單中的 3 個有效，當我單擊上傳影像時，它不會顯示檔案選擇器。

這是螢屏截圖：表單截圖

這就是我想要實作的目標： Form screenshot

我試圖瀏覽解決方案，但我的英語不太好瀏覽，我不知道搜索解決方案的關鍵字。

請幫忙，我已經堅持了3個小時。

這是完整的代碼：

let blogs = []

function addBlog(event) {
    event.preventDefault()

    let inputName = document.getElementById("inputProjectName").value
    let inputContent = document.getElementById("inputDescription").value
    let inputImage = document.getElementById("inputImage")

    const projectDate = {

        startDate: document.getElementById("inputStartDate").value,
        endDate: document.getElementById("inputEndDate").value
    }

    image = URL.createObjectURL(image.files[0])

    let cardIcons = {
        html: document.querySelector('input[name="checkHtml"]').checked,
        css: document.querySelector('input[name="checkCss"]').checked,
        nodeJs: document.querySelector('input[name="checkNode"]').checked,
        reactJs: document.querySelector('input[name="checkReact"]').checked
    }

    let blog = {
        title: inputName,
        date: projectDate,
        content: inputContent,
        icons: cardIcons,
        image: inputImage
    }

    blogs.push(blog)

    console.table(blogs)
}

/* FORM */

.mpi-title {
    width: 100%;
    margin: 50px 0px;
    font-size: 30px;
    text-align: center;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700;
}

.mpi-form-container {
    display: flex;
    justify-content: center;
}

.mpi-form {
    width: 540px;
    display: flex;
    justify-content: center;
}

.mpi-form label {
    font-size: 25px;
    font-weight: bold;
}

.mpi-form .mpi-name input,
.mpi-date input {
    width: 100%;
    height: 50px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.mpi-date {
    flex-grow: 1;
    display: flex;
    gap: 10px;
}

.mpi-date .date-start {
    flex: 50%;
}

.mpi-date .date-end {
    flex: 50%;
}

[type="date"]::-webkit-datetime-edit {
    opacity: 0;
}

[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
}

.mpi-desc textarea {
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
    border-radius: 8px;
    height: 200px;
}

.mpi-check {
    display: flex;
    gap: 120px;
    margin: 20px 0px;
}

.mpi-check label {
    font-size: 20px;
}

.check-left {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-right {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-label {
    display: block;
    position: relative;
    padding-left: 35px;
    color: #514a4a;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.check-label:hover input~.checkmark {
    background-color: #ccc;
}

.check-label input:checked~.checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-label input:checked~.checkmark:after {
    display: block;
}

.check-label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mpi-image {
    overflow: hidden;
    height: 50px;
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 20px;
    background: #f4f3f3;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    cursor: pointer;
    padding-right: 8px;
    box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}

.mpi-image label {
    width: 100%;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mpi-choose {
    margin-top: -2px;
    border-radius: 8px;
    align-items: center;
    padding: 13px 10px 13px 10px;
    background-color: #e4e4e4;
    color: #b2abab;
}

.mpi-attach {
    padding-right: 10px;
}

.mpi-submit button {
    margin-top: 30px;
    float: right;
    padding: 10px 30px;
    border: none;
    border-radius: 25px;
    background-color: var(--btn);
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 110px;
}

.mpi-submit button:hover {
    background-color: var(--btn-hover)
}


/* x FORM */

        <div class="mpi-form">
            <!--MP = My Project Input-->
            <form onsubmit="addBlog(event)">
                <div class="mpi-name">
                    <label for="inputProjectName">Project Name</label>
                    <input type="text" id="inputProjectName">
                </div>
                <div class="mpi-date">
                    <div class="date-start">
                        <label for="inputStartDate">Start Date</label>
                        <input type="date" id="inputStartDate">
                    </div>
                    <div class="date-end">
                        <label for="inputEndDate">End Date</label>
                        <input type="date" id="inputEndDate">
                    </div>
                </div>
                <div class="mpi-desc">
                    <label for="inputDescription">Description</label>
                    <textarea name="inputDescription" id="inputDescription"></textarea>
                </div>
                <div class="mpi-check-cont">
                    <label for="checkTitle">Technologies</label>
                    <div class="mpi-check">
                        <div class="check-left">
                            <div>
                                <label for="checkHtml" class="check-label">HTML
                                    <input type="checkbox" id="checkHtml" name="checkHtml"check>
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label for="checkNode" class="check-label">Node Js
                                    <input type="checkbox" id="checkNode" name="checkNode">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class="check-right">
                            <div>
                                <label for="checkCss" class="check-label">CSS
                                    <input type="checkbox" id="checkCss" name="checkCss">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label for="reactJs" class="check-label">React Js
                                    <input type="checkbox" id="checkReact" name="checkReact">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <label>Upload Image</label>
                    <div class="mpi-image">
                        <label for="input-blog-image">
                    <div class="mpi-choose">Choose</div>
                    <div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
                    </label>
                        <input type="file" id="inputImage" hidden />
                    </div>
                </div>
                <div class="mpi-submit">
                    <button type="submit">Submit</button>
                </div>
            </form>

謝謝

uj5u.com熱心網友回復：

第一個錯誤是您添加的id不同于for

<label for="reactJs" class="check-label">React Js
    <input type="checkbox" id="checkReact" name="checkReact">
    <span class="checkmark"></span>
</label>

這里的值是reactJs但輸入 id 是checkReact

第二個錯誤同上

<label for="input-blog-image">
    <div class="mpi-choose">Choose</div>
    <div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />

值的標簽是input-blog-image但輸入 id 是inputImage

進行這些更改，將正常作業。

let blogs = []

function addBlog(event) {
   event.preventDefault()

   let inputName = document.getElementById("inputProjectName").value
   let inputContent = document.getElementById("inputDescription").value
   let inputImage = document.getElementById("inputImage")

   const projectDate = {

      startDate: document.getElementById("inputStartDate").value,
      endDate: document.getElementById("inputEndDate").value
   }

   image = URL.createObjectURL(image.files[0])

   let cardIcons = {
      html: document.querySelector('input[name="checkHtml"]').checked,
      css: document.querySelector('input[name="checkCss"]').checked,
      nodeJs: document.querySelector('input[name="checkNode"]').checked,
      reactJs: document.querySelector('input[name="checkReact"]').checked
   }

   let blog = {
      title: inputName,
      date: projectDate,
      content: inputContent,
      icons: cardIcons,
      image: inputImage
   }

   blogs.push(blog)

   console.table(blogs)
}

mpi-title {
    width: 100%;
    margin: 50px 0px;
    font-size: 30px;
    text-align: center;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700;
}

.mpi-form-container {
    display: flex;
    justify-content: center;
}

.mpi-form {
    width: 540px;
    display: flex;
    justify-content: center;
}

.mpi-form label {
    font-size: 25px;
    font-weight: bold;
}

.mpi-form .mpi-name input,
.mpi-date input {
    width: 100%;
    height: 50px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.mpi-date {
    flex-grow: 1;
    display: flex;
    gap: 10px;
}

.mpi-date .date-start {
    flex: 50%;
}

.mpi-date .date-end {
    flex: 50%;
}

[type="date"]::-webkit-datetime-edit {
    opacity: 0;
}

[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
}

.mpi-desc textarea {
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
    border-radius: 8px;
    height: 200px;
}

.mpi-check {
    display: flex;
    gap: 120px;
    margin: 20px 0px;
}

.mpi-check label {
    font-size: 20px;
}

.check-left {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-right {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-label {
    display: block;
    position: relative;
    padding-left: 35px;
    color: #514a4a;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.check-label:hover input~.checkmark {
    background-color: #ccc;
}

.check-label input:checked~.checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-label input:checked~.checkmark:after {
    display: block;
}

.check-label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mpi-image {
    overflow: hidden;
    height: 50px;
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 20px;
    background: #f4f3f3;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    cursor: pointer;
    padding-right: 8px;
    box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}

.mpi-image label {
    width: 100%;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mpi-choose {
    margin-top: -2px;
    border-radius: 8px;
    align-items: center;
    padding: 13px 10px 13px 10px;
    background-color: #e4e4e4;
    color: #b2abab;
}

.mpi-attach {
    padding-right: 10px;
}

.mpi-submit button {
    margin-top: 30px;
    float: right;
    padding: 10px 30px;
    border: none;
    border-radius: 25px;
    background-color: var(--btn);
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 110px;
}

.mpi-submit button:hover {
    background-color: var(--btn-hover)
}

<form onsubmit="addBlog(event)">
   <div class="mpi-name">
      <label for="inputProjectName">Project Name</label>
      <input type="text" id="inputProjectName">
   </div>
   <div class="mpi-date">
      <div class="date-start">
         <label for="inputStartDate">Start Date</label>
         <input type="date" id="inputStartDate">
      </div>
      <div class="date-end">
         <label for="inputEndDate">End Date</label>
         <input type="date" id="inputEndDate">
      </div>
   </div>
   <div class="mpi-desc">
      <label for="inputDescription">Description</label>
      <textarea name="inputDescription" id="inputDescription"></textarea>
   </div>
   <div class="mpi-check-cont">
      <label for="checkTitle">Technologies</label>
      <div class="mpi-check">
         <div class="check-left">
            <div>
               <label for="checkHtml" class="check-label">HTML
               <input type="checkbox" id="checkHtml" name="checkHtml"check>
               <span class="checkmark"></span>
               </label>
            </div>
            <div>
               <label for="checkNode" class="check-label">Node Js
               <input type="checkbox" id="checkNode" name="checkNode">
               <span class="checkmark"></span>
               </label>
            </div>
         </div>
         <div class="check-right">
            <div>
               <label for="checkCss" class="check-label">CSS
               <input type="checkbox" id="checkCss" name="checkCss">
               <span class="checkmark"></span>
               </label>
            </div>
            <div>
               <label for="reactJs" class="check-label">React Js
               <input type="checkbox" id="reactJs" name="checkReact">
               <span class="checkmark"></span>
               </label>
            </div>
         </div>
      </div>
   </div>
   <div>
      <label>Upload Image</label>
      <div class="mpi-image">
         <label for="input-blog-image">
            <div class="mpi-choose">Choose</div>
            <div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
         </label>
         <input type="file" id="input-blog-image" hidden />
      </div>
   </div>
   <div class="mpi-submit">
      <button type="submit">Submit</button>
   </div>
</form>

uj5u.com熱心網友回復：

問題是兩個元素的for屬性值錯誤。label這些都是：

<label for="reactJs" class="check-label">

<label for="input-blog-image">

正確的值是：

<label for="checkReact" class="check-label">

<label for="inputImage">

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/474261.html

標籤：javascript html css

上一篇：為什么我的選單與輸入欄位合并？我希望它回應

下一篇：justify-self屬性在引導程式的導航欄中不起作用