Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

控件的 required 属性与必填字段样式

  HTML5对表单中的必填项提供了专门的属性required。对标单元素添加这个属性后,在提交表单时会自动验证控件的value是否为空,如果为空则会弹出提示并阻止表单提交。在设计上我们通常对必填字段名加星号,也可以通过这个属性从CSS上实现。
  CSS选择器只提供了向后查询,所以得将LABEL放到INPUT之后才能正确判断LABEL所属的INTPU是否required。我们还要想办法把LABEL放回INPUT的左边,因为在设计上字段名通常都放在控件左边的。当然这是设计上的问题,其实爱放哪儿都行。这里我只是用了float:left将它浮动回去。最后我们给requiredINPUT所属的LABEL添加一个before伪元素并写上星号,这样HTML中就不用再出现碍眼的星号了。 <style>
label {float:left;}
input[required]+label:before {
  content:'*';
  color:red;
  margin-right:5px;
}
</style>
<form>
  <input type="text" id="field" required />
  <label for="field">字段:</label>
  <input type="submit">
</form>
网名:
54.156.92.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^