Input的size,width,maxlength属性

INPUT元素是页面设计的最基本的元素之一，是FORM表单的组成部分，也可以单独使用。是用户交互必不可少的元素。

对于INPUT的布局，可能会出现在某些浏览器下正常，在某些浏览器中杂乱的现象：无缘无故的换行了- -！，曾经为此事甚感头疼。

造成布局问题的最直接的一个原因，往往是宽度高度设置的不合理导致的。更有甚者，是不设置高度，因为 INPUT 的size属性，也会影响它的宽度，所以，有的人往往只设置 size，不设置width，孰不知，因小而见大，一个不小心，就会出现布局的混乱。

size属性到底是？

当INPUT元素的“type”属性值为“text”（文本框）或“password”时（密码框），“size” 属性可以使输入框的宽度能够显示指定数目的字符。

而在 HTML4.01 中，对size的解释是：
size 属性告诉用户端其初始宽度，宽度以 ‘px’ 的形式给出，除非 INPUT 的 type 属性值是 “text”/“password”，那两种情况下，size 的属性值代表 INPUT 可容纳字符的个数。

既然，INPUT 是文本框和密码框的时候表示的是字符个数，那么，通过设置 size 所影响的 INPUT 元素的宽度，是不是会受字体宽度的影响呢？如果你有这一层想法，那就恭喜你了。

既然讲到字体宽度，就应该想到字体的默认类型。

各浏览器中的INPUT[type=”text”/”password”]默认字体类型

字体的默认样式在IE中是受页面编码影响的，在其他浏览器中则直接受浏览器语言版本的影响（本文提及的浏览器均为简体中文版）。大家可以通过开发工具查看默认字体。

测试

我们可以通过测试来看一下，在相同的字体和字体大小下，排除INPUT的padding和margin以及border的影响，各浏览器中INPUT的宽度大小。

HTML code

<style>
    input {
       font: 12px Simsun;
       margin: 0;
       padding: 0;
       border: 0;
    }
</style>
<script>
    window.onload = function() {
       var info = document.getElementById("info");
       info.innerHTML = document.getElementById("in1").clientWidth+"px";
    }
</script>
<input size="12" type="text" id="in1">
<div id="info"></div>

在各个浏览器中，值：

将字体 “Simsun” 改为“Arial”，后：

可见，即使在字体的大小和类型相同的条件下，INPUT的宽度还是有差异的。

用size代表宽度，会引起兼容性问题，再加上 INPUT本身的padding margin什么的差异，就更会影响了，所以，建议不要使用size设置宽度，最好使用 width来代替。

<p>Name: <input type="text" name="fullname" maxlength="5" /></p>
<p>Name2: <input type="text" name="fullname" size="5" /></p>
maxlength="5",则input输入框中只能够输入5个字符<br/>
size="5"，表示input输入框只显示5个可见的字符，但你可以输入'无数'多字符内容<br/>
即：size属性规定输入字段的宽度(此处即是Name2文本框只显示5个字符大小的宽度)，<br/>
由于 size 属性是一个可视化的设计属性，我们应使用 CSS 中的width来代替它。另外如果设置了size ,width 就会失效.

来源：https://www.cnblogs.com/mguo/archive/2013/03/25/2980654.html

标签

input

padding