龙空技术网

HTML5(一)——新增元素和属性

前端代码女神 209

前言:

此刻大家对“h5的form如何关闭自动完成功能”大约比较关心,各位老铁们都需要知道一些“h5的form如何关闭自动完成功能”的相关资讯。那么小编也在网摘上汇集了一些对于“h5的form如何关闭自动完成功能””的相关资讯,希望兄弟们能喜欢,你们一起来了解一下吧!

自 H5 诞生以来,在 html4.0 中有些元素已被 H5 废弃,但是在 H5 中添加了很多新元素以及功能,今天我们学习 H5 中新增的元素和属性都有哪些?

新增语义结构标签

标签

描述

<article>

定义页面独立的内容区域。

<aside>

定义页面的侧边栏内容。

<bdi>

允许您设置一段文本,使其脱离其父元素的文本方向设置。

<command>

定义命令按钮,比如单选按钮、复选框或按钮

<details>

用于描述文档或文档某个部分的细节

<dialog>

定义对话框,比如提示框

<summary>

标签包含 details 元素的标题

<figure>

规定独立的流内容(图像、图表、照片、代码等等)。

<figcaption>

定义 <figure> 元素的标题

<footer>

定义 section 或 document 的页脚。

<header>

定义了文档的头部区域

<mark>

定义带有记号的文本。

<meter>

定义度量衡。仅用于已知最大和最小值的度量。

<nav>

定义导航链接的部分。

<progress>

定义任何类型的任务的进度。

<ruby>

定义 ruby 注释(中文注音或字符)。

<rt>

定义字符(中文注音或字符)的解释或发音。

<rp>

在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。

<section>

定义文档中的节(section、区段)。

<time>

定义日期或时间。

<wbr>

规定在文本中的何处适合添加换行符。

新增标签使用时根据描述内容,在适当的地方使用新标签,应用的时候和其他标签是一样的,H5 新增标签使得网页结构更清晰明了,建议大家使用新增元素。

新增表单元素

标签

描述

<datalist>

<input>标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

<keygen>

<keygen> 标签规定用于表单的密钥对生成器字段。

<output>

<output> 标签定义不同类型的输出,比如脚本的输出。

<datalist>属性规定form或input域应该拥有自动完成功能,当input聚焦时,浏览器应该在域中显示填写的选项。

使用 input 元素与 datalist 元素绑定,使用时如下:

<form action=""> <input type="text" list="schooltype"> <datalist id="schooltype">  <option value="欧亚驾校">欧亚驾校</option>  <option value="鹏程驾校">鹏程驾校</option>  <option value="学车网">学车网</option> </datalist>    </form>

<keygen>元素用于提供用户验证的方法,表单提交时,keygen生成表单密钥对,一个是公钥,一个是私钥,私钥存储在客户端,公钥通过带有keygen字段的表单发送给服务器。目前已被H5废弃,我们作为了解就好。

使用实例如下:

<form action=""> 用户名<input type="text" name="user" /><br> 密码<input type="password" name="se"> <br> 加密<keygen name="security"><br> <input type="submit" value="提交"></form>

<output>元素用于不同类型的输出,对输出结果的展示,如对两个数值相加,并展示结果,代码如下:

<form action="" oninput = "x.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="a" step="1" min="0" max="100"> +  <input type="text" id="b" value="50">= <output name="x" ></output> </form>

上述form处添加oninput事件,对数值parseInt进行取整运算。

新增表单属性

H5中新增表单属性指 form 和 input 元素新增属性。

form新属性及意义

autocomplete :规定form域自动完成功能。novalidate :规定提交表单时是否验证域。

input新增类型和属性

新的输入类型

新的输入属性

colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweekautocompleteautofocusformformactionformenctypeformmethodformnovalidateformtargetheight 和 widthlistmin 和 maxmultiplepattern (regexp)placeholderrequiredstep

input 和 form 的 autocomplete属性

属性规定 form 或 input 在当前域下拥有自动完成功能,通俗地讲就是元素聚焦时,会自动展示之前输入过的内容,内容是根据当前域名下之前使用过的数据。示例如下:

<form action="demo_form.asp" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="on" /><br /> <input type="submit" /></form>

页面上显示如图:

表单重写属性:

formaction - 重写表单的 action 属性formenctype - 重写表单 enctype 属性formmethod - 重写表单 method 属性formnovalidate - 重写表单 novalidate 属性formtarget - 重写表单的 target 属性

min、max、step属性

三者用于对数字、日期类型输入框的限制和约束。

min - 规定允许设置的最小值。max - 规定允许设置的最大值。step - 规定合法的数字间隔。

使用示例,请参照上output处的实例。

multipel属性:规定输入域中可选择多个值。适用于 email 和 file 两种类型。

pattern属性:验证input域的模式。模式pattern是正则表达式,适用于text、search、url、email、password。

废除的标签

以下是一些在H5中已废弃的元素。

acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt。

标签: #h5的form如何关闭自动完成功能