如何在html中添加沒有輸入標簽的必需選擇字段

Question

我有這個性別選擇器代碼，我如何向它添加一個必需的屬性，就像它上面的輸入文本字段一樣。 性別的代碼沒有輸入標簽添加需要的標簽名稱和id供php評估。 如何將性別數據作為正常選擇字段發送到下一個處理頁面。 問題是由一個 2 周大的程序員提出的。

 $('.gender-selector .item').on('click', function() { $('.gender-selector .item').removeClass('active'); $(this).addClass('active') })

 .gender-selector { width: 300px; } .gender-selector h1, h2, h3, h4, h5, h6 { text-align: center; width: 100%; height: 65px; align-items: center; display: flex; justify-content: center; font-weight: normal; } .gender-selector .container { width: 100%; display: flex; justify-content: space-between; } .gender-selector .container .item { width: 140px; height: 150px; border: 2px solid #eceff1; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; background: #fff; border-radius: 8px; box-shadow: inset 0px 0px 0px #000 42; transition: all linear 0.1s; } .gender-selector .container .item.girl.active { border: 2px solid #e91e63; } .gender-selector .container .item.girl.active .circle { width: 15px; height: 15px; background: #e91e63; } .gender-selector .container .item.girl:hover { cursor: pointer; border: 2px solid #e91e63; } .gender-selector .container .item.boy.active { border: 2px solid #2196f3; } .gender-selector .container .item.boy.active .circle { width: 15px; height: 15px; background: #2196f3; } .gender-selector .container .item.boy:hover { cursor: pointer; border: 2px solid #2196f3; } .gender-selector .container .item .icon { width: 64px; height: 64px; overflow: hidden; margin: 0 auto; } .gender-selector .container .item .icon img { max-width: 100%; max-height: 100%; } .gender-selector .container .item p { text-align: center; margin-top: 10px; } .gender-selector .container .item .checked { width: 20px; height: 20px; background: #eceff1; border-radius: 50%; position: absolute; top: 5px; right: 5px; display: flex; justify-content: center; align-items: center; } .gender-selector .container .item .checked .circle { width: 0px; height: 0px; background: #e91e63; border-radius: 50%; transition: all linear 0.1s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="text" name="name" id="name" placeholder="My name is" required> <div class="gender-selector center"> <h3>I am</h3> <div class="container"> <div class="item girl"> <div class="checked"> <div class="circle"></div> </div> <div class="icon"> <img src="https://image.flaticon.com/icons/svg/40/40739.svg" alt=""> </div> <p>Female</p> </div> <div class="item boy"> <div class="checked"> <div class="circle"></div> </div> <div class="icon"> <img src="https://image.flaticon.com/icons/svg/40/40541.svg" alt=""> </div> <p>Male</p> </div> </div> </div> <input type="submit"></input> </form>

Answer 1

您的代碼缺少每個選項的輸入。 該輸入必須是單選類型，並且應該具有相同的名稱和不同的值，如下所示：

<label>
    <input type="radio" required="required" value="boy"> Boy
</label>

<label>
     <input type="radio" required="required" value="girl"> Girl
</label>

您可以將它們放置在您擁有 div.circle 的相同位置，並將它們設置為與您擁有它們的方式相同的樣式。

如果您想隱藏輸入標簽，只需執行此操作，然后在您的 JS 中將所選標簽添加到用戶單擊它們時單擊的標簽。

請記住，如果輸入被隱藏，您將無法在沒有用戶點擊的情況下提交表單，並且用戶不會知道為什么表單沒有提交，因為您會遇到控制台錯誤。