标签标记值未显示在表单中答案

【问题标题】：Label tag value is not displaying in the form标签标记值未显示在表单中
【发布时间】：2020-06-22 02:21:26
【问题描述】：

我必须使用表格获取成分的名称和价格。但是在那种形式中，我设置标签标签来显示输入字段的标签，它没有显示在前端。

这里我使用 angular 和 bulma css。

这是我的 component.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>

在前端显示是这样的。我还在控制台部分附加了检查元素：

如何取回要显示的标签元素 提前致谢

【问题讨论】：

标签： html css angular forms bulma

【解决方案1】：

您是否尝试在输入元素上添加 id ？

要将标签与输入元素相关联，您需要为输入提供一个 id 属性。然后标签需要一个 for 属性，其值与输入的 id 相同。

label documentation

【讨论】：

@tomsarray 谢谢。今天我从这个命令中详细了解了标签标签。

【解决方案2】：

谢谢。我从自己那里得到了解决方案。我刚刚从 <label> 标记中删除了 class="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>`

【讨论】：