html5新表单属性
表单的新属性规范
-
h5规范允许 当属性名和属性值相等的时候 可以直接书写属性名即可
-
在js中，h5允许以布尔值的形式控制属性开启或关闭
也就是在js中 给autofocus属性设置值为true（真，打开） 或者是 false（假，关闭）
但是在元素的属性中 不允许使用true或者是false来控制开启或关闭
-
如果多个表单书写autofocus(只能出现一次的属性)，那么以第一个书写的为准
表单的新属性
-
placeholder：
占位符
-
autocomplete：
是否提示用户曾经输入过的值 默认是on 关闭是off
-
autofocus：
默认自动获取焦点
他有唯一一个值是autofocus
-
required：
必填项，当提交的时候，此表单必须填写
-
disabled：
禁用任何表单元素，这个元素就被禁止输入或选择等等操作
使用disabled禁用表单，表单元素是不会在被提交了 -
checked：
单选框或多选框 默认被选中
-
readonly：
对于可编辑的表单来说 表示不能再次被编辑 但是是可以被提交的
对单选多选按钮不支持- form：
如果input存在form属性，表示当前的input属于某一个表单 此时form表单的id的值 就是这个input的值 那么form表单 和当前的input就进行关联了 无论input书写在哪里，都能随着表单发送数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素的新属性</title>
</head>
<body>
<form action="###" method="get" id="form1">
请输入用户名：
<input type="text" name="user" placeholder="请输入用户名" autofocus autocomplete="off">
<br>
请输入密码：
<input type="text" name="pass" value="123456" autofocus required>
<br>
请确认性别：
男：<input type="radio" name="sex" value="男" disabled checked>
女：<input type="radio" name="sex" value="女" disabled>
<br>
请确认年龄：
大于30岁：<input type="radio" name="age" value="30-" checked readonly>
小于30岁：<input type="radio" name="age" value="30+" readonly>
请输入邮箱：
<input type="email" name="email" value="lipeihua@atguigu.com" readonly>
<br>
<button>提交</button>
</form>
<!--在form表单外有一个input，但是想点击form中的提交按钮的时候，把这个input也给提交了，form属性就这样使用-->
<input type="hidden" name="id" form="form1" value="12587">
</body>
</html>Copy to clipboardErrorCopied
表单的新类型
-
input：（如果input的新类型不被浏览器所支持，那么他会默认显示成text文本框）
-
大多数都被谷歌浏览器支持，如果开发移动端，只要谷歌支持即可，因为所有安卓系统内置浏览器都是chrome
-
type旧类型：
text： 文本框
password： 密码框
radio： 单选框
checkbox： 多选框
hidden： 隐藏域
file： 文件域
button： 按钮
reset： 重置按钮
submit： 提交按钮
-
type新类型
-
color：
用来引入或者打开指定颜色的控件
-
date：
日期的控件（年月日）
-
week：
日期的控件（年周）（火狐不支持）
-
month：
日期的控件（年月）（火狐不支持）
-
email：
编辑email的字段
自带验证，但是验证不完整，一般还是自己书写
在移动端上 有相对应的自动弹出键盘包含 @ .com 等按键
-
number：
用来输入数字的控件
多了一个上下的按键，可以增加和降低数字大小
验证必须是数字
其他属性
- min：最少数量
- max：最大数量
- value：当前数量
- step：每次累加累减数量
-
search：
用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击可以删除输入好的文字
-
tel：
电话号码输入框
-
url：
url地址
-
range：
输入一个拖拽的控件
属性：
- max：最大值
- min：最小值
- step：每次走的最小单位
- value：当前值
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新type类型-input</title>
</head>
<body>
<form action="###" method="get">
请选择你喜欢的颜色：
<input type="color" name="color">
<br>
请选择你的出生日期：
<input type="date" name="brithday">
<br>
请输入当前的周数：
<input type="week" name="week">
<br>
请输入你几月生日：
<input type="month" name="month">
<br>
请输入您的邮箱地址：
<input type="email" name="email">
<br>
请选择您购买的数量：
<input type="number" name="num" min="2" max="10" step="2">
<br>
请在本框中进行检索：
<input type="search" name="sear">
<br>
请输入您的电话号码：
<input type="tel" name="tel">
<br>
请输入你的个人博客的网址：
<input type="url" name="url">
<br>
请选择：
<input type="range" name="range" min="30" max="100" value="50">
<br>
<br>
<button>提交</button>
</form>
</body>
</html>Copy to clipboardErrorCopied
select元素的新属性
- selected： 默认选中项
- multiple： 让select可以进行多选（按住ctrl键进行多选）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select元素的属性</title>
</head>
<body>
<form action="###" method="get">
请选择你喜欢的食物：
<select name="food" id="" multiple>
<option value="肉">肉</option>
<option value="鸡蛋">鸡蛋</option>
<option value="水果" selected>水果</option>
<option value="骨头">骨头</option>
</select>
<button>提交</button>
</form>
</body>
</html>Copy to clipboardErrorCopied
调用相册和摄像头
-
input的file补充：
<input type="file" accept="image/*" capture="camera">`
文件域 的 accept属性书写 image/* 代表接受任何格式的图片
capture=camera 代表从相机拍照接收
capture=photo 代表从相册选取照片
但是在pc端的表现都是选取文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调用本地相册和相机</title>
</head>
<body>
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="image/*" capture="photo">
</body>
</html>