HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证。input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅。
新增属性一:autoconmplete
autoconmplete可以赋值为 on 或者 off。当为 on的时候,浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页面的时候,浏览器能把用户写过的值自动填写在相应的input框里。
现在很多网站都实现了这个功能,不过基本都是用php来实现的。用了这个属性,无疑可以减少很多前端和后台的交流量和工作量。
新增属性二:autofocus
autofocus 可以赋值为 autofocus,也就是在页面加载完成的时候自动聚焦到这个input标签,自然 type="hidden"的时候是不能用的。 这个也是一个比较常见的效果,至今为止的实现方法是用js。在页面加载完时执行聚焦操作,现在也被一个属性搞定了。
可以想象,一个页面至多只有一个input标签会设置 autofocus,否则必然不会达到预期效果。因为不可能同事聚焦在两个input上。
新增属性三:required
input的有一个强力新增属性,免去验证的麻烦。可以赋值为 required。
比如用户注册页面的用户名和密码都是必填的,只要设置一个required就可以了。而在以前是需要js来验证或者后台验证的。
注意:这里required属性是需要用户来填写的,所以TYPE是button、submit、reset、image等等不需要用户填写选择的类型是不可以使用这个属性的。
新增属性四:placeholder
这个新增属性也是非常使用,用在type= text email等等类型的时候,提示用户输入信息的格式或者内容等等。这个效果在之前也是需要js来实现的。
新增属性五:新增list属性---联想框效果
这个属性显示类似于百度搜索框那种联想框效果,也是非常实用的一个属性。
注意从这个属性使用的特点:需要有对应的datalist标签;datalist子标签option支持 value和lable两个属性;list的属性值要和datalist的id一致。
新增属性六: min、max属性来限制数值范围,minheight、maxheight属性来限制字符串长度。
其他新增属性: height、width设置高和宽 form、formaction、formmethod、fromtarget、formenctype等等属性来覆盖掉默认设置。
分享到:
相关推荐
### HTML5新增属性 #### 1.1 contextmenu属性 HTML5新增了`contextmenu`属性,用于指定右键菜单。在HTML4中,右键菜单的自定义实现比较复杂,通常需要借助JavaScript库。而HTML5则直接通过`contextmenu`属性提供了...
#### 二、HTML5新增属性 HTML5还引入了一系列新的属性,使开发者能够更灵活地控制网页元素的行为和样式。 ##### 1. `contenteditable` - **用途**:设置元素内容是否可编辑。 - **值**:`true`(默认)/ `false` /...
HTML5中form表单的新增属性.ppt
HTML5 新增标签和属性 HTML5 中新增了许多标签和属性,使得开发者可以更快速地了解和掌握 HTML5 技术,并实现快速上手。这些新增的标签和属性可以帮助开发者快速实现页面布局,提高浏览器的解析速度,并且提供了更...
HTML 5 新增属性** - **`contenteditable`**:使元素可编辑。 - **`contextmenu`**:指定元素的上下文菜单。 - **`draggable`**:指定元素是否可以拖动。 - **`spellcheck`**:启用拼写检查。 - **`hidden`**...
三、HTML5新增属性 HTML5引入了许多新的属性,增强了网页的功能性和可用性: 1. `placeholder`:输入元素的提示文本。 2. `autofocus`:元素加载时自动获取焦点,如。 3. `autocomplete`:控制输入字段的自动完成...
《响应式网页开发实战》教学课件03HTML5新增页面元素和属性.pdf《响应式网页开发实战》教学课件03HTML5新增页面元素和属性.pdf《响应式网页开发实战》教学课件03HTML5新增页面元素和属性.pdf《响应式网页开发实战》...
HTML5新增的属性和废除的属性.ppt
HTML5的data-*属性是为了解决网页或应用程序中存储私有自定义数据的需求而引入的新特性。这个属性允许开发者在HTML元素上嵌入自定义的数据,而不影响标准的语义。data-*属性的命名规则非常简单:以"data-"开头,后面...
Html5新增元素详解 Html5新增元素详解是 Html5 中的一些新的元素和废除的元素的介绍。Html5 中的新元素包括结构元素、行内语义元素、块级语义元素、input 元素的类型、多媒体元素和交互性元素等。 Html5 中的一些...
HTML5是HTML的最新版本,它在原有的基础上引入了许多新元素、属性和功能,旨在提升网页的互动性和可访问性。以下是一些HTML5新增的重要知识点: 1. **新元素**:HTML5引入了如、、、、、等结构性元素,帮助开发者更...
在这个教学课件中,我们主要关注的是HTML5新增的一些属性,这些属性极大地扩展了HTML元素的功能和交互性。 1. **contextmenu属性**:这个属性允许开发者自定义元素的右键上下文菜单。通过指定`<menu>`元素的ID,...
这个名为"某马机构----HTML5 新增标签和属性.rar"的压缩包文件,显然是为那些希望自学前端开发的同学准备的资源。下面,我们将详细探讨HTML5中的新增标签和属性。 首先,我们来关注一些结构化标签。HTML5引入了语义...
1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=testform> <input type=text> <...
html css css新增属性和选择器
以下是四个主要的新增属性的详细说明: 1. **multiple** 属性: 在HTML5之前,`input`元素的`type="file"`只能让用户选择一个文件进行上传。然而,`multiple`属性的引入允许用户一次性选择多个文件进行上传。这...
在HTML5中,标签新增了许多属性,比如media、hreflang、target、type和shape等。例如,media属性用于指定链接的媒体类型,target属性用于指定链接打开的目标框架。 HTML中的和元素分别用于表示缩写和首字母缩写词。...
本文档主要关注HTML5中新增的三个input属性:autocomplete、autofocus和form。 1. **autocomplete属性**: autocomplete属性允许开发者控制表单字段是否启用浏览器的自动填充功能。这个属性可以设置为"on"、"off...
在表单处理方面,HTML5新增了多个属性和元素,极大地丰富了网页上用户输入数据的方式。以下将详细介绍这些新增的表单元素和属性,以及它们的实例解析。 首先来看placeholder属性,这个属性用在`<input>`元素上,...