Html label 輸入標簽使用 id 不能正常工作

Question

我是 Html/CSS 的新手。 這是我的注冊。html 文件

注冊.html

<div class="form-floating">
    <select name="phone_number_0" class="form-control" required="" id="id_phone_number_0"><option value="">---------</option>
    <option value="+93">Afghanistan +93</option><option value="+355">Albania +355</option>
    </select>
    <input type="text" name="phone_number_1" class="form-control" required="" id="id_phone_number_1">
    <label for="id_phone_number_0">Country code:</label>
    <label for="id_phone_number_1">Phone number</label>
</div>

output 看起來像這樣

這是什么原因？ 我給了不同的id ，我正在使用 Bootstrap5 類

Answer 1

使用<div>分隔輸入並將label放在input之前，例如：

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="form-floating"> <div> <label for="id_phone_number_0">Country code:</label> <select name="phone_number_0" class="form-control" required="" id="id_phone_number_0"> <option value="">---------</option> <option value="+93">Afghanistan +93</option> <option value="+355">Albania +355</option> </select> </div> <div> <label for="id_phone_number_1">Phone number</label> <input type="text" name="phone_number_1" class="form-control" required="" id="id_phone_number_1"> </div> </div>