菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 5 表单浮动标签


浮动标签 / 动态标签

默认情况下,使用标签时,它们通常显示在输入字段的上方

通过使用浮动标签,您可以将标签插入到输入字段内部,并在您点击输入字段时使其浮动/动态化

示例

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="请输入邮箱" name="email">
  <label for="email">邮箱</label>
</div>

<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="请输入密码" name="pswd">
  <label for="pwd">密码</label>
</div>
自己动手试一试 »

关于浮动标签的说明: <label> 元素必须放在 <input> 元素之后,并且每个 <input> 元素都需要 placeholder 属性(即使它不显示)。


Textarea

这同样适用于文本区域 (textarea)

示例

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="在此处输入评论"></textarea>
  <label for="comment">评论</label>
</div>
自己动手试一试 »


选择菜单

您也可以在选择菜单中使用“浮动标签”。但是,它们不会浮动/动态化。标签将始终显示在选择菜单内部的左上角

示例

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">选择列表(选择一个):</label>
</div>
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持