`

HTML新增的表单和属性

 
阅读更多
HTML新增了如下例显示的新表单,具体可参考http://www.w3school.com.cn/html5/att_input_type.asp


<form action="accountController.do" id="account" autocomplete="on" method="post">
	Account: <input type="text" name="username" required="required" placeholder="input username!" pattern="[0-9a-zA-Z]{4,9}"/><br>
	Password: <input type="password" name="password" placeholder="input account!"/><br>
	Email: <input type="email" name="email" autofocus="autofocus" autocomplete="on"/><br>
	URL: <input type="url" name="url" /><br>
	Birthday: <input type="date" name="birthday" /><br>
	Color: <input type="color" name=phone /> <br>
	Age: <input type="range" min="18" max="60" step="1"><br>
	Attach: <input type="file" multiple="multiple"  accept="image/*,.xml,audio/*,video/*" name="fileDemo" id="fileDemo" /><br>
	Phone: <input type=tel name=tel ><br>
	Search: <input type=search name=search ><br>
	Hobby: <input type="text" list="ilist" autocomplete="on">
		<datalist id=ilist>
			<option value=bskb label="basketball">
			<option value=ftb label=football>
		</datalist><br>
</form>
	<input type="submit" value="submit" form="account"><br>
	<input type="reset"  value=reset form="account"> <br>


Input表单新增了属性:
属性描述
placeholder
require
pattern正则表达式校验
autofocus 自动聚焦
form将输入表单与form的Id联系起来,可以将输入表单放在页面的任何位置
list与DATALIST一起使用,提供对选择框的自定义内容
autocomplete此属性是为表单提供自动完成功能。如果该属性为打开状态可很好地自动完成。一般来说,此属性必须启动浏览器的自动完成功能。
multiple用于文件上传控件,设置此属性后,允许上传多个文件。
max,min,step跟数字相关
acceptinput type=file 可以接受的文件类型,用逗号隔开


Form表单标签新增加属性
novalidate 规定在提交表单时不应该验证 form 或 input 域。
autocomplete规定 form 或 input 域应该拥有自动完成功能。


参考文档:
http://www.w3.org/TR/html5/forms.html
分享到:
评论

相关推荐

    HTML5中form表单的新增属性.ppt

    HTML5中form表单的新增属性.ppt

    HTML5新增属性与表单元素

    ### HTML5新增表单元素 HTML5在表单方面也有很大的改进和增强,新增了一些表单元素,提供了更好的表单验证机制,增强了用户体验。 #### 1.5 datalist元素 `datalist`元素与`input`元素配合使用,可以为输入字段...

    html5新增标签和属性

    HTML5 新增标签和属性 HTML5 中新增了许多标签和属性,使得开发者可以更快速地了解和掌握 HTML5 技术,并实现快速上手。这些新增的标签和属性可以帮助开发者快速实现页面布局,提高浏览器的解析速度,并且提供了更...

    HTML5表单中新增的input属性1.pdf

    HTML5在表单处理方面带来了许多增强和改进,...总结来说,HTML5的这些新属性和类型极大地扩展了表单的功能,提高了数据输入的准确性和用户体验。开发者可以根据需求灵活运用这些特性,创建更加智能和友好的网页表单。

    HTML5表单中新增的input属性3.pdf

    这些新增的HTML5 `input`属性极大地增强了表单功能,提升了用户体验,同时也让开发者能够更好地控制和验证用户输入的数据。结合其他HTML5的新特性,如`form`属性、`list`属性等,可以构建出更强大、更易于使用的Web...

    HTML5新增的表单元素和属性实例解析

    在表单处理方面,HTML5新增了多个属性和元素,极大地丰富了网页上用户输入数据的方式。以下将详细介绍这些新增的表单元素和属性,以及它们的实例解析。 首先来看placeholder属性,这个属性用在`&lt;input&gt;`元素上,...

    详解HTML5表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 &lt;form id=testform&gt; &lt;input type=text&gt; &lt...

    HTML5表单中新增的input属性2.pdf

    HTML5在表单功能上做了重大扩展,引入了一系列新的`input`属性,使得表单控件的使用更加灵活,提供了更强大的数据验证和用户体验。在本文档中,主要介绍了几个关键的新属性,包括`formaction`、`height`、`width`、`...

    HTML5表单中新增的input属性1案例.pdf

    HTML5在表单功能上做了许多增强,引入了一系列新的input属性来提高用户体验和表单的交互性。这里我们将深入探讨三个关键的新属性:autocomplete、autofocus和form,通过案例来理解它们的作用。 1. autocomplete属性...

    HTML5表单中新增的input属性2案例.pdf

    HTML5在表单元素中引入了多个新的input属性,这些属性极大地增强了表单的功能和用户体验。以下是基于案例的三个关键属性的详细说明: 1. **image类型input的height和width属性** 在HTML5中,`&lt;input type="image"&gt;...

    某马机构----HTML5 新增标签和属性.rar

    这个名为"某马机构----HTML5 新增标签和属性.rar"的压缩包文件,显然是为那些希望自学前端开发的同学准备的资源。下面,我们将详细探讨HTML5中的新增标签和属性。 首先,我们来关注一些结构化标签。HTML5引入了语义...

    bootstrap风格的html5表单验证示例

    HTML5则引入了一系列新的表单元素和属性,使得网页表单的设计和验证更加便捷。在这个“bootstrap风格的html5表单验证示例”中,我们将深入探讨如何结合这两者来创建高效且用户友好的表单。 1. **HTML5表单元素**:...

    HTML5表单的常用属性案例.pdf

    在HTML5中,表单控件得到了显著增强,提供了更多的属性来帮助开发者创建更加灵活和交互性强的用户界面。以下是基于提供的文件内容所涉及的HTML5表单常用属性的详细说明: 1. **`method`属性**: `method`属性用于...

    HTML+CSS基础学习源代码(含有新增HTML5属性)

    HTML5是HTML的最新版本,它在原有的基础上引入了许多新元素、属性和功能,旨在提升网页的互动性和可访问性。以下是一些HTML5新增的重要知识点: 1. **新元素**:HTML5引入了如、、、、、等结构性元素,帮助开发者更...

    html5新表单

    但在HTML5中,这些元素可以放置在页面的任意位置,并通过新增的`form`属性关联到相应的表单。例如: ```html ... ``` 这种方式使得开发者能够更自由地布局页面元素,同时保持逻辑上的清晰性和一致性。 #### ...

    HTML5表单及其8种验证方法

    1. 新增表单元素:HTML5引入了如`&lt;input type="date"&gt;`, `&lt;input type="email"&gt;`, `&lt;input type="tel"&gt;`等新类型的输入元素,它们为用户提供了更直观的交互方式,同时也便于开发者进行数据格式的控制。 2. 数据绑定...

    HTML5新增的表单元素.pdf

    `&lt;keygen&gt;`元素有多个属性,如`autofocus`、`challenge`、`disabled`、`form`、`keytype`和`name`,用于控制密钥生成和表单处理。例如: ```html ``` 这个例子中,`keygen`元素用于生成RSA类型的...

Global site tag (gtag.js) - Google Analytics