html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解

原标题：web前端学习技术之对HTML5 智能表单的理解

Html5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。

…

type新增属性：

email、URL、date、time、month、week、number、range、color

input元素的新增属性：

Autocomplete：自动完成功能.记录用户之前输入的内容，并在下次输入时自动提示完成输入。

>>> 属性值： on/off

>>> 可以在form表单上使用，对整张表单的所有控件进行自动完成的开关

也可以在input上使用，对特定输入框进行修改。

>>> 绝大部分浏览器，默认开启。

Autofocus：自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。

Form：所属表单。通过form表单的id，确定此input输入哪张表单。

Required：必填.required="required" 设置input必填，否则阻止提交。

Pattern：使用正则表达式验证input的模式.

数字类型

跟数字强相关的类型，其中number、range在移动端开发时，会弹出数字键盘，而range是一个范围滑动块。

日期和时间类型

web表单常见的字段就是日期和时间，html5以此来收集这类信息

其他类型：email、url、color、search

其中一些类型在不同的设备上都会有不同的显示。

placeholder 占位符文本，以前我们用js来模拟，获得焦点的时候，文本消失，失去焦点并且内容为空时，文本重现，现在html5自带了这一项功能。

html结构：

如果想要修改placeholder中的文本样式，那么我们只要给浏览器设置一些样式即可，css结构：

::-webkit-input-placeholder{

color:red;

font-size:14px;

}

::-moz-placeholder{

color:red;

font-size:14px;

}

autofocus 自动聚焦 ,autofocus属性可以让表单在加载完成时，会有一个表单域被默认聚焦或者选中，但是尽量不要在一个页面上在多个表单域上使用autofocus,在一些低版本浏览器上会默认聚焦最后一个含有autofocus的表单域，在大多数浏览器中会聚焦第一个含有autofocus的表单域，这会造成跨浏览器的混乱。还有我们通常用空格键来滚动页面，如果页面上有autofocus的表单域会阻止这一浏览器的默认行为。

autocomplete 自动完成，很多浏览器默认提供自动完成功能，帮助用户输入上次提交过的内容，autocomplete有两个必备的条件才能够工作，一是一定要有form元素，二个是表单域上必须要有name属性和name属性值。但是，有些时候我们为了保护隐私，需要避免自动完成这项功能，我们开启和关闭这项功能，只需给它赋值on或者off ,如果不赋值，默认就是on,表示功能开启。返回搜狐，查看更多

责任编辑：

html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解相关推荐

html表单实验结论,web前端开发技术实验报告-实验五
1.长春大学 20 15 2016学年第二学期Web前端开发技术课程实验报告学院: 计算机科学技术专业: 软件工程班级: 软件14402 学号: 姓名: 王悦任课教师 ...
web前端学习（八）——HTML5中表格、边框的相关标签设置
1.HTML中表格边框的相关标签 ①表格由 <table> 标签来定义. ②每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签 ...
web前端学习（四）——HTML5的超链接标签设置（页面间链接、锚链接以及邮件链接）
1.HTML5的超链接--页面间链接 <a href ="链接网址" target="目标窗口位置">文本或图像</a> 这里的 hre ...
Web前端学习笔记1：HTML5
HTML:Hyer Text Markup Language(超文本标记语言) W3C:万维网联盟 W3C标准: 结构化标准语言(HTML.XML) 表现标准语言(CSS) 行为标准(DOM.ECMA ...
Web前端学习技巧有哪些？本文给你答案
随着互联网的快速发展,web前端技术在不断的更新,有着美好前景的web前端岗位引起了很多人的关注,很多人都开始报班学习web前端技术.那么web前端学习技巧有哪些?来看看下面的详细介绍. web前端学 ...
云课堂HTML5作业,智慧职教云课堂APPHTML5+CSS3 Web前端开发技术答案
智慧职教云课堂APPHTML5+CSS3 Web前端开发技术答案更多相关问题 [单选题]在Windows 7中,"剪切"命令的组合快捷键是 [单选题]仲裁裁决书自( )之日起发生 ...
html表单的课后心得体会,web前端学习心得体会范文
<web前端学习心得体会范文>由会员分享,可在线阅读,更多相关<web前端学习心得体会范文(2页珍藏版)>请在装配图网上搜索. 1.web前端学习心得体会范文web前端学习心得 ...
【Web前端学习系列01】—HTML
[Web前端学习系列01]-HTML HTML 基本标签-head head title标签 meta标签 link标签 style标签 script标签 base标签文本标题标签 h 段落标签 ...
web 前端学习线路图
web 前端学习线路图一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...

html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解

html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解相关推荐

最新文章

热门文章