Html 为什么只读输入字段无效

考虑以下html：

<input bar value="bar">

<input foo readonly value="foo">

这是怎么回事？我该如何解决这个问题呢？

根据

这意味着，只读输入既无效也无效

下面是一些演示它（）的代码：

HTML:

<input type="email" value="invalidemail">
<input type="email" value="valid@e.mail">

<input type="email" readonly value="invalidemail">
<input type="email" readonly value="valid@e.mail">

---

非常感谢，现在它更有意义了：）我已经对JSFIDLE进行了一些更新，使其更加形象化！

<input type="email" value="invalidemail">
<input type="email" value="valid@e.mail">

<input type="email" readonly value="invalidemail">
<input type="email" readonly value="valid@e.mail">

input:invalid {
    background-color: red;
}
input:valid {
    background-color: green;
}