表单的新增其他属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="myForm">
用户名 ：<input type="text" placeholder="请输入用户名" name="userName" autofocus autocomplete="on"><br>
手机：<input type="tel" placeholder="请输入您的手机号"name="userPhone" autofocus required pattern="^(\+86)?1\d{10}$"><br>
文件：<input type="file" name="photo" multiple><br>
邮箱：<input type="email" name="email" multiple placeholder="请输入正确的邮箱"><br>
<!--提交-->
<input type="submit" ><br>
<!--下面这个表单元素没有包含在form中，默认情况下面的表单元素的数据不会进行提交-->
<!--form:指定表单id，那么在将来指定id号的表单进行提交数据的时候，也会将当前表单元素数据一起提交-->
地址：<input type="text"name="address"form="myForm">
</form>
</body>
</html>
运行效果：
- placeholder:提示文本，提示占位
- autofocus:自动获取焦点
- autocomplete:自动完成：on：打开；off:关闭
- 必须成功提交过才会有记录
- 当前添加autocomplete的元素必须有name属性
- requird:必须输入，如果没有输入会阻止当前数据提交
- pattern:正则表达式验证
- *：代表任意个
- ?:代表0个或1个
- +:代表1个或多个
- multiple:可以选择多个文件
- email:有默认验证 在email中，multiple允许输入多个邮箱地址，以逗号分隔
表单的新增type属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>type</title>
</head>
<body>
<form action="">
用户名：<input type="text"name="userName"placeholder="请输入用户名"autofocus autocomplete="on"><br>
密码：<input type="password"placeholder="请输入密码"autofocus autocomplete="on"><br>
<!--email提供了默认的电子邮箱要求必须包含@字符，同时包含服务器名称。如果不能满足验证，则会阻止数据的提交-->
邮箱：<input type="email"placeholder="请输入邮箱"autofocus autocomplete="on"multiple><br>
<!--tel它并不是来实现验证，它的本质是为了能够在移动端打开数字键盘，意味数字键盘限制了用户只能输入数字-->
电话：<input type="tel"name="userPhone" placeholder="请输入你的电话"required autofocus><br>
<!--验证只能输入合法的网址，必须包含http://-->
网址：<input type="url"placeholder="请输入正确的网址"><br>
<!--
number:只能输入数字（包含小数点），不能输入其他字符
min:最小值
max：最大值
value:默认值
-->
数量：<input type="number"value="60"max="100"min="0"><br>
<!--search:可以提供更人性化的输入体验-->
请输入商品名称：<input type="search" placeholder="请输入商品名称"><br>
范围：<input type="range"value="50"max="100"min="0"><br>
颜色：<input type="color"><br>
<!--time:时间：时分秒-->
时间：<input type="time"><br>
<!--date:年月日-->
日期：<input type="date"><br>
<!--datetime:大多数浏览器不支持datetime,只能苹果下面的safari支持-->
日期时间：<input type="datetime-local"><br>
月份：<input type="month"><br>
星期：<input type="week"><br>
<input type="submit">
</form>
</body>
</html>
运行效果：
新增的表单元素
- datalist
- 创建选项值：value：具体的值 label:提示信息，辅助值
- option可以是单标签也可以是双标签
- 如果input输入框的type类型是url,那么value值必须添加http://
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--专业：<select name="" id="">-->
<!--<option value="1">前端移动开发</option>-->
<!--<option value="1">js</option>-->
<!--<option value="1">html</option>-->
<!--<option value="1">css</option>-->
<!--</select>-->
<!--不仅可以选择，而且还可以输入-->
<!--建立 输入框与detalist的关联 list="detalist的id号"-->
专业：<input type="text" list="sel"><br>
<datalist id="sel">
<!--创建选项值：value：具体的值 label:提示信息，辅助值-->
<!--option可以是单标签也可以是双标签-->
<option value="前端移动开发" label="前景好"></option>
<option value="js" label="效果好"></option>
<option value="css" label="样式好"></option>
<option value="c++" label="后台"></option>
<option value="英语" label="不会"/>
</datalist>
网址：<input type="url"list="sel1">
<!--如果input输入框的type类型是url,那么value值必须添加http://-->
<datalist id="sel1">
<option value="http://www.baidu.com"></option>
<option value="http://www.souhu.com"></option>
<option value="http://www.goolge.com"></option>
</datalist>
</body>
</html>
- keygen:加密.
- output:显示输出信息，只能 显示不能修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
用户名：<input type="text"><br>
密码：<input type="password"><br>
加密：<keygen><keygen><br>
<input type="submit"><br>
<output>总金额：$100</output>
</form>
</body>
</html>
