icons 相关问题

图标是图形用户界面中使用的小象形图，用于补充向用户呈现文本信息。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Assignment 2 - Website Building</title> <style> body { box-sizing: border-box; font-family: sans-serif; } #login-container { width: 460px; margin: 0 auto; } form label, form input { width: 100%; box-sizing: border-box; } form input { padding: 8px; } form label { font-weight: bold; } form div { margin: 16px 0px; } .invalid { border: 2px solid red; } .valid { border: 2px solid green; } .error-message { color: red; margin-top: 8px; } .success-message { color: green; margin-top: 8px; } </style> <script src="https://kit.fontawesome.com/dde5f4aaa2.js" crossorigin="anonymous"></script> </head> <body> <div id="login-container"> <form id="login-form"> <div> <label for="username">Username:</label> <input id="username" type="text"> <span id="username-error" class="error-message"></span> <i class="fa-solid fa-check" style="color: #008d63;"></i> <i class="fa-solid fa-exclamation" style="color: #ed0202;"></i> </div> <div> <label for="password">Password:</label> <input id="password" type="password"> <span id="password-error" class="error-message"></span> <i class="fa-solid fa-check" style="color: #008d63;"></i> <i class="fa-solid fa-exclamation" style="color: #ed0202;"></i> </div> <input type="submit" value="Login"> </form> <div id="error-messages"></div> </div> <script> document.getElementById("login-form").addEventListener("submit", function (event) { event.preventDefault(); // Prevent form submission // Reset previous validation styles document.getElementById("username").classList.remove("invalid"); document.getElementById("password").classList.remove("invalid"); document.getElementById("username").classList.remove("valid"); document.getElementById("password").classList.remove("valid"); document.getElementById("error-messages").innerHTML = ""; document.getElementById("username-error").textContent = ""; document.getElementById("password-error").textContent = ""; // Get input values var username = document.getElementById("username").value.trim(); var password = document.getElementById("password").value.trim(); var errors = []; // Validate username and password document.getElementById("username").classList.toggle("invalid", username === "" || username !== "new_user"); document.getElementById("username").classList.toggle("valid", username === "new_user"); if (username === "") { document.getElementById("username-error").textContent = "Please, enter username"; errors.push("Username is required."); } else if (username !== "new_user") { document.getElementById("username-error").textContent = "Please, enter valid username"; errors.push("Invalid username."); } document.getElementById("password").classList.toggle("invalid", password === "" || password !== "123456789"); document.getElementById("password").classList.toggle("valid", password === "123456789"); if (password === "") { document.getElementById("password-error").textContent = "Please, enter password"; errors.push("password is required."); } else if (password !== "123456789") { document.getElementById("password-error").textContent = "Please, enter valid password"; errors.push("Invalid password."); // Display error messages if (errors.length > 0) { var errorMessageHTML = "<ul class='error-message'>"; errors.forEach(function (error) { errorMessageHTML += "<li>" + error + "</li>"; }); errorMessageHTML += "</ul>"; document.getElementById("error-messages").innerHTML = errorMessageHTML; } else { // Successful login document.getElementById("username").classList.add("valid"); document.getElementById("password").classList.add("valid"); document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>"; } } }) </script> </body> </html> 我需要什么：所以基本上我需要表单来分别显示复选标记和 x 图标，具体取决于表单的输入是否正确/不正确。这些图标需要位于右侧的表单字段中，我设法找到如何将它们放入结构中，但我不知道如何将它们放入表单中并在表单没有输入时隐藏它们。我尝试过的：尝试使用 css 中的位置，但无法做到正确脚本文件中有很多错误，我全部删除了。这是您更正后的代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Assignment 2 - Website Building</title> <style> body { box-sizing: border-box; font-family: sans-serif; } #login-container { width: 460px; margin: 0 auto; } form label, form input { width: 100%; box-sizing: border-box; } form input { padding: 8px; } form label { font-weight: bold; } form div { margin: 16px 0px; } .invalid { border: 2px solid red; } .valid { border: 2px solid green; } .error-message { color: red; margin-top: 8px; } .success-message { color: green; margin-top: 8px; } .inputField { display: flex; position: relative; } .inputField svg { position: absolute; right: 5px; top: 6px; } .hide { display: none; } </style> <script src="https://kit.fontawesome.com/dde5f4aaa2.js" crossorigin="anonymous"></script> </head> <body> <div id="login-container"> <form id="login-form"> <div> <label for="username">Username:</label> <div class="inputField"> <input id="username" type="text"> <svg id="check1" fill="#000000" width="22px" height="22px" viewBox="0 0 24 24" id="check" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><polyline id="primary" points="5 12 10 17 19 8" style="fill: none; stroke: rgb(3, 252, 61); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline></svg> <svg id="close1" fill="#000000" width="20px" height="20px" viewBox="0 0 24 24" id="cross" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><line id="primary" x1="19" y1="19" x2="5" y2="5" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><line id="primary-2" data-name="primary" x1="19" y1="5" x2="5" y2="19" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line></svg> </div> <span id="username-error" class="error-message"></span> </div> <div> <label for="password">Password:</label> <div class="inputField"> <input id="password" type="password"> <svg id="check2" fill="#000000" width="22px" height="22px" viewBox="0 0 24 24" id="check" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><polyline id="primary" points="5 12 10 17 19 8" style="fill: none; stroke: rgb(3, 252, 61); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline></svg> <svg id="close2" fill="#000000" width="20px" height="20px" viewBox="0 0 24 24" id="cross" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><line id="primary" x1="19" y1="19" x2="5" y2="5" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><line id="primary-2" data-name="primary" x1="19" y1="5" x2="5" y2="19" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line></svg> </div> <span id="password-error" class="error-message"></span> </div> <input type="submit" value="Login"> </form> <div id="error-messages"></div> </div> <script> document.getElementById("check1").classList.add("hide"); document.getElementById("check2").classList.add("hide"); document.getElementById("close1").classList.add("hide"); document.getElementById("close2").classList.add("hide"); document.getElementById("login-form").addEventListener("submit", function (event) { event.preventDefault(); // Prevent form submission // Reset previous validation styles document.getElementById("username").classList.remove("invalid"); document.getElementById("password").classList.remove("invalid"); document.getElementById("username").classList.remove("valid"); document.getElementById("password").classList.remove("valid"); document.getElementById("error-messages").innerHTML = ""; document.getElementById("username-error").textContent = ""; document.getElementById("password-error").textContent = ""; // Get input values var username = document.getElementById("username").value.trim(); var password = document.getElementById("password").value.trim(); var errors = []; // Validate username and password document.getElementById("username").classList.toggle("invalid", username === "" || username !== "new_user"); document.getElementById("username").classList.toggle("valid", username === "new_user"); if (username === "") { document.getElementById("username-error").textContent = "Please, enter username"; errors.push("Username is required."); } else if (username !== "new_user") { document.getElementById("username-error").textContent = "Please, enter valid username"; errors.push("Invalid username."); } if(username === "new_user") { document.getElementById("close1").classList.add("hide"); document.getElementById("check1").classList.remove("hide"); } else { document.getElementById("check1").classList.add("hide"); document.getElementById("close1").classList.remove("hide"); } document.getElementById("password").classList.toggle("invalid", password === "" || password !== "123456789"); document.getElementById("password").classList.toggle("valid", password === "123456789"); if (password === "") { document.getElementById("password-error").textContent = "Please, enter password"; errors.push("password is required."); } else if (password !== "123456789") { document.getElementById("password-error").textContent = "Please, enter valid password"; errors.push("Invalid password."); } if(password === "123456789") { document.getElementById("close2").classList.add("hide"); document.getElementById("check2").classList.remove("hide"); } else { document.getElementById("check2").classList.add("hide"); document.getElementById("close2").classList.remove("hide"); } if (errors.length > 0) { // Display error messages var errorMessageHTML = "<ul class='error-message'>"; errors.forEach(function (error) { errorMessageHTML += "<li>" + error + "</li>"; }); errorMessageHTML += "</ul>"; document.getElementById("error-messages").innerHTML = errorMessageHTML; } else { // Successful login document.getElementById("username").classList.add("valid"); document.getElementById("password").classList.add("valid"); document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>"; } }) </script> </body> 对 CSS、Html 和脚本进行了更改。 HTML 更改我在 html 中的字体有问题，所以我使用了 svg，如果你擅长字体，那么你可以使用字体，没有问题。我已将输入字段和 svg（检查图标和关闭图标）全部包装在带有 inputField 类的 div 中。在所有四个 svg（2 个用于用户名，2 个用于密码）中，都使用了 uniqueId，这在脚本代码中很有用。 CSS 更改对于 inputField 已经给出了 flex 和相对位置。对于 svg 来说，根据您的喜好给出了绝对值并给出了顶部和右侧。隐藏以最初按照您的要求隐藏 svgs。脚本更改最初为所有四个 svgs 添加了 hide 类，以便它们被隐藏。然后在 if 条件下，我检查用户是否输入了正确的通行证和用户名（如果他们输入了），然后添加隐藏类以关闭 svg 并从检查 svg 中删除隐藏类，否则只需执行相反的操作。最后，如果检查 errorList 是否为空，您是否输入了应该输出的密码。

javascript html css forms icons

回答 1 投票 0

如何在视图中渲染visionOS图标？

我想在我的visionOS应用程序中包含一个关于页面，这应该包含应用程序图标。但是，图标的图像不会呈现。我已经尝试使用此中建议的图像声明...

swiftui icons visionos

回答 1 投票 0

如何使用shopware 6的评论图标

我尝试使用评论图标，但似乎它不存在。这不起作用： {% sw_icon '评论' %} 这有效： ...

icons shopware shopware6

回答 1 投票 0

如何改变悬停时png的颜色？

我在illustrator中做了一个“向下箭头”，并保存为透明背景的png。当我将它作为 img 放入网页时，它以原始颜色显示，这没关系。我正在努力...