如何在HTML文本框内嵌入Label标签？附现有实现代码

我希望在HTML文本框内放置Label标签，达成输入时标签上移的内嵌提示效果，当前视图代码如下：

<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>

解决方案：容器包裹+CSS定位实现浮动标签 #

要实现内嵌浮动标签效果，需将输入框与标签放入相对定位的容器中，通过CSS控制标签的位置与样式变化，具体调整如下：

1. 修改后的HTML结构 #

将每个输入框与对应的标签包裹在.input-group容器内，并调整元素顺序，同时移除内联样式到CSS中：

<div id="filter" class="filter-container">
    <select asp-for="Input.areaunit" class="area-unit-select">
        <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>

    <div class="input-group">
        <input type="number" name="area" asp-for="Input.area" autocomplete='false' id="area" placeholder=" " />
        <label for="area">Area</label>
    </div>

    <div class="input-group">
        <input type="number" name="price" asp-for="Input.price" id="price" placeholder=" " />
        <label for="price">Price</label>
    </div>
</div>

2. 对应的CSS样式 #

通过CSS实现标签的浮动效果，同时统一输入框与容器的样式：

.filter-container {
    display: none;
    background-color: #D3D3D3;
    border: 1px solid black;
    border-radius: 5px;
    padding: 15px;
}

.area-unit-select {
    height: 50px;
    border: 1px solid black;
    border-radius: 5px;
    margin-left: 100px;
    padding: 0 12px;
    min-width: 200px;
}

.input-group {
    position: relative;
    margin: 10px 0;
}

.input-group input {
    height: 50px;
    width: 250px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 0 12px;
    padding-top: 16px;
    box-sizing: border-box;
    font-size: 16px;
}

.input-group label {
    position: absolute;
    top: 18px;
    left: 12px;
    color: #666;
    pointer-events: none;
    transition: all 0.2s ease;
    font-size: 16px;
}

/* 输入框聚焦或有内容时，标签上移缩小 */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    top: 6px;
    font-size: 12px;
    color: black;
}

效果说明 #

• 输入框未聚焦且无内容时，标签居中显示在输入框内部
• 输入框聚焦或已输入内容时，标签平滑上移至输入框顶部，字号缩小
• 点击标签可直接触发输入框焦点，不影响交互逻辑

内容的提问来源于stack exchange，提问作者Qasim Asghar