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. window下搭建Vue.Js开发环境

    一.安装node.js.https://nodejs.org/en/download/ 最新包会自动安装npm 二.安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度 ...

  2. 进阶《Python高性能编程》中文PDF+英文PDF+源代码

    入门使用高性能 Python,建议参考<Python高性能编程>,例子给的很多,讲到高性能就会提到性能监控,里面有cpu mem 方法的度量,网络讲了一点异步,net profiler 没 ...

  3. Django_视图操作

  4. PHP获取文件大小

    通过filesize函数可以取得文件的大小,文件大小是以字节数表示的. $filename = '/data/webroot/usercode/code/resource/test.txt'; $si ...

  5. Linux下yum安装ffmpeg和使用

    本文属于转载文章:转载地址是http://www.cnblogs.com/dennisit/archive/2012/12/27/2835089.html 使用Yum安装ffmpeg 打开 vi /e ...

  6. web——前后端通信

    前端向后台传输数据: 传输方法:post  get 区别: (1)get:用于从服务器获取数据,将参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看 ...

  7. C#中一些字符串操作的经常使用使用方法

    概述 本篇主要解说,字符串string的基本操作知识 倒序输出 string str = Console.ReadLine(); for (int i = str.Length - 1; i > ...

  8. 9.Nexus私服安装配置

    第一步:下载nexus-webapp-1.9.2.4.war包,然后复制到tomcat下的webapps文件夹中 第二步:启动tomcat 第三步:訪问http://localhost:8080/ne ...

  9. 20160227.CCPP体系具体解释(0037天)

    程序片段(01):01.一对一模式.c+02.中介者模式.c+03.广播模式.c 内容概要:事件 ///01.一对一模式.c #include <stdio.h> #include < ...

  10. Python!Are you kidding me?

    前几天由于python给我带来了兴奋写了一篇文章叫做<The beauty of python 1>,今天则是由于一个小错误而写下此文. 也是缘因为我的工作,问题是这种: 我有一个文档.里 ...