【问题标题】:How to code the value of input[type="submit"] that validates如何对验证的 input[type="submit"] 的值进行编码
【发布时间】:2013-05-15 13:11:24
【问题描述】:

两个问题

  1. 为表单元素值编码稀有字符的最佳方法是什么?
  2. 下面示例中的分号是导致验证错误还是其他原因?

HTML

<input type="submit" value="&#61442;">

验证错误:

Document uses the Unicode Private Use Area(s), 
which should not be used in publicly exchanged documents. (Charmod C073)

此元素的值导致错误。我需要将此十进制值重新编码为可以呈现我的字形并进行验证的东西。

【问题讨论】:

    标签: html forms validation encoding glyph


    【解决方案1】:
    1. 这并不重要。十进制字符引用和十六进制字符引用都可以正常工作(没有真正的区别)。在 UTF-8 编码的文档中使用这样的字符可能会使代码更具可读性,但编码 必须 是 UTF-8 并且 必须 声明为 UTF-8。对于您正在使用的私有使用代码点,在查看源代码时,程序可能会将其显示为几乎任何内容。私人使用代码点没有明确的含义;将字符分配给这样的代码点取决于相关方之间的协议。而你最喜欢的代码编辑器几乎没有做出这样的约定。

    2. 不,分号是正确的。警告(不是错误消息)不是基于任何 HTML 规范或草案,而是基于称为 CharMod(万维网 1.0 的字符模型:基础)的 W3C 建议。警告指的是那里的 C073 项:“公开交换的内容不应在私人使用区域使用代码点。”

    在实际方面,只要不使用特定的私有编码字体,代码就会失败,例如因为浏览器已设置为忽略网页上建议的字体或字体无法加载。因此,最好使用带有适当alt 文本的图像,使用包含&lt;img&gt;&lt;input type=image&gt;&lt;button&gt;

    【讨论】:

    • 图片也会失败,如果它无法加载,如果用户禁用了图片(就像我在手机上这样做以节省昂贵的带宽),或者如果盲人访问你的网站。此外,图像比字体大,并且(因为 SVG 支持正在下降)也不能缩放。将字体用于社交图标链接已成为当今的事实标准。需要更新规格以允许此用途。
    【解决方案2】:

    为表单元素值编码稀有字符的最佳方法是什么?

    纯 UTF-8。它生成最易读的源代码并使用最少的字节。

    下例中的分号是导致验证错误还是其他原因?

    不,这是角色的选择。它不是 unicode 标准的一部分。详情请见wikipedia

    【讨论】:

    • 谢谢。有一些解决方法吗?此字符用于图标字体。我需要找到一些方法可以继续使用这个字符,在表单中使用它并让它验证?
    • 我希望不会。当我尝试使用它时,它呈现为不可打印的字符,因此我假设您依赖于使用通过 CSS 应用的特定字体的浏览器。这是一个糟糕的主意(阅读this)。如果您想在提交按钮中添加图标,请使用&lt;button type="submit"&gt;&lt;img src="icon.png" alt="sensible alternative text"&gt;&lt;/button&gt;
    • 好的,谢谢昆汀。我对渐进增强很熟悉,并不仅仅依赖于角色来传达功能,但是您的答案的完整性非常好。
    • 私人使用代码点 Unicode 标准的一部分。但标准没有,也永远不会分配任何角色给他们,让他们成为私人游戏的游乐场。
    • 通过css使用图标字体是很正常的事情
    【解决方案3】:

    这是对TeamTreeHouse 上相关问题的略微细微的回答,其中导航菜单中使用的图标验证器失败(这也是我的情况)。

    我不会太担心这个,因为它是一个警告而不是一个 错误。如果图标是这样,我会保留分号 文档建议(看起来您正在使用 IcoMoon?)。

    IcoMoon对使用Private Use Area的解释是:

    不建议对图标字体使用拉丁字母。使用 Unicode 的私人使用区域是图标字体的最佳选择。经过 使用 PUA 字符,您的图标字体将与屏幕兼容 读者。但如果您使用拉丁字符,屏幕阅读器可能会读取 单个含义较少的字母,这会令人困惑。

    这里是一些人争论它是否好用或 不是。

    数百个站点站点使用来自 IcoMoon 的代码没有问题。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-09-07
      • 1970-01-01
      • 1970-01-01
      • 2015-11-14
      • 1970-01-01
      • 2018-01-08
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多