zoukankan      html  css  js  c++  java
  • HTML5智能表单

    一、HTML5新增输入类型

      1.新增type类型

        Type=“number” 专门用来输入数字的文本框

        Type=“email” 限制用户必须输入email类型 “@”

        Type=“url” 限制用户必须输入url类型 “http://”

        Type=“range” 产生一个滑动条表单

        Type=“search” 产生一个搜索意义的表单 <input type=”search” name=“name名”/>

        Type=“color” 生成一个颜色选择的表单

        Type=“time” 限制用户必须输入时间类型

        Type=“month” 限制用户必须输入月类型

        Type=“week” 限制用户必须输入周类型

        Type=“datetime-local” 选取本地时间

      2.智能表单类型名词解释

        1)Number:专门用来输入数字的文本框;在提交时会检查其中的内容是否为数字,具有min(最小值)、max(最小值)、step(步幅,数字间隔,创建一系列有效数字)的属性;

          例:<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />

        2)email:专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交;但它不检查email地址是否存在;提交时可以为空,除非加上了required属性;

        3)url:专门用来输入URL地址的文本框;如果该文本框中内容不是URL地址格式的,则不允许提交;

          例:<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>

        4)range:是用来只允许输入一段范围内数值的文本框,它具有min属性与max属性,及step属性,可以指定每次拖动的步幅;

          例:<input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” />

        5)Search:输入的是搜索的关键字,与type=“text” 基本上一样;

        6)Color:用来选取颜色;

        7)(date, month, week, time, datetime, datetime-local)拥有多个可供选取日期和时间的新输入类型;

          date - 选取日、月、年

          month - 选取月、年

          week - 选取周和年

          time - 选取时间(小时和分钟)

          datetime - 选取时间、日、月、年

          datetime-local - 选取时间、日、月、年(本地时间)

          例:<input type=“month” >

    二、HTML5新增元素和属性

      (一)新增元素

        1.output: 定义不同类型的输出,如计算结果的输出,或脚本的输出。

        注:必须从属于某个表单;即,必须将它书写在表单内部;Output标签IE不支持

        Eg:

          <form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">

            <input id="a" type="text" min="0" max="100">

            <input id="b" type="text" value="50">=

            <output id="x" for="a b"></output>

          </form>

        2.对新元素样式的使用:

          跟 input 标签设置样式一样,但是要设置标签中局部的样式不能实现;如改变日历的背景色,颜色框的按钮效果等,这些都不可以实现。

      (二)新增属性

        1.checked="checked"属性:默认选中

         disabled="disabled"属性:禁用

         placeholder属性:文本框处于未输入状态时文本框中显示的输入提示;

         autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得焦点,一个页面只能有一个;

         required属性:验证输入不能为空list属性(结合datalist元素使用);

         autocomplete属性:输入富足和所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能;它的属性值为on/off,on可是显示指定候补输入的数据列表;

         eg:<input type="text" autocomplete="on" name ="greeting">

        2.HTML5增加了大量在提交时对表单及表单元素内容有效性验证的功能

          required属性:可以应用在大多数输入元素上(除了隐藏元素和图片),在提交时如果元素内容为空白,则不允许提交,同时显示提示文字;

          pattern属性:将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式;

            例:<input pattern = “[0-9][A-Z]{3}” title="输入内容:一个数与三个大写字母" placeholder=‘输入内容:一个数与三个大写字母’>

          novalidate属性:取消验证可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证

          Multiple属性:可以输入一个或多个值,每个值之间用逗号分开

            例:<input type=“email” multiple/>还可以应用于file

    Why do you work so hard? Because the things I want to buy are expensive and the places I want to go are far away. The person I like is very excellent.
  • 相关阅读:
    ThreadLocal分析学习
    探究.NET的bin引用程序集运行机制看.NET程序集部署原理
    ASP.NET网页代码模型分析
    JBPM与设计模式之职责链模式
    根据webform页面大小的变化动态调整控件的大小
    jbpm binding类深入解析
    JBPM与软件架构模式之命令模式
    JBPM对象主键生成机制
    主键思维定势导致的惨案
    电脑安装windows server 2008 导致磁盘分区消失解决方法
  • 原文地址:https://www.cnblogs.com/liufuyuan/p/10246286.html
Copyright © 2011-2022 走看看