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. [Chromium文档转载,第004章]Mojo Synchronous Calls

    For Developers‎ > ‎Design Documents‎ > ‎Mojo‎ > ‎ Synchronous Calls Think carefully before ...

  2. ES6学习笔记(五)函数的扩展

    1.函数参数的默认值 1.1基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console. ...

  3. php自定义加密和解密

    <?php function _authcode($string, $operation = 'DECODE', $expiry = 0) { $key = 'c5s1t6o';    $cke ...

  4. 在idea 中使用try catch

    ctrl+alt + t 选中代码,按快捷键可直接try catch 此段代码

  5. POJ——T 3067 Japan

    http://poj.org/problem?id=3067 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 29474   ...

  6. C++虚表的原理,很好

    下面这篇文章讲的很好. http://www.cnblogs.com/lihaosky/articles/1606502.html 假设我们有这样的一个类: class Base { public: ...

  7. 记真实自己,炫精彩人生---《爱记》app使用体验

    真的有款神器吗,能找到合适的Ta,能秀出自己的新生活,能让自己的心情舒爽,有,体验了下.就是爱记.果粉的福利. [爱记]是集心情记录.分享.评价与交流于一体的工具,TA是你心灵休憩的港湾,也是你记忆放 ...

  8. mysql_jdbc

    package com.lovo.day18_jdbc1; import java.sql.Connection; import java.sql.DriverManager; import java ...

  9. uva103 - Stacking Boxes(DAG)

    题目:uva103 - Stacking Boxes(DAG) 题目大意:给出N个boxes, 而且给出这些箱子的维度.要求找一个最长的序列.可以使得以下的箱子一定可以有个维度序列大于上面的那个箱子的 ...

  10. js---05 自定义属性

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...