Блог

Я пытаюсь создать две формы, в которых в конце каждой строки формы есть кнопка отправки. Идея, которую я хочу создать, как показано на рисунке ниже.

Однако, написав следующий код

 
<div class="form widget widget-medium">
    <div class="widget-header title-only">
        <h2 class="widget-title">Queue View</h2>
    </div>
    <form method="POST">
        

        <div>
            <label for="Queue 1" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Queue 2" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Queue 3" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Queue 4" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>


    </form>
</div>

<div class="form widget widget-medium">
    <div class="widget-header title-only">
        <h2 class="widget-title">Booking View</h2>
    </div>
    <form method="POST">
        

        <div>
            <label for="Booking 1" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Booking 2" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Booking 3" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Booking 4" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>


    </form>
</div>
 

Я получил этот результат:

Кто-нибудь может знать, в чем проблема, что метки не отображаются? Что касается стиля, я все еще не исправил его, но моей главной проблемой являются метки, которые не отображаются.

Заранее благодарю вас.

В ваших тегах нет текста <label> .

А во-вторых, ваш <label> for атрибут связан с несуществующим id . Вы должны поместить id на кнопки (с тем же значением, for что и атрибут)