<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单新增的type属性</title>
</head>
<body>
<form action="test.php">
用户名：<input type="text" name="userName"><br>
密码：<input type="password" name="passWord"><br>
<!--email 提供了默认的电子邮箱完整的验证：要求必须包含@符号。
如果不能满足验证，则会组织当前数据的提交 -->
邮箱：<input type="email" name="email"><br>
<!--tel 并不是来完成验证，为了是在移动端打开数字键盘
如何查看：qq发送文件》手机端使用qq来接收》使用浏览器查看-->
电话：<input type="tel"><br>
<!--url验证只能输入合法的网址，必须包含http -->
网址：<input type="url"><br>
<!--number只能输入数字和小数点，右侧有增加减小的箭头
min最小值，max最大值，value默认值 -->
数量：<input type="number"><br>
<!-- 输入框右边有个删除叉，可以提供更人性化的体验-->
请输入商品名称：<input type="search"><br>
<!-- range 范围设置 -->
范围：<input type="range" max="10" min="0" value="4"><br>
颜色：<input type="color"><br>
<!-- time：时间：时分秒 -->
<!-- date 年月日：日历控件， -->
<!-- datetime：现在大多数浏览器都不支持datetime，苹果的safari支持 -->
<!-- datetimelocal：能显示年月日 时分秒 -->
日期：<input type="date"><br>
时间：<input type="time"><br>
月份：<input type="month" ><br>
星期：<input type="week" ><br>
<input type="submit">
</form>
</body>
</html>
<body>
<form action="" id="myForm">
<!-- placeholder：提示占位；
autofocus：自动获取焦点；
autocomplete：自动完成
1-必须成功提交过才可用：提交过才会成功记录下来
2-当前添加autocomplete的元素必须有name属性
也可以对form表单元素设置autocomplte属性
-->
用户名：<input type="text" placeholder="请输入用户名" name="userName" autofocus autocomplete="on"> <br>
<!-- tel并不会实现验证，仅仅在移动端能够弹出数字键盘-->
<!-- required：必须输入-->
<!-- pattern：正则表达式验证(*代表任意个，?代表0个或1个，+代表1个或多个) -->
电话号：<input type="tel" name="phone" pattern="^(\+86)?1\d{10}$"><br>
<!-- multiple：可以选择多个文件-->
文件上传：<input type="file" name="photo" multiple><br>
<!-- multiple：可以输入多个邮箱地址，以逗号分割（a@a.com,b@b.com） -->
邮箱：<input type="email" name="email" multiple><br>
<input type="submit"><br>
</form>
<!-- 下面这个表单元素，并没有包含在上面form中，默认表单元素数据不会进行提交-->
<!-- form（指定表单的id，在将来指定id号提交数据的时候，也会将当前表单元素一起提交）
设置后面的值，可以通过上面的表单一起提交数据 -->
地址：<input type="text" name="address" form="myForm"><br>
</body>表单元素datalist，构建可选择可输入的输入框。
专业：<select name="" id="myForm">
<option value="1">前端开发</option>
<option value="2">后台开发</option>
<option value="3">Android</option>
</select><br>
<!-- 不仅可以选择，还能输入表单元素。通过datalist创建选择列表 -->
<!-- 简历输入框与datalist的关联，list=datalist的id号 -->
专业：<input type="text" list="subject">
<datalist id="subject">
<!--选项值：value具体的值；label提示信息(辅助说明值) -->
<!--option 可以是单标签，也可以是双标签 -->
<option value="English" label="很多人会说" />
<option value="前端与移动开发" label="前景很好"></option>
<option value="Java" label="工资高"></option>
<option value="PhP" label="最好的语言"></option>
<option value="iOS" label="开发成本很高"></option>
</datalist><br>
网址：<input type="url" list="urls">
<datalist id="urls">
<!--如果input输入框的type类型是url，那么value值必须添加http:// -->
<option value="http://www.baidu.com" label="有问题找度娘"></option>
<option value="http://www.sina.com" label="新浪国际"></option>
<option value="http://www.jd.com" label="老板来杯奶茶"></option>
</datalist><br>
<!-- keygen:加密操作-->
keygen元素是密钥生成器，当提交表单时，会生成两个键（公钥+私钥）。私钥存储于客户端，
公钥则被发送到服务器。公钥可用于之后验证客户端证书，即实现非对称加密。浏览器支持率很低。使用率低。
用户名：<input type="text" name="userName"><br>
密码：<input type="password" name="password"><br>
加密：<keygen></keygen><br>
<input type="submit" />
<!-- output:显示输出信息，只能显示不能修改。语义性更强，值需要我么设置，不会自动计算-->
属于新的语义标签：用来放置输出的内容，但是不能自动的计算结果，依旧需要通过js的方式来动态修改结果。
只是相比于其他的标签，语义性更强。使用率低。
<output>总金额：¥100.00</output>
form 表单属性：
email：输入邮箱格式，检查是否有@符号。
tel：输入手机号码, 在手机上，会弹出数字输入键盘
url：输入url格式
number：输入数字格式，step调整步幅，min最小值，max最大值，
search：搜索框（体现语义化）
range：自由拖动滑块，等级的意思
color：拾色器
time：
date：
datetime：
month：
week：
<label for="email_id"> 通过label扩大表单获取焦点的范围。
email:<input type="email" id="email_id">
</label>
表单元素：datalist数据列表、kegen生成加密字符串、output输出结果、meter度量值。
meter：<meter min="0" max="100" value="96" low="60" high="80">
表单属性：
placeholder 占位符
autofocus 自动获得焦点
multiple 多文件上传
autocomplete 自动完成
novalidate 关闭验证
required 必填项
pattern 自定义验证
form 让表单可以获取当前form之外的 input添加进去，一起提交到服务器。
<input tpe=“text” name=“key” form=“MyFormId">
1908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
