Input输入控件的size与maxlength及其disabled与readonly属性的区别

最近在PHP+html5的项目中，忽然意识到常用的限制输入框的两个属性，以前还没有注意到区别，现在测试了一下，区别分析如下
Input的size与maxlength属性的区别
      <div class="control-group">
        <label class="control-label" for="msgid">消息ID</label>
        <div class="controls">
          <input type="text" name="msgid" id="msgid" value="<{$info.msgid}>" required="required" pattern="[0-9]{1,8}" autofocus="autofocus" placeholder="消息ID" /><span class="control-tip">点击 <a style="text-decoration:underline;cursor:poiter;" href="?c=flgamecenter&a=pushadmin" target="_blank">查看</a> 当前消息ID列表 </span>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="msgtitle">消息标题</label>
        <div class="controls">
          <input type="text" name="msgtitle" id="msgtitle" value="<{$info.title}>" required="required" placeholder="消息标题" maxlength="500" />
        </div>
      </div>
分析说明：
maxlength="500",表示的意思是input输入框中最多够输入500个字符。W3C标准指出maxlength规定文本字段中允许的最大字符数。
size="500"，则表示input输入框只显示500个可见的字符，但用户实际可以输入无限多的内容。W3C指出size属性规定输入字段中的可见字符数。
input表单控件的 size 属性是一个可视化的设计属性，在项目中建议使用 CSS 中的width属性来代替它。

令input控件保持不可编辑状态的方法：
1）disabled="true "，文字会变成灰色，不可编辑。规定当页面加载时是否禁用该 input 元素。（不适用于 type="hidden"）。disabled 属性规定应该禁用输入字段。
被禁用的输入字段是无法使用和无法点击的。如果使用该属性，则会禁用输入字段。
可以对 disabled 属性进行设置，使用户在满足某些条件时（比如选中复选框，等等）才能使用输入字段。然后，可使用 JavaScript 来删除 disabled 属性，使该输入字段变为可用的状态。
注释：disabled 属性不适用于 <input type="hidden">。
提示：被禁用的表单元素不会被提交。
2）readOnly="true" ，文字不会变色，也不可编辑。readonly 属性规定输入字段为只读。
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，此时注意JavaScript的驼峰写法应为readOnly，由此即可将输入字段切换到可编辑状态。
注释：不会对只读的输入字段进行验证。