1. 首页
  2. IT资讯

前端开发必须理解的知识点——HTML5新表单

“u003Cdivu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F31fd0000a9754b3d55b8″ img_width=”335″ img_height=”476″ alt=”前端开发必须理解的知识点——HTML5新表单” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E在前面学习了HTML5的基础新元素,接下来小编将继续分享HTML5必学的知识点–HTML5新表单u003Cbru003Eu003Cu002Fpu003Eu003Cpu003E在开始之前,先来了解一下HTML5的声明,<!doctype html>,通过HTML的声明,体现W3C故意弱化HTML的版本,但是小标要说明下版本不更新,不等于内容不更新,而是W3C希望HTML5是融合版本。u003Cu002Fpu003Eu003Cpu003E关于HTML的发展历史, HTML的规范不严格一直以来就是前端开发人员头疼的地方, 元素定义大小写不敏感。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F32070001651cde479581″ img_width=”567″ img_height=”349″ alt=”前端开发必须理解的知识点——HTML5新表单” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E直到XHTML 1.0的出现 – 前端开发人员拥抱,因为此时的HTML只允许小写u003Cu002Fpu003Eu003Cpu003EXHTML 2.0版本出现后 – 前端开发人员重新回到HTML, 推翻了之前很多习惯u003Cu002Fpu003Eu003Cpu003EHTML 4版本出现之后 – 比较好的版本u003Cu002Fpu003Eu003Cpu003EHTML 5版本出现 – 经历8年后,终于在2014年10月底发布u003Cu002Fpu003Eu003Cpu003EHTML5的特点:移动端浏览器相比PC端浏览器对H5的支持更好,这要感谢苹果公司 – 乔布斯u003Cu002Fpu003Eu003Cpu003E小编提醒大家:目前网上所谓的H5,并不是指现在所学HTML5技术,HTML5的新特性内容不多,与JS(难)配合使用u003Cu002Fpu003Eu003Cpu003E那么实际工作中使用多不多?其实实际上来说,相对并不多u003Cu002Fpu003Eu003Cpu003E其实就是在为将来学习 – HTML5将来一定是主流。u003Cu002Fpu003Eu003Cpu003E*******华丽分割线*******u003Cu002Fpu003Eu003Cpu003E接下来开始学习,HTML5必学知识点—新表单,主要从4个方面入手:新类型、新元素、新属性、新验证u003Cu002Fpu003Eu003Ch1u003E首先是INPUT新类型,新增了以下类型:u003Cu002Fh1u003Eu003Cpu003E1.email类型 – 判断字符串中是否包含”@”符号,注意的是不能以”@”开始、不能以”@”结束u003Cu002Fpu003Eu003Cpu003E2.搜索类型 – searchu003Cu002Fpu003Eu003Cpu003E3.URL类型 – 判断字符串中是否包含”http:”,注意的是以”http:”开始,验证通过,以”http:”结束,验证通过u003Cu002Fpu003Eu003Cpu003E4.电话号码类型 – tel,注意的是只有在手机端浏览器访问时有效果u003Cu002Fpu003Eu003Cpu003E5.数字类型 – number,需要注意的是允许输入非数字内容,但是不允许提交,在设置min和max时,允许输入范围外的值,不允许提交;这个类型有一些属性: min – 设置数字的最小值;max – 设置数字的最大值;step – 设置步长,每次增加或减小的量值u003Cu002Fpu003Eu003Cpu003E6.范围类型 – range,效果就是滑动条,属性:min – 最小值、max – 最大值、step – 步长、value – 当前值u003Cu002Fpu003Eu003Cpu003E7.颜色类型 – coloru003Cu002Fpu003Eu003Cpu003E8.日期类型 – date,日期格式 – yyyyu002FMMu002Fddu003Cu002Fpu003Eu003Cpu003E9周、月份类型 (实际很少使用)u003Cu002Fpu003Eu003Cpu003E10周 – week(实际很少使用)u003Cu002Fpu003Eu003Cpu003E11月份 – month(实际很少使用)u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F320b000274dc7f415fb0″ img_width=”480″ img_height=”270″ alt=”前端开发必须理解的知识点——HTML5新表单” inline=”0″u003Eu003Cu002Fpu003Eu003Ch1u003E第二部分是表单新元素u003Cu002Fh1u003Eu003Cpu003E1.<datalist>元素,用法:需要配合input元素使用,在input元素中定义list属性(值为datalist元素的id值),好处就是数据与结构的分离u003Cu002Fpu003Eu003Cpu003E2.<progress>元素,就是实现一个进度条,属性有:max – 设置进度条的最大值、value – 设置进度条当前的值u003Cu002Fpu003Eu003Cpu003E3. <meter>元素,用法和<progress>元素类似,作用 – 刻度,属性包括:min和max – 设置最小值和最大值、 value – 表示当前值,high和low – 设置预警值(举个常见的例子,当你手机的电量小于10%时候,一般会显示红色的一小段进度)u003Cu002Fpu003Eu003Cpu003E4.<output>元素,和<input> 输入框正好相反,<output>是输出框,属性:for指定要输出的元素进行关联(实际开发中,很少使用)u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F31fd0000aa654cf36495″ img_width=”678″ img_height=”452″ alt=”前端开发必须理解的知识点——HTML5新表单” inline=”0″u003Eu003Cu002Fpu003Eu003Ch1u003E第三部分是表单新属性u003Cu002Fh1u003Eu003Cpu003E1.placeholder属性:就是实现input输入框的默认提示信息,相比value属性值更好用。这个在实际开发过程中非常常见u003Cu002Fpu003Eu003Cpu003E2.autofocus属性:就是自动获取焦点、用法有点不同,它不是key=vlaue的形式,而是直接只定义属性名(没有属性值)u003Cu002Fpu003Eu003Cpu003E3.multiple属性:就是允许输入框输入多个值,用法和autofocus一样只定义属性名(没有属性值)u003Cu002Fpu003Eu003Cpu003E4.form属性(实际开发中用到不多):就是表单元素定义在表单之外,用法 – 值是相关表单的id属性值u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F320900019b3f6eae8159″ img_width=”634″ img_height=”258″ alt=”前端开发必须理解的知识点——HTML5新表单” inline=”0″u003Eu003Cu002Fpu003Eu003Ch1u003E第四部分是表单新验证(这是一个难点,也是重点)u003Cu002Fh1u003Eu003Cpu003E1.验证属性:u003Cu002Fpu003Eu003Cpu003Erequired属性即:验证是否为空?返回false,表示当前元素值为空, 返回true,表示当前元素值不为空u003Cu002Fpu003Eu003Cpu003Epattern属性即:验证正则表达式,定义正则表达式时,不能添加”u002Fu002F”, 正则表达式不能验证是否为空u003Cu002Fpu003Eu003Cpu003Emin和max属性即:验证最小值和最大值 ,只和number类型的input元素配置使用u003Cu002Fpu003Eu003Cpu003Eminlength和maxlength属性即:验证最小长度和最大长度,minlength – 验证最小长度,maxlength – 限制最大长度(输入内容的长度不能大于maxlength的值)u003Cu002Fpu003Eu003Cpu003Evalidity属性即:HTML5提供表单验证的接口,通过该属性得到validityState对象,该对象提供一系列的有效状态, 有效状态可用于表单验证,得到validatyState对象,elem.validaty – 得到该对象u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F31f60001bd06c2caaf23″ img_width=”505″ img_height=”300″ alt=”前端开发必须理解的知识点——HTML5新表单” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E2.有效状态u003Cu002Fpu003Eu003Cpu003Evalid – 返回Boolean,表示验证是否通过,true – 表示验证通过, false – 表示验证失败,u003Cu002Fpu003Eu003Cpu003EvalueMissing – 表示值是否为空,返回值true – 表示元素值为空(错误)、false – 表示元素值不为空(正确) 注意该状态配合required属性使用u003Cu002Fpu003Eu003Cpu003EtypeMismatch – 表示元素类型是否匹配,返回值true – 表示元素类型不匹配、false – 表示元素类型匹配、 该状态配合email、url、number等使用u003Cu002Fpu003Eu003Cpu003EpatternMismatch – 表示正则表达式是否匹配、返回值true – 表示正则表达式不匹配、false – 表示正则表达式匹配,该状态配合pattern属性使用u003Cu002Fpu003Eu003Cpu003EtooLong – 表示元素内容长度是否过长,返回值true – 表示元素内容长度过长,false – 表示元素内容长度不长,该状态配合maxlength属性使用u003Cu002Fpu003Eu003Cpu003Emaxlength属性 – 限制属性,tooLong可能不会出现(完整性)u003Cu002Fpu003Eu003Cpu003ErangeUnderflow – 表示元素值是否小于min值,返回值true – 表示元素值小于min的值,false – 表示元素值不小于min的值 该状态配合min属性使用u003Cu002Fpu003Eu003Cpu003EstepMismatch – 表示元素值与step值是否不符,返回值true – 表示元素值与step值不符,false – 表示元素值与step值相符 该状态配合step属性使用u003Cu002Fpu003Eu003Cpu003EcustomError – 自定义错误,配合setCustomValidity()方法使用,作用就是替换之前的判断表达式,自定义错误提示信息setCustomValidity(自定义错误信息),一旦调用该方法,默认认为就是错的,上述所有的有效状态返回错误值 验证正确时,调用该方法,将错误信息置为空u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:前端开发必须理解的知识点——HTML5新表单

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11272.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code