H5表单新增属性

本文详细介绍了HTML5新增的多种表单输入类型,包括email、url、number、range、date、search、color等,以及如何在实际中应用这些类型进行输入控制和验证。同时,文章还介绍了H5的表单元素如datalist、keygen、output以及新的表单属性如autocomplete、novalidate等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

H5新的Input类型

H5新增了多个新的表单输入类型。这些类型提供了更好的输入控制验证

这些类型包括:

  • email
  • url
  • number
  • range
  • Date picker(date, month, week, time, datetime, datetime-local)
  • search
  • color

浏览器支持(w3c上图片,不太准确)

image.png

注释: Opera对新的输入类型的支持最好。不过也已经可以在所有主流的浏览器中使用。即使不被支持,仍然可以显示为常规的文本域。


实际使用
  1. email
    提交时会校验内容是否是正确的邮箱格式

  2. url
    在提交表单时,会自动验证 url 域的值。

  3. number
    number 类型用于应该包含数值的输入域。还能设置输入数字的范围

      Points: <input type="number" name="points" min="1" max="10" />
    

    只可输入数字,输入其他字符被清空。 若超出范围,在提交表单时会给出相应提升

    属性描述
    maxnumber规定允许的最大值
    minnumber规定允许的最小值
    stepnumber规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)
    valuenumber规定默认值
      <input type="number" name="points" min="0" max="10" step="3" value="6" />
    

    value=“6” 控制着 input的初始值,此次直接提交,不会有限制,若改动了input的值,提交时会限制数值
    内容为 : [0, 3, 6, 9] 中的一项

  4. range
    range 类型用于应该包含一定范围内数字值的输入域。
    range 类型显示为滑动条。
    还能够设定数字的限定:

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

    效果:

    效果

  5. Date Pickers(日期选择器)
    HTML5 拥有多个可供选取日期和时间的新输入类型:

    • date - 选取日、月、年
    • month - 选取月、年
    • week - 选取周和年
    • time - 选取时间(小时和分钟)
    • datetime - 选取时间、日、月、年(UTC 时间)
    • datetime-local - 选取时间、日、月、年(本地时间)
  6. search
    search 类型用于搜索域,比如站点搜索或 Google 搜索。
    search 域显示为常规的文本域。


H5 新的表单元素

HTML5 拥有若干涉及表单的元素和属性。

  • datalist
  • keygen
  • output

浏览器支持性

Input typeIEFirefoxOperaChromeSafari
datalistNoNo9.5NoNo
keygenNoNo10.53.0No
outputNoNo9.5NoNo
  1. datalist 元素

datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
	<option label="W3School" value="http://www.w3school.com.cn" />
	<option label="Google" value="http://www.google.com" />
	<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

元素的list属性需要与元素的id对应


H5 表单属性

新的 form 属性:

  • autocomplete
    自动完成, 重新加载网页时,记录先前输入的值
  • novalidate
    属性规定在提交表单时不应该验证 form 或 input 域

新的 input 属性:

  • autocomplete
  • autofocus
    自动获取焦点
  • form
    设置input所属的from,该input可以不在内
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
    重写(重新设置)form的相关属性
  • height 和 width
    只对input type=“image” 类型生效
      <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
    
  • list
  • min, max 和 step
    min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
  • multiple
    multiple 属性是一个 boolean 属性.
    multiple 属性规定 元素中可选择多个值。
    注意: multiple 属性适用于以下类型的 标签:email 和 file:
  • pattern (regexp)
  • placeholder
  • required
    规定必须在提交之前填写输入域(不能为空)。
