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 就會失效.