Значение тега ярлыка не отображается в форме

Question

Я должен получить название ингредиента и цену, используя форму. Но в этой форме я установил теги меток для отображения метки поля ввода, которое не отображается во внешнем интерфейсе.

Здесь я использую angular и bulma css.

Это мой компонент. html страница.

<div class="columns">
<form>
    <div class="field column is-horizontal">
        <div class="field column is-two-thirds">
            <label class="label" for="name">Name</label>
            <div class="control">
                <input class="input is-medium" type="text" placeholder="Ingrediant name">
            </div>
        </div>
        <div class="field column is-two-fifths">
            <label class="label" for="amount">Amount</label>
            <div class="control">
                <input class="input is-medium" type="number" placeholder="price">
            </div>
        </div>
    </div>
</form>

В интерфейсе отображается вот так. И я также прикрепил элемент проверки в части консоли:

введите описание изображения здесь

Как вернуть элемент метки для отображения Заранее спасибо

Answer 1

Спасибо. Получил решение от себя. Я только что удалил class = "label" из тега <label>. Это класс bulma css для метки. На данный момент тег метки и поле ввода имеют вид.

<label for="name">Name</label>
<div class="control">
    <input class="input is-medium" type="text" placeholder="Ingrediantname">
</div>

 <div class="columns">
    <form>
        <div class="field column is-horizontal">
            <div class="field column is-two-thirds">
                <label for="name">Name</label>
                <div class="control">
                    <input class="input is-medium" type="text" placeholder="Ingrediant name">
                </div>
            </div>
            <div class="field column is-two-fifths">
                <label for="amount">Amount</label>
                <div class="control">
                    <input class="input is-medium" type="number" placeholder="price">
                </div>
            </div>
        </div>
    </form>`

Answer 2

Пробовали ли вы поместить идентификатор в элементы ввода?

Чтобы связать метку с элементом ввода, вам нужно присвоить входу атрибут id. Затем для метки требуется атрибут for, значение которого совпадает с идентификатором входа.

документация по метке