<think>嗯,用户让我介绍一下HTML5的新增特性。首先,我需要回忆一下HTML5的主要更新内容,确保信息准确。HTML5是在2014年正式发布的,作为HTML的第五次重大修订,带来了很多新功能和改进。 首先,我应该分几个大类来组织内容,这样结构清晰。常见的分类包括语义化标签、多媒体支持、图形与动画、本地存储、Web性能、表单增强、API支持以及兼容性和标准化。 语义化标签是HTML5的重要部分,比如header、footer、article这些标签,它们帮助搜索引擎和屏幕阅读器更好地理解页面结构。然后是多媒体的支持,比如video和audio标签,之前需要Flash,现在原生支持了。 图形和动画方面,canvas和svg的支持,尤其是canvas可以用来做游戏或者数据可视化。本地存储部分,localStorage和sessionStorage比cookie更好用,存储容量更大,还有IndexedDB适合更复杂的数据。 Web性能优化方面,Web Workers可以在后台运行脚本,避免阻塞主线程。表单增强包括新的输入类型和属性,比如email、date,还有placeholder和autocomplete这些属性,提升用户体验。 API方面,地理位置、拖放API、WebSocket这些都很重要,尤其是WebSocket实现了全双工通信,适合实时应用。兼容性和标准化方面,HTML5统一了文档声明,简化了语法,比如标签可以不闭合,引号可省略,但最好还是保持规范写法。 需要检查是否有遗漏的重要特性,比如Web Storage、WebSocket、语义化标签这些确实是核心内容。还要注意用户可能需要实际应用的例子,比如在代码中使用video标签,或者localStorage的方法。不过用户没有要求代码示例,所以可能不需要深入,但提到相关API时可以简单说明用途。 需要确保每个特性解释清楚,但不过于冗长。比如在表单增强部分,除了新的输入类型,还有表单验证属性如required和pattern,这些对前端开发很有帮助。 最后,确保回答结构清晰,分点列出,每个大类下有子项,帮助用户逐步了解。可能用户是前端开发者,或者刚入门的学习者,需要全面但易懂的介绍。要避免技术术语过于复杂,同时保持专业性。 检查是否有错误,比如Web Workers属于性能优化,正确。离线应用通过缓存manifest文件,不过现在Service Worker更常用,但HTML5中可能还是提到应用缓存。不过有些特性已经被现代API取代,但作为介绍HTML5,还是需要按标准内容来。 总结下来,分八个主要部分,每个部分列出关键特性,用简短的说明,确保覆盖主要新增内容,结构清晰,语言准确。</think>HTML5是HTML的第五次重大修订,于2014年正式发布。以下是其核心新增特性的分步解析: --- ### 一、语义化标签 1. **结构化标签** - `<header>` `<footer>`:定义页眉/页脚 - `<nav>`:导航栏 - `<article>`:独立内容块(如博客文章) - `<section>`:文档中的逻辑分区 - `<aside>`:侧边栏或附属内容 2. **媒体内容标签** - `<figure>` `<figcaption>`:标注图片/图表 - `<time>`:定义时间或日期 --- ### 二、多媒体支持 1. **原生音视频** - `<video>` `<audio>`标签直接嵌入媒体 - 支持格式:MP4、WebM、Ogg(视频);MP3、WAV(音频) - 示例: ```html <video controls> <source src="video.mp4" type="video/mp4"> </video> ``` --- ### 三、图形与动画 1. **`<canvas>`绘图** - 通过JavaScript实现动态2D/3D图形 - 常用于数据可视化、游戏开发 2. **SVG支持** - 矢量图形直接嵌入,支持缩放不失真 --- ### 四、本地存储 1. **Web Storage** - `localStorage`:永久存储(需手动清除) - `sessionStorage`:会话级存储(关闭标签页失效) 2. **IndexedDB** - 客户端数据库,支持复杂数据存储 --- ### 五、Web性能优化 1. **Web Workers** - 后台运行JavaScript,避免阻塞主线程 2. **应用缓存** - 通过`manifest`文件实现离线访问 --- ### 六、表单增强 1. **新输入类型** - `email` `url` `date` `color` `range`等 2. **表单验证** - `required`必填字段 - `pattern`正则校验 - `placeholder`输入提示 --- ### 七、API支持 1. **地理位置** - `Geolocation API`获取用户位置 2. **拖放操作** - `Drag and Drop API`实现元素拖放 3. **实时通信** - `WebSocket`全双工通信协议 --- ### 八、兼容性与标准化 1. **统一文档声明** - 简化的`<!DOCTYPE html>` 2. **语法宽松性** - 允许标签不闭合、属性不加引号(但建议规范写法) --- ### 总结 HTML5通过语义化标签、多媒体原生支持、本地存储等特性,显著提升了Web应用的功能和性能,同时推动开发标准化。这些改进为现代Web开发(如响应式设计、跨平台应用)奠定了核心基础。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值