input标签

在html的所有标签里，input可以说是最麻烦的一个，首先就是它有多种不同的类型（type），其次：其中的不分类型不能很好的支持部分样式的控制，所以在我们具体使用的时候往往比较麻烦，着这里就详细的解释下input的属性，类型，用法，样式控制以及使用场景。

第一种：type="text"

示例代码：

 

在IE8下截图

长宽各比规定的多2px。

在FF、Chrome于Safari下为202*34px。高度多2px。浏览器默认padding:1px 0;

IE6、IE7遨游与Opera下与IE8相同。浏览器默认padding:1px;

在css中加入通配符控制*{margin:0;padding:0;}之后，各个浏览器的显示效果兼容统一。这是input的所有类型中最常用的type。也就是文本输入框，在注册信息，填写登陆用户名等场景非常常用。

第二种：type="password"

这种类型使用方法同上一个，与text的不同时在输入文字的时候显示出来的是圆点。在我们输入用户密码的时候就是用个这种类型。

第三种：type="checkbox"

苹果
橘子
香蕉
葡萄

注意这里的name属性，checkbox是复选框。在相同name的选项中，可以选择多个，各个浏览器对checkbox的样式属性不能很好的兼容，如下：

示例代码：

苹果
橘子
香蕉
葡萄

在IE内核的浏览器中（IE6、7、8、遨游）效果如下：

Chrome、FF、Safari下的效果如下：

Opera下的效果如下：

从上面的显示效果我们可以看出，站在浏览器兼容的角度，我们并不能设置checkbox的大小和边框，然而在不考虑opera兼容的情况下，我们可以尝试用设置height的方法来调节checkbox上下方向的位置。但在实际应用中，我们更多的会用margin或者padding。

对于checkbox，我们还常用它的一个属性 checked。也就是默认选中的属性。

第四种：type="radio"

radio和checkbox的不同之处在一个是多选，另一个是单选。各个浏览器支持上大同小异。不赘述。要格外注意的就是name属性的设置。在相同name的radio中，只能选一个。

第五种：type="button"

有多年前端经验的老人对这个属性一定很熟悉，因为那时候的按钮清一色是button，而现在大部分已经使用a标签通过css控制样式来做更漂亮的按钮。

实例代码：

效果如下：

第六种：type="submit"

submit是用来提交form表单的，现在很多时候我们都是用Ajax提交，所以它的用武之地也越来越少了。也是button一样是按钮的样子，值得注意的是：submit在不设置value的时候，各个浏览器会有一个默认的value值，为了统一效果，只要设置一个value就可以。

第七种：type="reset"

同上一个

第八种：type="hidden"

是一个隐藏的input，使用的情况较少，通常在比较复杂的js里用来暂存数据。

 

 

所有类型的input都支持disabled属性，即不可修改。