【表單設計】input的size和maxlength屬性

一、示例代碼：

<!--用戶名長度限制爲最多8位-->
<p>用戶名：<input  type="text" maxlength="8"placeholder="密碼/郵箱"></p>
<p>用戶名：<input  type="text" size="8" placeholder="用戶名/郵箱"></p>

二、區別：

maxlength="8"：input輸入框中只可以輸入8個字符，輸入8個字符後再不能輸入，即最大輸入字符長度（中文也算一個字符長度）；

size="8"：表示input輸入框只顯示8個可見的字符，但能夠輸入無數多字符內容，即size屬性規定輸入字段的寬度。

size 屬性規定輸入字段的寬度。

對於 <input type="text"> 和 <input type="password">，size 屬性定義的是可見的字符數。而對於其餘類型，size 屬性定義的是以像素爲單位的輸入字段寬度。

三、總結：

從文檔結構語義化與樣式分離原則來看，因爲 size 屬性是一個可視化的設計屬性，所以咱們應建議使用 css中的width來代替它。

css 語法：

<input style="width:100px">