input 和 button元素 作为提交重置按钮功用的区别。

Posted 河泽而渔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input 和 button元素 作为提交重置按钮功用的区别。相关的知识,希望对你有一定的参考价值。

首先,input元素和button元素 都是可以作为普通按钮、提交按钮、重置按钮的。

<input type="button" value="button">
<input type="submit">
<input type="reset">
input元素默认 text类型
<button type="button">button</button>
<button type="submit">submit</button>
<button type="reset">reset</button>
button元素默认 submit类型。

其次,我们来看效果

看起来,好像是input类型的占位稍微多点,其实这是由于中英文字 占距 不同导致的,说到这就要讲一下 。

input除了button类型需要设置value属性之外。submit和reset都不需要,浏览器会默认配置,这里配置的是中文。
而button则必须手动配置。

最后,如何选择?

 建议 使用button,因为一来 从开发角度讲,标签的语义化 越来越被提倡,input语义是输入,button语义是按钮,重置、普通按钮、提交都是 按钮功能。

二来,我们一般 需要自定义文字标识,不能依靠浏览器,特别是浏览器版本不一,设置统一的文字更加 有利于 界面的稳定。 

以上是关于input 和 button元素 作为提交重置按钮功用的区别。的主要内容,如果未能解决你的问题,请参考以下文章

jQuery小知识2

表单学习心得

表单校验及正则表达式

HTMLHTML 表单 ② ( 按钮表单 | 普通按钮 | 提交按钮 | 重置按钮 | 图片按钮 | 文件域 )

表单和变形

表单校验及正则表达式