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. 在performancepoint里面建立数据源的时候,总是发生以下的报警

    就是我在performancepoint里面建立数据源的时候,总是发生以下的报警.   在管理中心主页的“应用程序管理”部分,单击“管理服务应用程序”,然后单击“PerformancePoint Se ...

  2. Scrapy 框架介绍

    Scrapy 框架 Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. ...

  3. wordcontent小结

    gitee地址: https://gitee.com/yzpdegit/test 问题描述: 计算一个文件中所包含的单词数,字符个数,行数 需求分析: WordCount的需求可以概括为:对程序设计语 ...

  4. LRJ入门经典-0903切蛋糕305

    原题 LRJ入门经典-0903切蛋糕305 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 如图所示有一个矩形蛋糕,上面划分成 ...

  5. CodeForcesGym 100502K Train Passengers

    Train Passengers Time Limit: 1000ms Memory Limit: 524288KB This problem will be judged on CodeForces ...

  6. swift 创建第一个UIAlertView 和UIActionSheet

    //创建 UIActionSheet //一定要指明类型.不编译不通过 func ActionSheet(sender:UITapGestureRecognizer)     {         le ...

  7. Unix/Linux环境C编程新手教程(37) shell经常使用命令演练

     cat命令 cat命令能够用来查看文件内容. cat [參数] 文件名称. grep-指定文件里搜索指定字符内容. Linux的文件夹或文件. -path '字串' 查找路径名匹配所给字串的全部 ...

  8. C/C++(文件操作二)

    二进制读写才是本质 二进制的读写对文件标记不敏感. eg: 对图片进行加密与解密: 用命令的形式去执行: //xx.exe -c src dest 加密 //xx.exe -d src dest 解密 ...

  9. js常用代码示例及解决跨域的几种方法

    1.阻止默认行为 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = ...

  10. Webservice银行报文接口设计

      Preface: 合理的软件架构设计其好处是不言而喻的,系统具有清晰的软件结构,良好的可扩展性,类的职能单一明确,系统的复杂度底.此前的一个实际项目中总结了些关于OO设计的实际应用,主要是围绕'高 ...