HTML中的input标签可是很常用的。

HTML本身也非常简单,就是若干标签,每个标签有若干属性。

我在学习HTML的过程中,也没有太过重视。

今年,在写前端表单验证的时候,发现maxlength这个属性很好用。

实际需求

前端的表单,需要进行验证。

结合JS表单验证框架,写了很多前端验证的代码。

其中,有这么一个需求:用户最多只能输入10个字符。

按照惯性,肯定是会去写JS表单验证了。

实际上,根本没有必要。

HTML中的maxlength属性就可以很简单地解决这个问题。

<input type="text" size="10" maxlength="10" />

通过这个很简单的属性设置,用户能够输入的字符就是10。前端,根本不需要再去验证。

观点结论

这个属性很简单,但是可以节省不少时间。

这个实际案例提醒我们,不要被自己的习惯误导了。

很多问题存在着简单的解决方法,不要把简单的问题用复杂的方法解决了。

切记!

原文链接http://blog.fansunion.cn/articles/3509(小雷博客-blog.fansunion.cn)

HTML中input标签maxlength属性的妙处的更多相关文章

  1. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  2. Spring中bean标签的属性和值:

    Spring中bean标签的属性和值: <bean name="user" class="com.pojo.User" init-method=" ...

  3. 关于django中input标签中file类型以及开路由

    0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...

  4. Html中input标签的使用

    1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容 在input里添加属性值 readonly 3.防止退后清空的TEXT ...

  5. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...

  6. 关于input标签checkbox属性 和checked

    我们设置了type的属性为checkbox时,记住以下3个关键点 1.点勾选时或者说点击时,checked为选中,在input标签中是checked=“checked”,注意这里面无论checked= ...

  7. html5中 input的pattern属性 和 details/summary元素

    html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...

  8. html中各种标签和属性(最基础的基本都有)

    1.标题标签: h1~h6  ctrl+1~6 2.段落标签: p      ctrl+shift+p 3.换行标签: br     shift+回车 4.水平线:   hr 5.加粗标签: stro ...

  9. 前端 html input标签 placeholder属性 标签上显示内容

    前端 html  input标签 的placeholder属性  标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. 外部数据库驱动程序XX中的意外错误

    链接EXCEL打开报错 代码如下(Excel2003版本)出现这种错误 现在只需要更改 修改成 并且把导入版本修改

  2. ES6学习笔记(十)代理器Proxy

    Java可以使用面向切面(AOP)的方法来实现某些统一的操作,比如某个操作的前置通知,后置通知等等,这种操作非常方便,其本质便是动态代理,JS的代理Proxy代理该如何使用呢? 某位大神的实现如下: ...

  3. 【RHEL7/CentOS7网络配置】

    目录 网卡配置文件 查网卡信息 测试网络是否正常 使用 nmtui 命令配置网络 使用 nm-connection-editor 工具配置网络 修改回6.x版本的网卡名 Rhel/CentOS网络配置 ...

  4. 【Codeforces Round #424 (Div. 2) C】Jury Marks

    [Link]:http://codeforces.com/contest/831/problem/C [Description] 有一个人参加一个比赛; 他一开始有一个初始分数x; 有k个评委要依次对 ...

  5. 为线程绑定CPU

    // learn gcc atomic variable #define _GNU_SOURCE #include <stdio.h> #include <stdlib.h> ...

  6. Json技术

    JSON语法是一种用于传输和生成数据的协定,很类似于C家族的语言,所以很容易被C家族的语言所解析.对象:对象包含再{}之间属性:采用Key-Value对来表示.属性之间使用逗号分开.  string ...

  7. POJ 1474 Video Surveillance 半平面交/多边形核是否存在

    http://poj.org/problem?id=1474 解法同POJ 1279 A一送一 缺点是还是O(n^2) ...nlogn的过几天补上... /********************* ...

  8. lunix 命令积累

    .修改文件的拥有者 chown 用户:用户 文件 .切换账号 su 账号 . 追踪路由信息 traceroute 主机名

  9. double 失真例子

    public static void main(String[] args) {  // TODO Auto-generated method stub  double ab=821.20;  dou ...

  10. 团队作业-Beta冲刺(2)

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...