我是一個新手前端開發人員，我無法理解占位符為什么不起作用，我嘗試使用 LABEL 標簽，但當我開始輸入文本輸入時它不會消失。我正在通過 express 向 heroku 提供 HTML。這是代碼：
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">[email protected]</label> -->
<input type="email" class="form-control" name="email" placeholder="[email protected]" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
編輯：我使用引導程式進行樣式設定，使用 Express 和 NodeJs 將檔案提供給前端。這是注冊頁面的整體代碼：
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img
class="mb-4"
src="../images/example.png"
alt=""
width="72"
height="57"
/>
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-floating">
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">[email protected]</label> -->
<input type="email" class="form-control" name="email" placeholder="[email protected]" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
樣式表中使用的最小樣式：
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin #firstName {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin #lastName {
margin-bottom: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
這是它在網路應用程式上的顯示方式
uj5u.com熱心網友回復：
正如菲爾在對您的帖子的評論中所說的那樣，問題是您正在使用 Bootstrap浮動標簽（通過使用 .form-floating 包裝您的輸入）但您沒有提供標簽（您的標簽已被注釋掉）。
<div class="form-floating">
<label for="firstname">FirstName</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstname"
placeholder="FirstName"
required
autofocus/>
</div>
或者，您可以洗掉 .form-floating 周圍的 div 并正常使用占位符
<div>
<label for="firstname">FirstName</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstname"
placeholder="FirstName"
required
autofocus/>
</div>
在這里，它們未注釋并且作業正常：在 codepen
uj5u.com熱心網友回復：
我不是那Bootstrap個人，但這可能是因為bootstrap。打開新html檔案，然后嘗試添加placeholder元素。
啊，你在：stackoverflow 鏈接
uj5u.com熱心網友回復：
從 div 標簽中洗掉類form-floating它將起作用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/476198.html
標籤：javascript html css 节点.js 表示