整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前面学习了HTML5的基础新元素，接下来小编将继续分享HTML5必学的知识点--HTML5新表单
在开始之前，先来了解一下HTML5的声明，<!doctype html>，通过HTML的声明，体现W3C故意弱化HTML的版本，但是小标要说明下版本不更新，不等于内容不更新，而是W3C希望HTML5是融合版本。
关于HTML的发展历史， HTML的规范不严格一直以来就是前端开发人员头疼的地方， 元素定义大小写不敏感。
直到XHTML 1.0的出现 - 前端开发人员拥抱，因为此时的HTML只允许小写
XHTML 2.0版本出现后 - 前端开发人员重新回到HTML， 推翻了之前很多习惯
HTML 4版本出现之后 - 比较好的版本
HTML 5版本出现 - 经历8年后，终于在2014年10月底发布
HTML5的特点：移动端浏览器相比PC端浏览器对H5的支持更好，这要感谢苹果公司 - 乔布斯
小编提醒大家：目前网上所谓的H5，并不是指现在所学HTML5技术，HTML5的新特性内容不多,与JS(难)配合使用
那么实际工作中使用多不多?其实实际上来说，相对并不多
其实就是在为将来学习 - HTML5将来一定是主流。
*******华丽分割线*******
接下来开始学习，HTML5必学知识点—新表单，主要从4个方面入手：新类型、新元素、新属性、新验证
1.email类型 - 判断字符串中是否包含"@"符号，注意的是不能以"@"开始、不能以"@"结束
2.搜索类型 - search
3.URL类型 - 判断字符串中是否包含"http:"，注意的是以"http:"开始,验证通过，以"http:"结束,验证通过
4.电话号码类型 - tel，注意的是只有在手机端浏览器访问时有效果
5.数字类型 - number，需要注意的是允许输入非数字内容,但是不允许提交，在设置min和max时，允许输入范围外的值,不允许提交；这个类型有一些属性： min - 设置数字的最小值；max - 设置数字的最大值；step - 设置步长,每次增加或减小的量值
6.范围类型 - range，效果就是滑动条，属性：min - 最小值、max - 最大值、step - 步长、value - 当前值
7.颜色类型 - color
8.日期类型 - date，日期格式 - yyyy/MM/dd
9周、月份类型 （实际很少使用）
10周 - week（实际很少使用）
11月份 - month（实际很少使用）
1.<datalist>元素，用法：需要配合input元素使用，在input元素中定义list属性(值为datalist元素的id值)，好处就是数据与结构的分离
2.<progress>元素，就是实现一个进度条，属性有：max - 设置进度条的最大值、value - 设置进度条当前的值
3. <meter>元素，用法和<progress>元素类似，作用 - 刻度，属性包括：min和max - 设置最小值和最大值、 value - 表示当前值，high和low - 设置预警值（举个常见的例子，当你手机的电量小于10%时候，一般会显示红色的一小段进度）
4.<output>元素，和<input> 输入框正好相反，<output>是输出框，属性：for指定要输出的元素进行关联（实际开发中,很少使用）
1.placeholder属性：就是实现input输入框的默认提示信息，相比value属性值更好用。这个在实际开发过程中非常常见
2.autofocus属性：就是自动获取焦点、用法有点不同，它不是key=vlaue的形式，而是直接只定义属性名(没有属性值)
3.multiple属性：就是允许输入框输入多个值，用法和autofocus一样只定义属性名(没有属性值)
4.form属性（实际开发中用到不多）：就是表单元素定义在表单之外，用法 - 值是相关表单的id属性值
1.验证属性：
required属性即：验证是否为空？返回false,表示当前元素值为空， 返回true,表示当前元素值不为空
pattern属性即：验证正则表达式，定义正则表达式时,不能添加"//"， 正则表达式不能验证是否为空
min和max属性即：验证最小值和最大值 ，只和number类型的input元素配置使用
minlength和maxlength属性即：验证最小长度和最大长度，minlength - 验证最小长度，maxlength - 限制最大长度（输入内容的长度不能大于maxlength的值）
validity属性即：HTML5提供表单验证的接口，通过该属性得到validityState对象，该对象提供一系列的有效状态， 有效状态可用于表单验证，得到validatyState对象，elem.validaty - 得到该对象
2.有效状态
valid - 返回Boolean,表示验证是否通过，true - 表示验证通过， false - 表示验证失败，
valueMissing - 表示值是否为空，返回值true - 表示元素值为空(错误)、false - 表示元素值不为空(正确) 注意该状态配合required属性使用
typeMismatch - 表示元素类型是否匹配，返回值true - 表示元素类型不匹配、false - 表示元素类型匹配、 该状态配合email、url、number等使用
patternMismatch - 表示正则表达式是否匹配、返回值true - 表示正则表达式不匹配、false - 表示正则表达式匹配，该状态配合pattern属性使用
tooLong - 表示元素内容长度是否过长，返回值true - 表示元素内容长度过长，false - 表示元素内容长度不长，该状态配合maxlength属性使用
maxlength属性 - 限制属性，tooLong可能不会出现(完整性)
rangeUnderflow - 表示元素值是否小于min值，返回值true - 表示元素值小于min的值，false - 表示元素值不小于min的值 该状态配合min属性使用
stepMismatch - 表示元素值与step值是否不符，返回值true - 表示元素值与step值不符，false - 表示元素值与step值相符 该状态配合step属性使用
customError - 自定义错误，配合setCustomValidity()方法使用，作用就是替换之前的判断表达式，自定义错误提示信息setCustomValidity(自定义错误信息)，一旦调用该方法,默认认为就是错的，上述所有的有效状态返回错误值 验证正确时,调用该方法,将错误信息置为空
TML5多媒体作品以其对各种平台的兼容而见长，目前已获得了广泛的应用。如果我们需要制作自己的HTML5多媒体作品，一个方便之选就是利用现成的在线制作工具“百度H5”。
首先访问“百度H5”网页（https://h5.baidu.com/），可以看到非常简单的页面，仅有“我的H5”和“我的模板”两个选项。其中“我的模板”是通过套用模板的方式来制作HTML5作品，而“我的H5”则可以完全靠自定义各种参数来自由创作，制作好的作品也会显示在这里（图1）。
1. 通过创意模板轻松制作
在首页中选择“我的模板”，随后会进入一个模板展示页面，这些都是设计者们分享的模板。根据你所要设计的作品的类别，可以按类选择一个类似的作品作为制作的模板，然后在此基础上进行修改，即可快速形成自己的多媒体作品（图2）。
比如要制作一个招生方面的媒体作品，选择如图所示的秋季班招生模板，然后点击右下角的“使用模板”按钮（图3）。
接下来先要为作品命名，例如“我们的幼儿园招生了”。输入完毕点击“确定”按钮（图4）。
随后进入实质性的模板修改编辑阶段。对于不合适的内容，可先删除页面元素再添加。点击“文本”菜单插入所需文本内容。同理，可使用右边的“媒体”按钮插入图片、音频、视频、嵌入视频、全景图等内容。如果是PSD图片，则直接用PSD菜单载入。若版面中需要插入一些图标或形状，则点击“图形”菜单选择添加（图5）。
此外，对于作品中所要用到的展示数据，可以通过插入图表、表单等方式，非常轻松地完成数据展示制作（图6）。如果要实现更多的效果，可通过“插件”菜单，选择添加页面加载套件和加载进度、添加计数器、添加帧动画、添加相册或地图等。
对于需要修改的属性，可通过窗口右侧的分类属性窗口选择设置。通过窗口下方的编辑区域，可控制动画、加载页、全局全景和背景、当前页等参数设置。例如，要定制个性化的加载页面效果，点击“加载页”选项卡，然后通过下方的滑块，对加载页中的图片和进度进行自定义编辑（图7）。
对页面上的各种元素进行修改和编辑完成之后，点击工具栏左上角的磁盘按钮将作品保存在网上。注意，编辑过程中产生的内容软件会自动保存，但为了防止丢失，还是要养成勤于手动保存的习惯。
最后，就可以发布作品了。点击工具栏上的“发布”按钮执行发布操作（图8）。
由于作品是保存在网络服务器中的，因此作品的共享是以网址的形式体现的。发布时要填写作品分享的标题，设置个人域名。我们只需在“个性化域名”中填写自己命名的作品个性域名地址，发布后其他人就可以用这个域名来访问HTML5作品了（图9）。
小提示：使用上述服务需要使用自己的百度账号登录。为维护网络安全，目前发布信息需先经过用户实名制认证方可进行。
2. DIY 完全自己设计制作
套用模板适合于初学者或设计能力不强的用户。其实，不用套用模板，完全可以从头全部由自己来设计作品。
制作时，在主页中选择“我的H5”，然后点击空白页上印有圆圈套加号图标的按钮，向导会询问创建什么样的布局。从“分页布局”或“整页布局”中选择一种布局方式。如果是分页布局，则依靠页面间的前后滑动实现简单跳转；如果是整页布局，则将整个页面分为不同区域，各部分还可创建链接，实现不同的功能（图10）。
随后其他步骤与第1部分的添加和设置操作方法相当，只是全要亲自设计，不能套用现成的组件而已。在创作过程中，只要善于使用系统提供的文本工具编排文字内容，用媒体和图形工具添加图片、图形、音视频，数据相关的内容使用图表、表单等工具，借助于“插件”扩展来补充完善，发挥自由想象的创作空间，一定能创作出更具个性化的作品。
TML5 新表单类型示例代码有不少对HTML5开发感兴趣的小伙伴不是很了解，本篇文章小编就不多说废话了，带大家一块来看一下扣丁学堂HTML5在线学习分享的HTML5 新表单类型示例代码，希可以帮到对HTML5感兴趣的小伙伴们。
demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form {
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单属性</legend>
<label for="">
email: <input type="email" name="email" >
</label>
<label for="">
tel: <input type="tel" name="tel" > <!-- 本身不验证,自己添加验证 -->
</label>
<label for="">
url: <input type="url" name="url" >
</label>
<label for="">
number: <input type="number" name="number" step="5"> <!--输入的是步长的整倍数-->
</label>
<label for="">
search: <input type="search" name="search" > <!--移动端出现的小键盘右下角是搜索按钮-->
</label>
<label for="">
range: <input type="range" name="range" value="100" min="0" max="300"> <!--默认最小0 最大100-->
</label>
<label for="">
<label for="">
color: <input type="color" name="color" >
</label>
time: <input type="time" name="time" >
</label>
<label for="">
date: <input type="date" name="date" >
</label>
<label for="">
month: <input type="month" name="month" >
</label>
<label for="">
week: <input type="week" name="week" >
</label>
<label for="">
datetime: <input type="datetime" name="datetime" >
</label>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>以上就是小编分享的HTML5新表单类型示例代码，希望可以帮到小伙伴们。对HTML5感兴趣想要学习的小伙伴可以选择扣丁学堂学习，扣丁学堂HTML5培训是专业的HTML5培训机构，不仅有专业的老师和与时俱进的课程体系，还有大量的HTML5在线教程供学员观看学习哦。扣丁学堂H5技术交流群：559883758。
【关注微信公众号获取更多学习资料】
*请认真填写需求信息，我们会在24小时内与您取得联系。
