文本输入框min/max属性不生效如何修复？需配置消息输入框50列5行

Message输入区域设置50列、5行尺寸的实现 #

当前代码里的Message输入使用单行<input type="text>组件，这类组件天生仅支持单行展示，无法实现5行的输入高度，必须替换为多行输入组件textarea才能满足业务要求：

• textarea 自带原生尺寸配置属性：cols 控制输入区的可视文本宽度（对应列数要求），rows 控制输入区的可视文本高度（对应行数要求）
• 原Message位置的input代码可直接替换为：<textarea id="Message" name="Message" cols="50" rows="5"></textarea>

min、max配置不生效的原因和修复 #

失效核心原因 #

HTML中的min、max属性是专门为数值类、时间类输入控件设计的（比如数字输入框、日期选择器、滑块组件），作用是限制可选数值/时间的范围。将这两个属性配置在type="text"的普通文本输入框上时，浏览器完全不会识别对应的校验规则，配置自然无法生效。

正确的文本长度限制写法 #

如果需要给文本输入框设置输入长度限制，应当使用专门适配文本场景的minlength、maxlength属性，这两个属性分别对应最少输入字符数、最多输入字符数的校验规则。

• 原Full name输入框上的width="50" min="1" max="15"均为无效配置：width不是input的原生可用属性，min/max对文本输入不生效，仅size属性是用于控制单行输入框宽度的有效配置
• 修复后的Full name输入框代码为：<input type="text" id="Fullname" name="Fullname" size="50" minlength="1" maxlength="15">

其他代码结构修正 #

• 原代码第一行表格单元存在多余的闭合标签，会打乱表格渲染结构，需要删除：

<!-- 错误结构 -->
<tr>
  <td class="bold"> Full name</td>
  <td> <input ...> </td>
  </td> <!-- 多余的闭合标签，直接移除即可 -->
</tr>

• 当前两个按钮均配置为type="submit"，如果需要让后端区分提交触发源，需要为按钮补充对应的name属性，否则后端无法识别是点击Send还是Delete触发的表单提交。

内容的提问来源于stack exchange，提问作者Farzona123