html文本框内的标签答案

【问题标题】：label inside the textbox in htmlhtml文本框内的标签
【发布时间】：2022-12-12 13:19:22
【问题描述】：

我想将标签放在 html 的文本框中。我不知道如何将标签放在文本框中。我想制作这样的文本框。

我的观点：

<div id="filter" style="display:none; background-color:#D3D3D3;border:1px; border-style:solid; border-color:black; border-radius:5px">
                        <select asp-for="Input.areaunit"  style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:100px;">
                            <option value="" hidden>Select area Unit</option>
                            <option value="Kanal">Kanal</option>
                            <option value="Marla">Marla</option>
                            <option value="Square Feet">Square Feet</option>
                            <option value="Square Meter">Square Meter</option>
                            <option value="Square Yards">Square Yards</option>
                        </select>
                        <label for="area">Area</label>
                        <input type="number" placeholder="area"name="area" asp-for="Input.area" autocomplete='false' style="height :50px ;border-color: black; border-style:solid ; margin-top:5px;margin-bottom:3px; border-radius:5px;" />
                        
                            <input type="number" placeholder="price" name="price" asp-for="Input.price"  style="height :50px ; border-color: black;  border-style:solid ; margin-top:5px;margin-bottom:3px; border-radius:5px;" />
                            <label for="price">Price</label>
                       </div>

【问题讨论】：

标签： html css

【解决方案1】：

使用材料文本字段，它可以是您想要通过此链接的方式

https://mui.com/material-ui/react-text-field/#main-content

【讨论】：