• HTML5新增标签属性


    ----- 新类型表单

    - email
    自动校验输入的是不否是email

    邮箱:<input type="email" name="user_email" />

    - url
    自动将提交数据变为Url

    我的主页:<input type="url" name="user_url" />

    - number
    输入数字

    金额:<input type="number" name="points" min="1" max="100" />

    属性 类型 描述
    ------------------------------------
    max number 最大值
    min number 最小值
    step number 步进修改值
    value number 初始值

    - range
    选择一个范围内的数字,类似滑动条

    <input type="range" name="points" min="1" max="10" />

    属性 类型 描述
    ------------------------------------
    max number 最大值
    min number 最小值
    step number 步进修改值
    value number 初始值

    - Date Pickers
    用于日期选择

    date - 选择 日期、月、年
    month - 选择 月、年
    week - 选择 周、年
    time - 选择 时间(小时、分钟)
    datetime- 选择 时间、日期、月、年(UTC 时间)
    datetime-local - 选择 时间、日期、月、年(本地时间)

    - search
    搜索内容

    <input type="search" name="user_search" />

    - color
    选择一种颜色,以RGB方式记录显示

    颜色:<input type="color" name="user_color" />


    --------- Forms的新属性

    - Autofocus 页面加载后,自动获得焦点
    <input type="search" name="query" autofocus />

    - Placeholder 用于设置示例 值
    <input type="email" name="email" placeholder="xgao@qq.com" />

    - Required 表示该值不能为空
    <input type="text" name="UserName" required />


    --------- 新属性

    属性 值 描述
    ------------------------------------------------------
    autocomplete on/off 是否自动补完这一文本框
    autofocus autofocus 是否自动设置焦点,如果类型是hidden内里不可用
    form 表单名 说明一个文本框属于某一个form
    formaction URL 文本框将要被提交到哪里去
    fromenctype apliction 指定发送的时候的编码方式
    x-www-form-urlencoded multipart
    form-data
    plain
    formmethod post/get 指定提交方式
    formtarget _blank/_self 提交结果显示位置
    _parent/_top
    framename(框架名)
    heigth Pixels/% 设置元素的高度,可用像索和百分比
    width Pixels/% 定义图片的宽度
    list datalist-id 输入选择项
    multiple multiple 允许多项
    pattern 正则表达式 pattern="[0-9]",用正则格式化输入


    --------- 新标签

    - meter 为了显示进度

    <meter value="2" min="0" max="10">输入0到10</meter>
    <meter value="0.6">60%</meter>

    包含属性:Form/High/Low/Max/Min/Optimum/value

    - progress 显示进度条

    <progress value="22" max="100" ></progress>

    - datalist 自动实现下拉选择输入(如百度搜索)
    <input list="cars"/>
    <datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
    </datalist>

    - keygen 加密传输数据

    用户名:<input type="text" name="user_name" />
    Encryption:<keygen name="security" />
    <input type="submit" />

    KeyType属性,rsa 也可以是其它加密方式

    - OutPut 自动提交计算结果

    <input name="a" type="number"> + <input name="b" type="number"> =
    <output name="result" onforminput="value=a.valueAsNumber + b.valueAsNumber"></output>

    ----- 客户端脚本数据校验

    - Require 属性
    <input type="email" name="email" required />

    - checkValidity函数
    <input type="email" name="email" onchange="this.checkValidity();" />

    - setCustomValidity() 自定义函数

  • 相关阅读:
    [Leetcode]@python 76. Minimum Window Substring
    [Leetcode]@python 75. Sort Colors
    HTNL表单
    第二天
    开学心德
    HTML表单
    网页制作
    2nd day
    开课心得
    CF10D/POJ2127 LCIS 题解
  • 原文地址:https://www.cnblogs.com/xgao/p/4200653.html
Copyright © 2020-2023  润新知