【Hacker News搬运】HTML表单验证严重未得到充分利用
-
Title: HTML Form Validation is heavily underused
HTML表单验证严重未得到充分利用
Text:
Url: https://expressionstatement.com/html-form-validation-is-heavily-underused
由于我是一个AI，我无法直接访问外部链接。但是，我可以根据你提供的链接标题和描述来分析并总结相关信息。 标题：“HTML表单验证被严重低估” 内容总结： HTML表单验证是网站开发中的一个重要环节，它确保用户输入的数据符合预期的格式和规则。然而，尽管HTML表单验证提供了多种内置的方法来验证用户输入，但它似乎并没有得到应有的重视。以下是对HTML表单验证被低估的一些原因和观点的总结： 1. **用户体验**：有效的表单验证可以即时提供反馈，帮助用户纠正错误，从而改善用户体验。如果验证不当，用户可能会感到沮丧，导致他们放弃填写表单。 2. **安全性**：HTML表单验证有助于防止恶意用户通过表单提交不良内容，如SQL注入、XSS攻击等。 3. **开发效率**：通过在客户端进行验证，可以减轻服务器的负担，从而提高整体的应用性能。 4. **SEO优化**：有效的表单验证可以确保数据的质量，这对于SEO来说是一个加分项。 5. **低估的原因**： - **忽视客户端验证**：许多开发者依赖后端验证，而忽略了客户端验证的重要性。 - **错误实现**：有些开发者错误地实现了表单验证，导致用户体验不佳。 - **对HTML5验证特性的不熟悉**：HTML5引入了许多新的表单验证特性，但许多开发者并不了解或使用这些特性。 总结： HTML表单验证是一个强大的工具，它不仅能够提升用户体验和安全性，还能提高开发效率和SEO排名。尽管如此，它仍然被许多开发者低估。为了充分利用其潜力，开发者应该熟悉并正确实现HTML表单验证的特性。Post by: stereoabuse
Comments:
DaiPlusPlus: Last time I checked, web-browsers today <i>still</i> do not allow you to style the appearance of built-in HTML validation messages [1]; this wouldn't be so bad if Chrome (and Firefox) still conformed to their OS platform UI guidelines (i.e. so it looks system-generated, like how
title=""tooltips used to be), instead Chrome uses this ugly yellow/orange icon color with black-text on a white background on a bubble with a fixed corner border radius - it clashes horribly with my current project's aesthetics.<p>[1] <a href="https://stackoverflow.com/questions/5328883/how-do-i-style-the-html-form-validation-error-messages-with-css" rel="nofollow">https://stackoverflow.com/questions/5328883/how-do-i-style-t...</a><p>Annoyingly, Chrome <i>used to</i> allow styling of validation-messages using vendor-prefixed pseudoelement selectors, but they removed that functionality and never brought it back; I'll chuck this on the same pile as other arbitrary annoyances like "can we have a native HTML combo-box please" and "why is <select multiple> still a horribly unusable ctrl+click box instead of a checkbox-list?".DaiPlusPlus: 上次我检查时，今天的web浏览器<I>仍然</I>不允许您设置内置HTML验证消息的外观样式[1]；这将；如果Chrome（和Firefox）仍然符合其操作系统平台UI指南（即看起来是系统生成的，就像过去的
title=“”工具提示一样），那么情况就不会那么糟糕了，相反，Chrome使用了这种难看的黄色；橙色图标颜色与白色背景上的黑色文本在具有固定角边界半径的气泡上——它与我当前的项目发生了可怕的冲突；的美学<p> [1]<a href=“https:/；stackoverflow.com/ questions𨢃 how-do-i-style-theml-form-validation-error-messages-with-css”rel=“nofollow”>https:"/；stackoverflow.com；问题"；5328883；how-do-i-style-t…</a><p>令人恼火的是，Chrome<i>过去允许使用供应商前缀的伪元素选择器对验证消息进行样式设置，但他们删除了该功能，再也没有恢复过；我；我会把这件事和其他武断的烦恼放在同一堆上，比如"；我们能有一个原生HTML组合框吗？”；以及"；为什么<；选择多个>；仍然是一个无法使用的ctrl+click框，而不是复选框列表&“；。pbreit: The biggest, easiest to implement underutilization is:<p>"Using specific type attribute values, such as "email", "number", or "url""<p>These can significantly improve user experience on mobile by triggering the optimal keyboard.
pbreit: 最大、最容易实施的利用不足是：<p>"；使用特定类型的属性值，例如“；电子邮件”&“；“数字”；，或"；url“&“<p> 这些可以通过触发最佳键盘来显著改善移动设备上的用户体验。
calibas: Here's a simple example that doesn't use React:<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectE...</a>
calibas: 这里；这是一个简单的例子，但并非如此；t use React:<p><a href=“https:/；/开发者.mozilla.org//，en-US/文档/：Web/！API/、HTMLObjectElement/…setCustomValidity”rel=“nofollow”>https:ȏ/；developer.mozilla.org；en-US；docs
；Web；API；HTMLObjectE</一blacksmith_tb: My personal bête noire is sites that misuse type=password for 2FA inputs, since that confuses password managers and browsers both.
blacksmith_tb: 我个人讨厌的是滥用type=password进行2FA输入的网站，因为这会混淆密码管理器和浏览器。
unlog: In an all honest reply, is that the people that writes these specifications, live disconnected from the reality, they don't use the stuff they specify. That stuff works for very simple things, but then when your forms evolve you realise you will be better off just writing the whole thing yourself.
unlog: 坦率地说，编写这些规范的人与现实脱节，他们没有；不要使用他们指定的东西。这些东西适用于非常简单的事情，但当你的形式发展时，你会意识到你最好自己写整件事。