HTML表单select与checkbox的value属性是否支持非拉丁字符？

是否推荐将value属性与页面展示文本设为一致？ #

这个问题没有统一答案，完全取决于你的业务场景：

• 如果表单提交后，你需要直接将返回的value值展示给用户，且没有多语言切换、后续修改选项文案的需求：推荐二者完全一致。就像你遇到的第二个选项的问题，用无意义的编码值当value，直接展示给用户完全无法理解，还要额外开发映射转换逻辑，属于多此一举。
• 如果有以下任意一种场景，不推荐二者一致：
  • 后续可能修改选项的展示文案，比如把“Deluxe Book First Edition”改成“首版精装书”，如果value用的是展示文本，之前存在数据库里的历史数据就会和新的文案无法匹配
  • 后端需要用value做逻辑判断、关联数据库主键等操作，稳定不可变的编码值（比如option_select_001）比可能修改的展示文本更可靠
  • 站点需要适配多语言，同一个选项在不同语言下展示文案不同，用统一的语义化标识当value可以避免多语言适配的逻辑混乱

HTML的value属性支持的字符范围？ #

首先明确结论：不管是<option>的value属性，还是checkbox、radio等<input>元素的value属性，HTML规范都允许使用任意Unicode字符，没有限制只能用拉丁/扩展拉丁字符，中文、 emoji、阿拉伯文、西里尔文等所有语言的字符都可以正常使用。
你测试的“Canción en español”能正常运行不是偶然，只要满足两个前提就不会出问题：

1. 你的页面明确设置了UTF-8编码，也就是<head>里有<meta charset="UTF-8">声明，保证浏览器提交表单的时候用UTF-8编码传输value值
2. 后端接收、解析、存储表单数据的时候，统一使用UTF-8编码，不会出现编码转换导致的乱码

如果你的业务系统里有老的组件、数据库只支持ASCII字符，那你就需要把非ASCII的value转成编码值使用，除此之外的常规场景都可以放心使用任意字符作为value。

内容的提问来源于stack exchange，提问作者limakid