W3C HTML5标准阅读笔记 - button

标准原文: https://www.w3.org/TR/html5/forms.html#the-button-element

HTML5中,button元素用于定义“按钮”,其内容模型("Content Model")为Phrasing content,且其子级元素中不能再出现别的交互性元素。

除了通用属性,button标签还包含一些有趣的特有属性:type、autofocus和disabled等。

type

type属性用于定义button元素的类型,其属性值决定了button元素点击后的默认行为。type属性可使用的值包括:

  • submit。提交按钮,默认值。当button标签位于一个form表单内部时,点击该按钮将对相应的表单进行提交。由于在网页上使用HTML表单来进行提交的操作将导致页面刷新,影响用户体验,因此随着Web的发展,这种做法越来越少。而当button标签不属于任何form时,即使其type属性值为submit,点击该按钮也不会出现任何的默认行为。
  • reset。重置按钮,当button标签位于一个form表单内部时,点击该按钮会使得表单中所有的内容被重置。
  • button。普通按钮,点击button后不会有任何的默认行为。开发时一般会设定该button元素的onclick属性,或者监听其“click”事件,从而在按钮点击后进行相应的操作。在button元素的使用中,type值为button的普通按钮是使用频率最高的,以至于有时会误以为type="button"是默认值,从而造成bug。为避免麻烦,一般建议在使用button元素时,除特殊情况,一律显式声明其type属性值为"button"

autofocus

autofocus为boolean属性。当button元素拥有autofocus属性时,它将在页面打开后自动获取焦点,此时无需使用鼠标,在键盘上敲击回车键即可产生按钮点击的效果。

disabled

disabled也是boolean属性。当button元素拥有disabled属性时,该按钮将处于"不可用"的状态 -- 页面上呈现“灰掉”的效果,且点击后无任何反应。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!