我想要创建一个身份验证页面，设计已经接近完成:）
我只想在我的页面上添加最后一件事。
我希望，如果表单没有完全完成（例如，一个框丢失），提交按钮是灰色的，不能点击。 如果填写了整个表单，按钮将变为蓝色并可点击。
问题是我不懂JavaScript（我是初学者）。。。
这是我的表格:
<form method="post" action="traitement.php">
<div class="text">
<div class="group">
<label for="username">Téléphone, email ou nom d'utilisateur</label>
<input type="text" name="username" id="username" autofocus required class="champs" />
</div>
<div class="group">
<label for="password">Mot de passe</label>
<input type="password" name="password" id="password" required class="champs" />
</div>
<input type="submit" value="Se connecter" id="button" disabled="disabled" />
</div>
</form>
你认为只有CSS可能吗？
你能帮帮我吗？
提前感谢:）
你问一个通用的问题，所以我只能给你一个通用的答案:
理论上，可能存在只能使用CSS的情况。 但在实践中，您很可能需要JavaScript。 使用支持表单输入验证的框架会更舒适。
如果你想要一个更具体的答案，你需要提供更多的细节，例如你到底想要验证什么。 但也许我的回答已经有帮助了。
有一个简单的解决方案，看起来是这样的
<form method="post" action="traitement.php" id="loginForm">
首先将id添加到表单中，然后创建如下所示的JS脚本
document.getElementById("loginForm").addEventListener("keyup", function() {
var userInput = document.getElementById('username').value;
var passInput = document.getElementById('password').value;
if (userInput !== '' && passInput !== '') {
document.getElementById('button').removeAttribute("disabled");
} else {
document.getElementById('button').setAttribute("disabled", null);
}
});
在每次击键时，它将检查两个输入是否都有值，并相应地检查启用/禁用按钮
